Bootstrap 3 Essential Training, Using multiple column classes

You can create a lot of layouts by just using rows and columns but you can also use the Bootstrap classes to create the size that behave differently depending on the breakpoint. So, let’s take a look. I’ve loaded up some more realistic content on this page, so if we take a look at my HTML, I have a div.

It has a class of services and then our regular container class, not the container-fluid, and in here, we have a headline, which is Services, which is right here, and then we have one single row and that row has different sections.  

And each one of the sections has a class of col-md-4. It means that at the medium breakpoint, each one of these sections will take up four of the twelve columns.

So, I’ve added some other content in here. So if you take a look at the styles, that CSS file, you can see that there’s just a couple of styles to make my page behave and look really nice. So, what you could see is if I make this a little smaller at the medium breakpoint, it’s all going to go to a single column layout.  

If I make it a lot wider.

Leave a Reply

Notify of