overview div with bootstrap code example
Example 1: bootstrap breakpoints
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Example 2: bootstrap container width
--------------------------------------------------------------------------------------
Bootstrap Container Width | Size | Class Prefix
--------------------------------------------------------------------------------------
Extra small devices Phones (less than 768px) | None (auto) | .col-xs-
Small devices Tablets (greater than equals 768px) | 750px | .col-sm-
Medium devices Desktops (greater than equals 992px) | 970px | .col-md-
Large devices Desktops (greater than equals 1200px) | 1170px | .col-lg-
Example 3: bootstrap change column width
.col-sm-3half, .col-sm-8half {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 768px) {
.col-sm-3half, .col-sm-8half {
float: left;
}
.col-sm-3half {
width: 29.16666667%;
}
.col-sm-8half {
width: 70.83333333%;
}
}