Last Updated on November 16, 2020 by Dan Nedelko
Update November 2020 Just a quick note dear reader this blog post is now over 6 years old I would consider it out of date I no longer use Genesis framework Ive moved this website over to Thrive Architect by Thrive Themes
Bootstrap is one of my personal favourite frameworks and Genesis Framework by StudioPress is a go to when putting together conversion centric websites
Marrying the best of both worlds allows me to be responsive out of the box prioritize messaging and increase conversions to a goal
Adding Bootstrap functionality to a Genesis powered site is relatively simple
Step 1 Grab the compiled Bootstrap 2 includes
Its really just as simple as adding this block of code to your site header
code
< Latest compiled and minified CSS >
< Optional theme >
< Latest compiled and minified JavaScript >
<script src=maxcdnbootstrapcdncombootstrap320jsbootstrapminjs><script>
code
Special thanks to the fine folks at MaxCDN for hosting the compiled versions of bootstrap
Step 2 Youre done if you want to be
If your comfortable with basic HTML and CSS which any modern marketer should be then youre technically finished You can go right ahead and start including your Bootstrap ified code into posts and pages
Woot
If youre not 100 comfortable with that concept then you should head over to Treehouse CodeAcademy or CodeSchool and start sharpening those skills
Step 3 But wait my users arent comfortable with HTMLCSS
Point well taken There are a few options for you smooth the transition for your writers and users to insert Bootstrap happiness into their workflow
Head over to wordpressorg and grab any one of the following fine Bootstrap 3 shortcode plugins
httpswordpressorgpluginsbootstrap shortcodes simple but does require some understanding of how Bootstrap works
httpswordpressorgpluginseasy bootstrap shortcodes this one has a free and premium version I cant vouch for the premium features
Done is better than perfect wrapping it up
I was hacking around updating things when I decided to give this a shot There are some minor styling tweaks which I am sure could be resolved given a little bit more time and effort
Adding some Bootsrap mojo to your Genesis powered site will give you the flexibility and the best of both worlds Im looking forward to hearing where your Bootstrap + WordPress + Genesis escapades lead you hit me up on LinkedIn Twitter or down below in the comments
Bootstrap Table Tests
| First Name | Last Name | Username | |
|---|---|---|---|
| 1 | Mark | Otto | mdo |
| 2 | Jacob | Thornton | fat |
| 3 | Larry the Bird | ||
Hi Dan,
Thanks for this post. I’m in the midst of a re-design and I’m very disappointed with the lack of real personality that most blog/sites have out there. My strengths lie in ideas and research not in code or dev.
My blog/mag runs on Genesis Metro and after a year…(testing, learning etc…) I’m bored with it. After careful consideration, I found that UI / UX design (for web) most desirable. i.e flat panel, long shadow and so on.
Keeping with the best framework (Genesis) and building on what I have currently, I can’t help but feel ahead and behind at the same time. Who do pay to get it done right and make it really frigging awesome? Your guess is as good as mine.
With big things coming in 2015, where does this leave us? Most importantly, those of us on a budget and limited skills???
Again, I’m running Gen. metro but I need something that really kicks.. Here’s a bootstrap theme I found recently: http://www.marchettidesign.net/2014/06/fullby-premium-responsive-grid-video-parallax-wordpress-theme/
I thought the new ” X Theme” [ http://theme.co/x ] would be Genesis friendly but as it turns out (according to Rebecca from http://www.web-savvy-marketing.com/) it’s not.
I would to love figure out a way to install fullby on top of Genesis. That for me would be perfect. Until of course (as an added bonus) “The Grid” comes full circle in spring. Check it out: https://thegrid.io/ This could change EVERYTHING…..
Please share your thoughts and help if you can.
Best,
Luc
There has to be a way to add Bootstrap to Genesis without it over-riding the custom css changes I make in my child theme css file. I understand how to add Bootstrap this way (and thank you) but how can you have it still ‘cascade’. I want to be able to take advantage of what Bootstrap has to offer but don’t want it taking over the whole style of my child theme…do you have any idea how to do this?
Thank you in advance!
I’m in the same situation as you, adding bootstrap breaks the background css of the breadcrumbs