One of the things - if not the MAIN thing - that makes Bootstrap so great is its grid system. This 12 column grid is flexible enough for any layout you can possibly require, easy to learn, and even easier to use.
Containers are the most basic layout element in Bootstrap and are required when using the default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.
Bootstrap comes with three different containers:
.container, which sets a max-width at each responsive breakpoint.container-fluid, which is width: 100% at all breakpoints.container-{breakpoint}, which is width: 100% until the specified breakpointThe basic container in Bootstrap displays at the max width breakpoint by default and changes width when each smaller breakpoint is reached. Resize the width of your browser window to see the breakpoints change.
Note: Containers are not visible! These lessons and examples have styles applied so you can see how they work.
<div class="container">
<!-- Content here -->
</div>
The fluid container in Bootstrap displays at 100% of the viewport width always. Resize the width of your browser window to see the container stays edge-to-edge.
<div class="container-fluid">
...
</div>
Responsive containers in Bootstrap display at the max width breakpoint by default and change width when each specified breakpoint is reached. Resize the width of your browser window to see the breakpoints change. To designate responsive elements in bootstrap you use the abbreviations xl, lg, md, and sm.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>