Integrating Bootstrap and Genesis

Last Updated on November 16, 2020 by Dan Nedelko

<a class=btn btn primary btn lg btn block href=> Genesis + Bootstrap<a> <em><strong>Update November 2020<strong><em> <em>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<em> 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 <h2>Step 1 Grab the compiled Bootstrap 2 includes<h2> 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 <h2>Step 2 Youre done if you want to be<h2> 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 <h2>Step 3 But wait my users arent comfortable with HTMLCSS<h2> 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 <a href=httpswordpressorgpluginsbootstrap shortcodes target= blank rel=noopener noreferrer>httpswordpressorgpluginsbootstrap shortcodes<a> simple but does require some understanding of how Bootstrap works <a href=httpswordpressorgpluginsbootstrap shortcodes target= blank rel=noopener noreferrer>httpswordpressorgpluginseasy bootstrap shortcodes<a> this one has a free and premium version I cant vouch for the premium features <h2>Done is better than perfect wrapping it up<h2> 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 <h2>Bootstrap Table Tests<h2> <table class=table table hover> <thead> <tr> <th><th> <th>First Name<th> <th>Last Name<th> <th>Username<th> <tr> <thead> <tbody> <tr> <td>1<td> <td>Mark<td> <td>Otto<td> <td>mdo<td> <tr> <tr> <td>2<td> <td>Jacob<td> <td>Thornton<td> <td>fat<td> <tr> <tr> <td>3<td> <td colspan=2>Larry the Bird<td> <td>twitter<td> <tr> <tbody> <table>