Bootstrap nesting

Working with Bootstrap makes designing a nice website much easier, but there are some fundamentals that need to be understood. The most basic issue in Bootstrap is layout, and something I struggled with early on was to keep my data properly aligned as I got deeper and deeper into nesting containers, rows and columns.  This post looks at how to keep your data lined up properly.

Bootstrap provides us with the following classes to structure our layout.

  • container (or container-fluid)
  • row
  • col (col-xs-#, col-sm-#, col-md-#, col-lg-#)

Let’s establish some simple rules:

  1. Start with a container. This will be a div with a class of ‘container’ or ‘container-fluid’.
  2. Put rows inside the container (this will be div’s with the class set to ‘row’).
  3. Put cols inside your rows (this will be div’s with a the class set to ‘col-xs-#’, ‘col-sm-#’, ‘col-md-#’, or ‘col-lg-#’. (replace the # with a number between 1 and 12). I’m assuming you already know how the grid system works with 12 columns max. You can refer to the http://getbootstrap.com/getting-started/ for details on that.
  4. If you want to nest deeper, and you will, then it gets tricky so just follow these very simple rules.
  5. If you have a col that you want to break down further, then put rows into the col, then put cols into that those rows (repeat as necessary).
  6. Do NOT nest containers. You have a top-level container and that is it. After that you just want to repeat rows contain cols. Cols contain html, text and more rows.

Here is a sample page I put together that you can tinker with if you want to see what happens when you nest containers, rows, and cols. It is easy to see from this that sticking with the following pattern keeps things neatly aligned:

  • Container
    • row
      • col
        • row
          • col
            • row
              • col
                • … continue as needed

Bootstrap nesting

Let’s look closer

Bootstrap Nesting Zoom

Here is a zip file of all files needed to reproduce and tinker with this layout test.

Site1 bootstrap nesting

If you know an alternate way to keep your page properly aligned that is elegant to work with, please leave a comment. Thanks!

Edit: I just ran into this on SO which explains the how the .make-row class is used in bootstrap to automatically correct for indenting. Basically it confirms that rows are used to correct for padding of a container (whether it be an actual container or col)  by adding a negative margin. – http://stackoverflow.com/questions/22748673/fix-bootstrap-padding-on-nested-columns

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s