In the sixth installment of our Bootstrap 3 tutorial, we cover the Bootstrap grid system and how the responsive design works.
Video Transcript
Hey everybody this is Christopher Gimmer form BootstrapBay.com and welcome to part 6 of our Bootstrap 3 tutorial. Today we’re going to cover the Bootstrap grid system.
In the last video we went over the jumbotron and now we’re going to add columns of text to our website and explain how the grid system works.
First thing we want to do within our container class that’s housing the jumbotron is to add a row class. When you’re creating columns of text, you want to ensure they’re all being housed within a row. Next we’re going to go:
<div class="col-md-4"></div>
Here’s what this means. ‘Col’ stands for column. ‘Md’ stands for medium and this enables you to dictate and which point you want your text to collapse horizontally as opposed to vertically. When we shrink our browser and get to the medium size, your columns will show up horizontally as opposed to vertically and I’ll show you that in a second once we build this out a bit more.
Lastly, the ‘4’ represents how many columns within the grid system this is going to take up. Bootstrap works on a 12 point grid system so within a row you want to ensure that your columns are adding up to 12. This is going to take up 4 columns on the grid which means we can have 3 classes since the 3 of them combined will equal to 12 on the grid.
I’m going to build this out a bit by adding an h3 tag called Theme 1, some paragraph text by copying and pasting Lorem Ipsum and finally we’re going to add a button. Let’s use danger since we haven’t used that one yet which is the red button.
If we go to our preview, we now have Theme 1 and you’ll notice that it’s taking up 4 spots in the grid system. One thing I’m going to do is add some padding at the bottom in our custom CSS.
I’m going to copy this 3 more times and this is what it looks like in our browser. I had specified earlier that when the size became medium, we wanted the columns to stack horizontally. Right now we’re on the extra large size in our grid. If I start collapsing the browser, you’ll notice I just hit a breaking point so now we’re at the large size. If we keep shrinking it more, now we’re in medium. You’ll notice that now it’s stacking horizontally. If we keep going, now we’re in the small size.
When we’re in the mobile size, you’ll see that it’s very legible and it all stacks horizontally.
What we can also do is change the ‘md’ to ‘sm’ which means small. What that’s gonna do is it’s going to stack the columns a bit later. So now we’re extra large, large, and now we’re in medium. You’ll see that it’s still stacking vertically whereas before it was stacking horizontally. If we go to our small, now it starts to stack horizontally.
As you can see, you can have as many columns as you want and you can pick at which point you want it to stack horizontally. It’s all a matter of preference and what works best for your website. At the end of the day, you just want to make sure that all of your columns add up to 12 and you should be fine.
So that’s it for our tutorial on the Bootstrap grid system and in the next video we’re going to go over modals. Make sure to subscribe and we’ll see you in the next video.
