How they work
Containers are the most basic layout element in Bootstrap and required when using our default grid system. Containers are used to hold, pad, and (sometimes) center the content inside. While containers can be nested, most layouts do not require a nested container.
Bootstrap comes with three different containers:
Reading: How to create a multipage website using containers using bootstrap
- .container, which set a maximum width for each Responsive Breakpoint
- .container-fluid, which is width: 100% at all breakpoints
- .container-{breakpoint}, which is width: 100% up to the given breakpoint
The table below illustrates how each container’s maximum width compares to the original .container and .container-fluid across each breakpoint.
See also: How to Make a WordPress Website: Step-by-Step Guide for Beginners
See them in action and compare them in our grid example.
Extra Small<576px Small≥576px Medium≥768px Large≥992px X-Large≥1200px XX-Large≥1400px container-md 100 % 100 % 720 px 960 px 1140 px 1320 px .container -lg 100% 100% 100% 960 px 1140 px 1320 px .container-xl 100% 100% 100% 100% 1140 px 1320 px .container-xxl 100% 100% 100% 100% 1320px .container-fluid 100 % 100 % 100 % 10 0 % 100 % 100 %
Default Container
Our default .container class is a fixed-width responsive container, which means that changes its maximum width at each breakpoint.
Responsiv Container
Responsive Containers allow you to specify a class that is 100% wide until the specified breakpoint is reached. After that, we apply maximum widths to each of the higher breakpoints. For example, .container-sm is 100% wide to begin with until it hits the sm breakpoint where it scales up with md, lg, xl, and xxl.
Liquid Container
See also: New Grad Nursing (RN) Resume Examples & Guide
Use .container-fluid for a full-width container that spans the entire width of the viewport.
Sass
As shown above, Bootstrap generates a number of predefined container classes, to help you create the layouts you want. You can customize these predefined container classes by modifying the Sass map (found in _variables.scss) that drives them:
In addition to customizing Sass, you can also create your own containers with our Sass Create a mixin.
See the Sass section of the Grid documentation for more information and examples of how to modify our Sass maps and variables.
See also: How to Create a Website Building Platform Like Wix
.
