In this tutorial we finally start using the Bootstrap grid. Now that you understand the concept behind the grid, and how it works, you can start creating columns and rows.
Creating a container
Generally, you will always use the bootstrap grid inside of a container that determines the max width of your website. Bootstrap has 2 containers available to use by default. A “container” with a max width and a “fluid container” which will always fit the width of the browser.
Creating a container
The Bootstrap container has a maximum width which is determined by each breakpoint, you can see more about thesegrid options here. This means that content will always be centered with white space on each side.
<div class="container">
...
</div>
Creating a fluid container
The fluid container will scale to fit the browser width, which is useful for creating full-width slideshows or rows with background images.
<div class="container-fluid">
...
</div>
Using the bootstrap grid
Once you have your container in place, the next step is to create a new row, and inside of that we can create our columns. You’ll notice my column is suffixed with a break point and a column size.
<div class="container">
<div class="row">
<div class="col-lg-1">
...
</div>
</div>
</div>
Making use of break points
Each column class is made out of 3 hyphenated parts.
col-lg-1col lets bootstrap know that we are using a column.
The next part,
lg sets the break point for a certain size screen. This can be lg for large screens, md for medium screens,sm for small screens and xs is for extra small screens.
The final part is just a number and could be any number between 1 and 12. This determines how wide your column will be at each break point.
You’ll find that you might want to define a different column width for each break point. To do this you can simply add an extra class for each break point as demonstrated below. If no rule is defined for a break point, then Bootstrap will use the rule you defined for a smaller break point or it will default to stacking the columns.
<div class="container">
<div class="row">
<div class="col-lg-1 col-xs-4">
...
</div>
</div>
</div>
0 comments