Note: Mobile devices that we use today come with 2 different screen orientations: Portrait and Landscape. So the above is mostly true for landscape view only. For example, if you are using a Samsung Galaxy Note III phone, the landscape view falls in the “Small Devices” category whereas the portrait view would fall under “Extra Small Devices”.

This kind of categorization is common in responsive frameworks and it’s something you can certainly benefit from understanding better.

The Grid System Demystified

If you are familiar with Bootstrap’s grid system, you might know that there is a specific HTML structure required to properly set up its grids. Let’s demystify it.

As shown above, Bootstrap’s grid system starts with a container element. Containers define how much space a grid system should use. They can be of two types: .container has different widths for different types of devices whereas .container-fluid expands to fit the width of the device.

With the help of media queries, Bootstrap gives different widths to the .container depending on the size of the device:

Extra small devices (<768px): width: auto (or no width)

Small Devices (≥768px): width: 750px

Medium Devices (≥992px): width: 970px

Larger Devices (≥1200px): width: 1170px

Here are some more CSS declarations that are applied to the .container class.

As seen in the above image, the .container prevents the content inside the element from touching the browser edge using 15px of padding on each side. It also ensures the container is centered using auto for left and right margins.

Rows are another important element in Bootstrap’s Grid System. Before creating columns, you can define a row using the class .row. Here’s a snippet from Bootstrap’s CSS for the .row class:

.row {
margin-right: -15px;
margin-left: -15px;
}

As shown above, our row has negative left and right margins of -15px to allow the row to touch the edge of its container element. This acts as a wrapper to hold columns, which can add up to 12 in number.

You may have noticed that the margins on the row seem to be counteracting the 15px of padding applied to the container. If we analyze the columns, we can see why this is needed.

Here’s a snippet from Bootstrap’s CSS for the .col-xs-6 class.

.col-xs-6 {
padding-right: 15px;
padding-left: 15px;
}

As shown, left and right padding of 15px is applied to the columns, resulting in something like the image below:

Because of the negative margins on the row, the columns are touching the edges of the row and the edges of the container. But the padding causes the contents that go inside these columns to remain 15px away from the edges of the container.

Containers are used for multiple purposes, not just for the grid system, so the 15px padding helps to avoid the content touching the edges of the browser (when using .container-fluid). Rows have the negative margins so that they are not pushed by the padding of the container.

If you are considering designing your own framework, you might want to consider using this padding/margin technique.

Defining Proper Column Widths

Bootstrap uses percentages (%) as the unit to define the widths of columns, helping with responsiveness. As stated above, there are 4 different categories of device-based breakpoints. Each category has its own set classes for columns of different sizes.

Extra small devices use .col-xs-*.

Small devices use .col-sm-*.

Medium devices use .col-md-*.

Large devices use .col-lg-*.

The asterisk character (*) gets replaced by a number. For example, .col-xs-6 creates a column 6 times the size of a .col-xs-1 column; .col-sm-4 creates a column four times the size of .col-sm-1, and so on.

By default, all the columns have no width set, which defaults to width: auto. However, within the media queries, Bootstrap gives width values to each column class.

Here’s a snippet from Bootstrap’s CSS for the column classes with asterisks replacing the sizes for brevity (xs, sm, md, etc):

Let’s analyze the above code. A class .col-lg-6 will have a width of 50% in large devices but when viewed in medium, small, and extra-small devices, the default width: auto is used. This ensures that the columns are converted to a stacked layout (rather than side by side) in smaller devices.

Responsive Tables

Tables, used for displaying tabular data, are also responsive in Bootstrap.

To use Bootstrap’s table styles, we use the class .table, which has the following CSS:

.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}

Bootstrap forces tables to fit the width of the parent element by applying a width of 100%. But this has an issue. A multi-column table will get squeezed on smaller devices and may not be readable.

Bootstrap has another class to remedy this: .table-responsive. Here’s the CSS:

Web Designer with over 6 years of experience, including user experience and front end development.
Currently, CEO and Co-Founder of Hashnode, a network of software developers.
Has published two books: Jump Start Bootstrap and Jump Start Foundation for SitePoint Premium.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

jokeyrhyme

Device-specific media queries are an abomination and a cop-out. Media queries should be designed specifically for the content you have.

Frameworks focus on devices because they don’t magically know anything about your content, but designers on any given project should know better.

The article isn’t meant to be a news piece on the release of Bootstrap 3, but an examination of the code. The intro just points out that the mobile first thing has started with version 3.

LouisLazaris

He/she is correct, but that’s just one of the flaws of a framework.

