bootstrap container size code example
Example 1: container in bootstrap
Containers
Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
While containers can be nested, most layouts do not require a nested container.
Syntax:
<div class="container">
<!-- Content here -->
</div>
Example 2: bootstrap breakpoints
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// 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 3: bootstrap grid
<!----------------------- BOOTSTRAP GRID SYSTEM ------------------------>
This code will create 4 boxes placed side by side, which will be
dynamically positioned, according to the size of the screen. We define
the following behavior:
<!-- Desktop Display: we have 4 columns per row (each occupies 3 units out of 12) -->
class = "col-lg-3" <!-- display large with 12/3 = 4 columns -->
<!-- Tablet Display: we have 3 columns per row (each occupies 4 units out of 12) -->
class = "col-md-4" <!-- display medium with 12/4 = 3 columns -->
<!-- Mobile Display: we have 2 columns per row (each occupies the 6 units of 12) -->
class = "col-sm-6" <!-- display small with 12/6 = 2 columns -->
<!-- CODE -->
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:red; border:1px solid black;">
One of four columns
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border:1px solid black;">
One of four columns
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:green; border:1px solid black;">
One of four columns
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="border:1px solid black;">
One of four columns
</div>
</div>
Example 4: bootstrap container
Our default .container class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.
<div class="container">
<!-- Content here -->
</div>
Example 5: 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 6: container class in bootstrap
meaning it’s 100% wide all the time