Bootstrap 3 includes predefined grid classes for quickly making grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc. For example, you can use the .col-xs-* class to create grid columns for extra small devices like cell phones, similarly the .col-sm-* class for small screen devices like tablets, the .col-md-* class for medium size devices like desktops and the .col-lg-* for large desktop screens.
Features
Bootstrap 3 Grid System
Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
Max container width
None (auto) 750px 970px 1170px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Max column width Auto ~62px ~81px ~97px
Gutter width 15px on each side of a column (i.e. 30px)
Above table demonstrates one important thing, applying any .col-sm-* class to an element will not only affect its styling on small devices, but also on medium and large devices having a screen size greater than or equal to 768px (i.e. ≥768px) if .col-md-* and .col-lg-* class is not present. Similarly the .col-md-* class will not only affect the styling of elements on medium devices, but also on large devices if a .col-lg-* class is not present.
Now the question arises how to create rows and columns using this 12 column responsive grid system. The answer is pretty simple, at first create a container that acts as a wrapper for your rows and columns using the .container class, after that create rows inside the container using the .row class, and to create columns inside any row you can use the class .col-xs-*, .col-sm-*, .col-md-* and .col-lg-*. The columns are actual content area where we will place our contents. Let's put all these things into real action.
Creating Two Column Layouts
The following example will show you how to create two column layouts for small, medium and large devices like tables, laptops and desktops etc. However, on mobile phones, the columns will automatically become horizontal as default.
Example »
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col-sm-6"><!--Column left--></div>
<div class="col-sm-6"><!--Column right--></div>
</div>
<!--Row with two columns divided in 1:2 ratio-->
<div class="row">
<div class="col-sm-4"><!--Column left--></div>
<div class="col-sm-8"><!--Column right--></div>
</div>
<!--Row with two columns divided in 1:3 ratio-->
<div class="row">
<div class="col-sm-3"><!--Column left--></div>
<div class="col-sm-9"><!--Column right--></div>
</div>
</div>
Since Bootstrap grid system is based on 12 columns, so to keep the columns in a one line (i.e. side by side), the sum of the grid column numbers in each row should be equal to 12. If you see the above example carefully you will find the numbers of grid columns (i.e. col-sm-*) add up to twelve (6+6, 4+8 and 3+9) for every row.
Creating Three Column Layouts
Similarly, you can create other layouts based on the above principle. The following example will typically create three column layouts for laptops and desktops screens. It also works in tablets in landscape mode if screen resolution is more than or equal to 992 pixels (e.g. Apple iPad). However, in portrait mode it will be horizontal as usual.
Bootstrap Layouts with Column Wrapping Feature
Now we are going to create more flexible layouts that changes the column orientation based on the viewport size. The following example will create a three column layout on medium devices like laptops and desktops, as well as on tablets (e.g. Apple iPad) in landscape mode, but on small devices like tablets in portrait mode, it will change into a two column layout where the third column moves at the bottom of the first two columns.
Example »
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2"><!--Column one--></div>
<div class="col-sm-9 col-md-8"><!--Column two--></div>
<div class="col-sm-12 col-md-2"><!--Column three--></div>
</div>
</div>
As you can see in the example above the sum of small grid column numbers (i.e. col-sm-*) is 3 + 9 + 12 = 24 > 12, so the third <div> element with the class .col-sm-12 that is adding the extra columns beyond the maximum 12 columns in a .row, gets wrapped onto a new line as one contiguous unit on small devices having the viewport width less than the 992 pixels.
Similarly, you can create even more adaptable layouts for your websites and applications using the Bootstrap's grid column wrapping feature. In the next section, we'll discuss the other aspect of this feature. Here're some ready to use Bootstrap grid examples.
Creating Multi-Column Layouts with Bootstrap 3 Grid System
With the new Bootstrap 3 mobile first grid system you can easily control how your website layout will render on different types of devices that have different screen sizes like cell phones, tablets, desktops, etc. Let's consider the following illustration.
<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
<div class="col-md-4"><p>Box 4</p></div>
<div class="col-md-4"><p>Box 5</p></div>
<div class="col-md-4"><p>Box 6</p></div>
<div class="col-md-4"><p>Box 7</p></div>
<div class="col-md-4"><p>Box 8</p></div>
<div class="col-md-4"><p>Box 9</p></div>
<div class="col-md-4"><p>Box 10</p></div>
<div class="col-md-4"><p>Box 11</p></div>
<div class="col-md-4"><p>Box 12</p></div>
</div>
</div>
But just wait, the above example has a major alignment issue. If height of any column is taller than the other it doesn't clear properly and break the layout. To fix this, use the combination of a .clearfix class and the responsive utility classes.
Class Description
.hidden-xs
Hide the elements only on extra small devices having screen width less than 768px. Visible on others.
.hidden-sm
Hide the elements only on small devices having screen width greater than or equal to 768px (i.e. ≥768px) but less than 992px. Visible on others.
.hidden-md
Hide the elements only on medium devices having screen width greater than or equal to 992px (i.e. ≥992px) but less than 1200px. Visible on others.
.hidden-lg
Hide the elements only on large devices having screen width greater than or equal to 1200px (i.e. ≥1200px). Visible on others.
Features
Bootstrap 3 Grid System
Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
Max container width
None (auto) 750px 970px 1170px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Max column width Auto ~62px ~81px ~97px
Gutter width 15px on each side of a column (i.e. 30px)
Above table demonstrates one important thing, applying any .col-sm-* class to an element will not only affect its styling on small devices, but also on medium and large devices having a screen size greater than or equal to 768px (i.e. ≥768px) if .col-md-* and .col-lg-* class is not present. Similarly the .col-md-* class will not only affect the styling of elements on medium devices, but also on large devices if a .col-lg-* class is not present.
Now the question arises how to create rows and columns using this 12 column responsive grid system. The answer is pretty simple, at first create a container that acts as a wrapper for your rows and columns using the .container class, after that create rows inside the container using the .row class, and to create columns inside any row you can use the class .col-xs-*, .col-sm-*, .col-md-* and .col-lg-*. The columns are actual content area where we will place our contents. Let's put all these things into real action.
Creating Two Column Layouts
The following example will show you how to create two column layouts for small, medium and large devices like tables, laptops and desktops etc. However, on mobile phones, the columns will automatically become horizontal as default.
Example »
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col-sm-6"><!--Column left--></div>
<div class="col-sm-6"><!--Column right--></div>
</div>
<!--Row with two columns divided in 1:2 ratio-->
<div class="row">
<div class="col-sm-4"><!--Column left--></div>
<div class="col-sm-8"><!--Column right--></div>
</div>
<!--Row with two columns divided in 1:3 ratio-->
<div class="row">
<div class="col-sm-3"><!--Column left--></div>
<div class="col-sm-9"><!--Column right--></div>
</div>
</div>
Since Bootstrap grid system is based on 12 columns, so to keep the columns in a one line (i.e. side by side), the sum of the grid column numbers in each row should be equal to 12. If you see the above example carefully you will find the numbers of grid columns (i.e. col-sm-*) add up to twelve (6+6, 4+8 and 3+9) for every row.
Creating Three Column Layouts
Similarly, you can create other layouts based on the above principle. The following example will typically create three column layouts for laptops and desktops screens. It also works in tablets in landscape mode if screen resolution is more than or equal to 992 pixels (e.g. Apple iPad). However, in portrait mode it will be horizontal as usual.
Bootstrap Layouts with Column Wrapping Feature
Now we are going to create more flexible layouts that changes the column orientation based on the viewport size. The following example will create a three column layout on medium devices like laptops and desktops, as well as on tablets (e.g. Apple iPad) in landscape mode, but on small devices like tablets in portrait mode, it will change into a two column layout where the third column moves at the bottom of the first two columns.
Example »
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2"><!--Column one--></div>
<div class="col-sm-9 col-md-8"><!--Column two--></div>
<div class="col-sm-12 col-md-2"><!--Column three--></div>
</div>
</div>
As you can see in the example above the sum of small grid column numbers (i.e. col-sm-*) is 3 + 9 + 12 = 24 > 12, so the third <div> element with the class .col-sm-12 that is adding the extra columns beyond the maximum 12 columns in a .row, gets wrapped onto a new line as one contiguous unit on small devices having the viewport width less than the 992 pixels.
Similarly, you can create even more adaptable layouts for your websites and applications using the Bootstrap's grid column wrapping feature. In the next section, we'll discuss the other aspect of this feature. Here're some ready to use Bootstrap grid examples.
Creating Multi-Column Layouts with Bootstrap 3 Grid System
With the new Bootstrap 3 mobile first grid system you can easily control how your website layout will render on different types of devices that have different screen sizes like cell phones, tablets, desktops, etc. Let's consider the following illustration.
<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
<div class="col-md-4"><p>Box 4</p></div>
<div class="col-md-4"><p>Box 5</p></div>
<div class="col-md-4"><p>Box 6</p></div>
<div class="col-md-4"><p>Box 7</p></div>
<div class="col-md-4"><p>Box 8</p></div>
<div class="col-md-4"><p>Box 9</p></div>
<div class="col-md-4"><p>Box 10</p></div>
<div class="col-md-4"><p>Box 11</p></div>
<div class="col-md-4"><p>Box 12</p></div>
</div>
</div>
But just wait, the above example has a major alignment issue. If height of any column is taller than the other it doesn't clear properly and break the layout. To fix this, use the combination of a .clearfix class and the responsive utility classes.
Class Description
.hidden-xs
Hide the elements only on extra small devices having screen width less than 768px. Visible on others.
.hidden-sm
Hide the elements only on small devices having screen width greater than or equal to 768px (i.e. ≥768px) but less than 992px. Visible on others.
.hidden-md
Hide the elements only on medium devices having screen width greater than or equal to 992px (i.e. ≥992px) but less than 1200px. Visible on others.
.hidden-lg
Hide the elements only on large devices having screen width greater than or equal to 1200px (i.e. ≥1200px). Visible on others.
No comments:
Post a Comment