To put it very basically, the reason it’s generally bad practice, is because the whole idea of “breakpoints” is based on “where your content/layout breaks”. That is, at what “point” does your content “break”? When you determine that, then you can determine where to define those “points” to alter the layout. In other words, your layout doesn’t necessarily break at “768px” as Bootstrap assumes; but instead, it might break at 790px or 755px. It’s the content that will determine that, which the framework doesn’t know anything about.

But for a generic framework like Bootstrap, there’s nothing wrong with it. That’s the only way to do it, and if you follow the grid system pretty closely, then it shouldn’t really cause too many problems. But again, you’d have to consider that on a case-by-case basis, and a framework can’t really do that out of the box.

Knight Yoshi

However, that’s one of the great things about the Bootstrap framework. It’s so easy to change anything and everything. To adjust it for one’s own needs.

Sander

@media (min-width: 992px) and (max-width: 1999px) { … }

Shouldn’t that be 1199px instead of 1999px?

LouisLazaris

Yes, that’s fixed now, nice catch. Thanks.

http://theyoricktouch.com/ Yorick

Nice overview. Bootstrap is a very useful framework, especially for myself when building templates for a content management system.

It has several other tricks up its sleeve such as pull-left and pull-right to align content.

However, I’m not overly convinced of the enforced 15px padding – I think I’d prefer to have more control in my own local css.

And I do think there is a demand for a media query of max-width 420px for mobiles in portrait mode.

Thanks.

http://ChiefAlchemist.com/ Mark Simchock

Those are good points. I think it’s important for all of us to realize, it’s called Bootstrap for a reason. That is it’s not called “Use It As-Is Or Die.” :)

http://ChiefAlchemist.com/ Mark Simchock

re: “Let’s analyze the above code. A class .col-lg-6 will have a width of 50% in large devices but when viewed in medium, small, and extra-small devices, the default width: auto is used. This ensures that the columns are converted to a stacked layout (rather than side by side) in smaller devices.”

Yes, solid overview. Thanks for sharing.

Perhaps in your next article I think the idea implied in this bit (quoted) might be worth exploring further. I’m not so sure most people (new to a RWD framework like BS3) grasp the idea of using the col width classes for different screen sizes. For example something like: class=”col-xs-6 col-lg-3″

seanhunt

This is an OK intro, but only an intro. Personally I think Bootstrap is wonderful. Even if you are making a website that will only be viewed on a desktop monitor, it is a great way to layout your application and if you need a large data intensive Intranet screen, you can just adjust the left margin to not auto center. By the way, notice that that extra-small really is not small enough for an iPhone 5 or before, Well, add your own step and it will work dandy. I’ve tried JQuery mobile which has its place and experimented with responsive javascript (Bootstrap makes it unnecessary), but I like Bootstrap best.

http://emergingtruths.com/ larry

Here’s a learning I committed to memory: Don’t use .row unless you’re going to use .col* too. Otherwise your left/right margins will be 0 instead of 15px. Why? Because .row effectively eliminates the padding introduced by .container and then .col* adds it back. So without .col*, you’re left with no left/right margins. But this begs the question: when would one *not* use .col* classes? When one doesn’t need an adaptive layout, i.e. when the layout should remain the same at any width.

Sander Teunissen

Why would you want to use row when not using col? You could just omit the row class (or the entire div)

Reloj

Thank you for this site Syed. I was wondering if you know how to make links to tabs from a button in bootstrap 3. Basically from a button that says: read more >>> be able to link to a specific tab (an open it) in the same page.

I would appreciate any help with this.

Thanks.
Reloj

Sander Teunissen

This sounds like something you would do using JavaScript. Just like activating the tabs as explained in http://getbootstrap.com/javascript/#tabs you could bind a click handler to the “read more” link that opens the tab. such as:

I’m confused. I use a grid where the width is 1170/1140 for large, 970 for medium desktop, 750 for tablet. When I get to iPhone portrait is 320 with gutters. Is that right?

Sam

If it is all responsive – it will automatically fit – then why do I have to choose a column type – sm/md, etc. Can someone clarify this – why/what column size do I choose

Jeremiah Emmerson

I noticed a big problem for images, especially for Samsung Galaxy S4, S5. The images themselves are really high dpi and you would think the resolution would be crisp. I will try this. Very good article. Good insight.

Paul Peterson

Excellent overview, Syed. Thanks for the effort you put into it!

Jaydot

Thank you for posting this! Most of it is too complicated for me, but I’ve just spent hours and hours trying to get table-responsive to work in Joomla – until I found out that Joomla still uses Bootstrap 2.3.2 which doesn’t have the table-responsive class.
Fixed now, and working beautifully!

rahul singh

Waow..just cool..got to know a lot in this article of yours.Thanks..:)

http://www.shareshoppe.in/ Lowest Brokerage Trading

Bootstrap is very Simple As Per Media Query. Bootstrap is small code need and media query is very large code want.