The padding for Bootstrap fluid containers is specified in lines 1605-1610
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Thus Bootstrap fluid containers will occupy the entire width of the viewport with 15 pixels and padding on either side, and will be centered on the page.
The negative margins for Bootstrap rows are specified in lines 1611-1614
.row {
margin-right: -15px;
margin-left: -15px;
}
Thus putting a row inside of a container-fluid container cancels out the padding specified for the container, so the row extends the entire width of the viewport. Columns, which will be placed inside of rows, will restore this padding as shown in lines 1616-1620
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
The size of the Bootstrap fixed width containers is specified in lines 1584-1604
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
The first specification is the same as the container-fluid definition. This specification for .container is outside of any media query therefore it always applies, unless overridden by a subsequent specification such as in the lines that immediately follow. The order of the three media queries is important. For example, a screen size of 1300px will satisfy all three media queries. If the order of these was reversed, i.e. 1200, then 992, then 768, the container width for the 1300px screen size would be 750 because the later definitions of width would override the earlier definitions. Specifying them in this order ("mobile first") also enables the smallest devices to execute none of these media queries, and tablet size devices to execute only one which allows for possibly slower mobile download and processing times.
Where the column classes are defined follows a similar approch.
Thus what column classes will be defined at various screen resolutions/viewport sizes is shown in the following table - the yes/no's for each column are implied by the bullet points above.:
| Screen Resolution of Device | col-xs-1 though 12 | col-sm-1 through 12 | col-md-1 through 12 | col-lg-1 through 12 |
| less than 768px | yes | no | no | no |
| 768-991px | yes | yes | no | no |
| 992-1199px | yes | yes | yes | no |
| >= 1200px | yes | yes | yes | yes |
Taking the md classes that we examined before, suppose an "md class" is applied to an element (a class col-md-1 through col-md-12). Above the md breakpoint (992px), these classes will be defined and in lines 1936-1937, these classes have a float:left applied, so elements with such a class applied, will go side by side, to the extent there is room. Whether there is room depends on the widths that are defined in lines 1939-1974. For exampe, a col-md-3 is given width:25%, col-md-6 is given width:50% and col-md-12 is given width:100%.
However, below the breakpoint, only the xs and sm classes will be defined and thus the md class which is applied has no effect because it is not defined. So if the elements are block-level element such as div's, they will stack on top of each other if no other classes are applied. However, <span>'s would not, as we can see from the last example in the rows and columns writeup.
The Bootstrap website notes that "Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present." (see https://getbootstrap.com/docs/3.3/css/#grid-intro)
This is a result of the order of the media queries in the bootstrap.css file.
Revised: November 28, 2017