Bootstrap 3: Responsive CSS framework guidelines

by | posted in: Bootstrap, CSS | 0

Here are a few pointers on understanding and using bootstrap 3 classes.

When to use the classes container and row?

container or container-fluid is a container of row elements.

container-fluid will span the full width of the screen

row elements are containers of columns (the docs call it grid system)

Also, container sets the content’s margins dealing with the responsive behaviors of your layout.

Thus the container class is often used to create ‘boxed’ contents based on the style guidelines of the Bootstrap project.

If you want to go “out of the box” creating a full width grid you can use only row elements with columns inside (spanning the usual 12cols total).

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

For a boxed responsive layout.

If you omit the container you’ll get a full-width layout.

 

Class ‘container‘ wraps the content within to center of view port. Entire content with in body tag can be placed in results the page displayed of specified width in center of page.

Class ‘row‘ is used when you need to place content in columns with in a row, you can have up to 12 columns in total in each row.

Good Reference Links:

Leave a Reply