3 Column Layout Using Bootstrap 3.2

OK, I know a few of you guys are wondering how to create 3 column layouts on your pages. Below is a quick guide to doing this.

Use coding and CSS at your our risk! Bootstrap and Fontswesome sometimes takes over your main CSS. So you will need to tweak it.

1.Final Result View: http://www.apvisions.com
2. Final Result View: http://www.apvisions.com/digital-downloads/john-green/arron-robles/

You must paste this CSS into Css external file in the one line text box:
Code:
http://pastebin.com/embed_iframe.php?i=GExZ9PEK
Example:


Insert Bootstrap Code into the body of your post or page:
Code:
http://pastebin.com/embed_iframe.php?i=SB4UW09b
Example:


Bootstrap Resources
http://getbootstrap.com

Fontawesome Resources
http://fortawesome.github.io/Font-Awesome/

Happy Developing,

Edited by

@Timothy Foster.

This should resolve the CSS issue with the link not staying on the external CSS bar. Please paste this code in the bar for your bootstrap CSS.
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

Edited by

The code for bootstrap somehow broke the mobile navigation menu. Any possibility there is a workaround for it Aaron?

Edited by

@Timothy. Are you only using the CSS for the 3 columns? Or for more CSS features?

Edited by

I used only the CSS line added into the one line Additional CSS, I then put the code into the home page to create the columns. I have not added any other code

Edited by

@ Timothy Foster.

Here is the external css for the bootstrap columns and much more. I fixed the CSS to fit the Sytist.

Fixes:
mobile menu bar
other bugs that effect systist.

Add this link to your external menu bar as shown in the screen shots above.
//s3-us-west-2.amazonaws.com/s.cdpn.io/191294/bootstrap.css

Bootstrap site Layered on top of the Sytist.
1. Final Result View: http://www.apvisions.com
2. Final Result View: http://www.apvisions.com/digital-downloads/john-green/arron-robles/
3. More bootstrap examples on my dev site: http://codepen.io/arronrobles/

Happy Developing,

Edited Sun Oct 12, 14 8:19 PM by Arron Robles

Hello Arron,

I have a question about this bootstrap code. Is it possible to change the color of the button in the code? I would like it to match the color scheme of my website.

Thanks

Edited by

Yes, absolutely. Below is the link to the bootstrap code page.
http://getbootstrap.com/css/#buttons

For the different colors. for custom colors you will need to do a custom css.
http://getbootstrap.com/customize/

You will need to invoke a new css file link if you customize. The standard buttons you can just change in the code without customizing. Hope this was helpful.

Edited by

Yes that helps.

I am not so good with the coding aspect but I was able to at least change the button color to one of the preset ones.

Edited by