Working with the grid system of Bootstrap is confusing me

HTML & CSS
1

I am back because I am stuck on figuring out how to code the main content of the site I am working on. To remind you, I am re-coding a WP site into HTML and CSS but have to keep the same look as the WP site. The main content area on the WP site has the Flexslider at the top, then has 2 columns, the left the main content area and the right for Twitter feed. Below these columns it breaks into 3 columns. Left for forum feed, middle for the pledge link, and the right for the newsletter signup. Behind the entire content area is a semi-transparent black background. When I use <div class="container"> and then try to style that I end up with the black background on the nav and footer areas as well. What I want to use is main-container. Then within that have all the columns. I know that I have to use rows as well. I guess the format would be -

main-container
row > column full width > slider
row > column main content > column twitter feed
row > forum feed > pledge link > newsletter signup
close main-container

I am stuck trying to figure out exactly how to set this up using the grid system with Bootstrap. The site has to be responsive as it is in the WP version.

I have watched many videos on the grid system and read a few articles but I am just not understanding which .col-(sm md lg)-(1 through 12) to use and what do put for the offset so it stacks well in smaller devices.

WP site http://sacramentgame.com

2

I think that you need to start with .container-fluid, for your main container. For the “full width column”, a .col-xs-12 should do. For you main column you need something like .col-xs-12 .col-md-8 and for the “sidebar”, the classes .col-xs-6 .col-md-4 should do the trick. It really depends on your design. Take a second look through the grid documentation and it will make sense, eventually!

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.