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.
will span the full width of the screencontainer-fluid
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:
- http://www.onextrapixel.com/2012/11/12/how-to-use-twitter-bootstrap-to-create-a-responsive-website-design/
- http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/
- http://www.w3schools.com/bootstrap/bootstrap_typography.asp
- https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know
- http://stackoverflow.com/questions/19983857/when-should-i-use-class-container-and-row
Leave a Reply