Notes on the Bootstrap 4 CSS File (version 4.3.1)

The size of the Bootstrap 4 fixed width containers is specified in lines 548-578

.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

@media (min-width: 576px) {
.container {
max-width: 540px;
}
}

@media (min-width: 768px) {
.container {
max-width: 720px;
}
}

@media (min-width: 992px) {
.container {
max-width: 960px;
}
}

@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}

Definition of the Columns

Thus what column classes will be defined 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-1 through col-12 col-sm-1 through 12 col-md-1 through 12 col-lg-1 through 12 col-xl -1 through 12
Less than 576 yes no no no no
576-767 yes yes no no no
768-991 yes yes yes no no
992-1199 yes yes yes yes no
>=1200 yes yes yes yes yes

The Bootstrap 4 breakpoints, class definitions, and column widths are show in the following table which is taken from https://getbootstrap.com/docs/4.3/layout/grid/. Thus an extra breakpoint has been added at the bottom end, at 576px, and a new name has been added at the top end, extra-large, so the mapping between names and breakpoints has changed to accomodate these additions.

  Extra Small
<576px
Small
>=576px		 Medium
>=768px		 Large
>=992p		 Extra Large
>=1200px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max Container width None (auto) 540px 720px 960px 1140px
Column Class Prefix .col- .col-sm- .col-md- .col-lg- .col-xl-

Revised: April 25, 2019