BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
Advertisements

Bootstrap Containers

In this tutorial you will learn how to create containers with Bootstrap.

Creating Containers with Bootstrap

Containers are the most basic layout element in Bootstrap and are required when using the grid system. Containers are basically used to wrap content with some padding. They are also used to align the content horizontally center on the page in case of fixed width layout.

Bootstrap provides three different types containers:

  • .container, which has a max-width at each responsive breakpoint.
  • .container-fluid, which has 100% width at all breakpoints.
  • .container-{breakpoint}, which has 100% width until the specified breakpoint.

The following table illustrates how each container's max-width changes across each breakpoint.

For example, when using the .container class the actual width of the container will be 100% if the viewport width is less than 576px, 540px if the viewport width is greater than or equal to 576px, 720px if the viewport width is greater than or equal to 768px, 960px if the viewport width is greater than or equal to 992px, 1140px if viewport width is greater than or equal to 1200px.

Similarly, when you use the .container-lg class the actual width of the container will be 100% until the viewport width is less than 992px, 960px if the viewport width is greater than or equal to 992px, and 1140px if the viewport width is greater than or equal to 1200px.

Class Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

Creating Responsive Fixed-width Containers

You can simply use the .container class to create a responsive, fixed-width container. The width of the container will change at different breakpoints or screen sizes, as shown above.

<div class="container">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

Creating Fluid Containers

You can use the .container-fluid class to create a full width container. The width of the fluid container will always be 100% irrespective of the devices or screen sizes.

<div class="container-fluid">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

Specify Responsive Breakpoints for Containers

Since Bootstrap v4.4, you can also create containers that is 100% wide until the specified breakpoint is reached, after which max-width for each of the higher breakpoints will be applied.

For example, .container-xl will be 100% wide until the xl breakpoint is reached (i.e., viewport width ≥ 1200px), after which max-width for xl breakpoint is applied, which is 1140px.

<div class="container-sm">100% wide until screen size less than 576px</div>
<div class="container-md">100% wide until screen size less than 768px</div>
<div class="container-lg">100% wide until screen size less than 992px</div>
<div class="container-xl">100% wide until screen size less than 1200px</div>

Adding Background and Borders to Containers

By default, container doesn't have any background-color or border. But if you need you can apply your own styles, or simply use the Bootstrap background-color and border utility classes to add background-color or border on them, as shown in the following example.

<!-- Container with dark background and white text color -->
<div class="container bg-dark text-white">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

<!-- Container with light background -->
<div class="container bg-light">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

<!-- Container with border -->
<div class="container border">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

Applying Paddings and Margins to Containers

By default, containers have padding of 15px on the left and right sides, and no padding on the top and bottom sides. To apply extra padding and margins you can use the spacing utility classes.

<!-- Container with border, extra paddings and margins -->
<div class="container border py-3 my-3">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

Tip: Avoid setting left and right margin on fixed and responsive containers, because the value auto is applied automatically to margin-left and margin-right property by the Bootstrap at certain breakpoints to align the container horizontally center.

Advertisements
Bootstrap UI Design Templates