Bootstrap Containers

Bootstrap containers are the basic layout element in the Bootstrap grid system that is used to create empty space (padding) around the content.

Bootstrap Container Types

There are mainly three types of container in Bootstrap. Let us see it.

  • container(fixed-width) - It takes a fixed width in all the screen sizes.
  • container fluid (full-width) - It takes 100% width of the screen at each breakpoint.
  • responsive container -It takes 100% width of the screen till the specified breakpoint and then takes max-width for higher breakpoints..

Bootstrap Container Classes

There are mainly three types of container classes in Bootstrap. These are:

  1. The .container class provides a responsive fixed-width container that has a default margin and left and right padding up to 15px.
  2. The .container-fluid class provides Bootstrap fluid container (full with a container) that covers the whole width of the device and has a default left and right padding up to 15px.
  3. The Bootstrap responsive container i.e. .container-{breakpoint}, covers width: 100% until the specified breakpoint.

Bootstrap Container (Fixed Width)

To create a fixed-width container, use the .container class. It always takes fixed width at each breakpoint. Please remember that this max-width will be responsive with respect to device breakpoint.

Example

Bootstrap max width container (Fixed Width)

Bootstrap Container Max Width(Bootstrap Container Width)

The table below indicates that the container width in Bootstrap varies with respect to the screen sizes.

Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px XX-Large ≥1400px
.container 100% 540px 720px 960px 1140px 1320px

General Syntax

      <div class="container"></div>
  
Try it now

Source Code

          <div class="container bg-light text-center mt-5">
  <h2>Learn Bootstrap 5 Fixed Width Container</h2>
  <p>
    A fixed width container has by default padding around the content.
  </p>
</div>
        
Try it now

Code Explanation

In this example, .container class is assigned to the parent element base class. This is the process of creating the fixed-width container.

Bootstrap Container Full Width (Fluid Container)

To create a full width container in bootstrap, use .container-fluid class. It takes the entire width (100% width) of the screen. The container-fluid class in bootstrap does not generate left and right margin to the container.

Example

Fluid Container(Full Width)

Bootstrap Full Width Container's Width At Each Breakpoints

Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px XX-Large ≥1400px
.container-fluid 100% 100% 100% 100% 100% 100%

General Syntax

      <div class="container-fluid">container fluid</div>
  
Try it now

Source Code

          <div class="container-fluid bg-light text-center">
  <h3>Learn Bootstrap 5 Container Fluid</h3>
  <p>The container fluid covers the whole available width.</p>
</div>
        
Try it now

Code Explanation

Note: To create bootstrap full width container, assign .container-fluid to the parent element base class.

Bootstrap Container Vs Container Fluid

The .container class is used to construct a fixed-width container, while .container-fluid is used? to make a full-width container. There are the following differences between the .container and the .container-fluid.

.container

.container-fluid

.container .container-fluid
The .container class always has a fixed width at each breakpoint. The .container-fluid takes 100% of the available width of the screen.
Whenever the browser resizes, the width of the .Container changes at each breakpoint. The .container-fluid width changes continuously during browser resizing. Although it takes 100% width of the screen.
It generates padding in the left or right side of the container. It also generates padding in the left or right side of the container.
It centers the content inside the container. The container's content span the whole available width of the screen.
It generates left and right side margin of the container. Container fluid captures 100% width of the screen.

Bootstrap Responsive Container

Bootstrap responsive container provides flexibility to display 100% width until the specified breakpoint is reached, then it applies max-width for each higher breakpoint.

For example, the .container-sm class provides 100% width to start until the sm breakpoint is reached. Then, it scales up with md, lg, xl, and xxl.

Example

100% wide until small breakpoint


100% wide until medium breakpoint


100% wide until large breakpoint


100% wide until extra-large breakpoint


100% wide until extra extra-large breakpoint

Bootstrap Responsive Container Classes

There are following types of responsive container classes in Bootstrap.

  • container-sm:It takes 100% width till the small screen size (sm breakpoint) i.e. 540px and above 540px, it takes a fixed width.
  • container-md: It takes 100% width till the medium screen size(md breakpoint) i.e. 720px and above 720px, it takes a fixed width.
  • container-lg: It specifies 100% width till the large screen size(lg breakpoint) i.e. 960px and above 960px, it takes a fixed width.
  • container-xl: It takes 100% width till the extra large size screen (xl breakpoint) i.e. 1140px and above 1140px, it takes fixed width.
  • container-xxl: It specifies 100% width till the xxl breakpoint i.e. 1320px and above 1320px, it takes a fixed width.

Responsive Container Width

The Bootstrap container's max-width changes across each breakpoints(sm, md, lg,xl, and xxl).

For example, the container-sm class has 100% width until the sm breakpoint, and after that, it takes fixed width value for the rest of the breakpoints. Let us understand it.

  • It has a 540px width for the small screen size(sm breakpoint) having a viewport width is ≥576px but <768px.
  • It has 720px width for the medium screen size(md breakpoint) having a viewport width is ≥768px but <992px.
  • It has 960px width for large screen size(lg breakpoint) having a viewport width is ≥992px but <1200px.
  • It has 1140px width for the extra large screen size(xl breakpoint) having viewport width is ≥1200px but <1400px.
  • It has 1320px width for the extra extra large screen size (xxl breakpoint) having viewport width is ≥1400px.
Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px XX-Large ≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Source Code

          <div class="container mt-5">
  <div class="container-sm bg-success">
    100% wide until small breakpoint
  </div>
  <br />
  <div class="container-md bg-warning">
    100% wide until medium breakpoint
  </div>
  <br />
  <div class="container-lg bg-danger">
    100% wide until large breakpoint
  </div>
  <br />
  <div class="container-xl bg-dark text-white">
    100% wide until extra large breakpoint
  </div>
  <br />
  <div class="container-xxl bg-info">
    100% wide until extra extra large breakpoint
  </div>
</div>
<!--/container-->
        
Try it now

Code Explanation

Note: In this example, the responsive container concept is used to create 100% width until the specified breakpoint is reached, then it applies max-width for each higher breakpoint.

Bootstrap Container Margin

It has by default left and right margin upto 15px. But fluid container(full width containers in bootstrap) does not have any left and right margin. To create space around container, use margin utility classes.

Horizontal Margin: - To create equal left and right margins to the container, use mx-{size[0-5]} class. For example mx-4 class specifies horizontal, left and right margin up to 4 sizes.

Syntax
 
    <div class="container mx-{size[0-5]}"></div>
   

Vertical Margin: - To add an equal top and bottom margin to the container, use my-{size[0-5]} class. For example, my-4 class applies vertical top and bottom margins up to 4 sizes.

Syntax
 
    <div class="container my-{size[0-5]}"></div>
   

Equal Margin: - To create an equal margin around the container, use the m-{size[0-5]} class. For example, the m-4 class specifies an equal margin with 4 sizes.

Syntax
 
    <div class="container m-{size[0-5]}"></div>
   

Margin For Top, Bottom, Left, And Right: - To create a margin for a specific position {top/bottom/left/right} of the container, use the .m{t|b|l|r}-{size[0-5]} class. For example, the .mt-5 class specifies top margin with 5 sizes.

Syntax
 
    <div class="container m{ t|b|l|r}-{size[0-5]}"></div>
   

Source Code

          <div class="container mx-4 bg-light text-dark text-center">
    <p>Container left & right margin</p>
</div>
        
Try it now

Source Code : Output

Container left & right margin

Bootstrap Container Padding

Containers have by default left and right padding, but there is no top or bottom padding. So, to create padding inside the container, use space utility classes. It makes the look of the table so elegant.
There are the following rules regarding space utility classes.

Padding For Top, Bottom, Left, Right: - Use the .p{t|b|l|r}-{size[0-5]} utility classes to achieve desired padding. For example,.pt-3 class adds top padding with 4 sizes.

Syntax
 
    <div class="container p{t|b|l|r}-{size[0-5]}"></div>
   

Horizontal Padding: - To create equal padding in the left and right sides of the container, use .px-{size[0-5]} class. The px-2 class adds horizontal padding with 2 sizes.

Syntax
 
    <div class="container px-{size[0-5]}"></div>
   

Vertical Padding: - To create top and bottom padding inside the container, use py-{size[0-5]} class. The .py-4 class adds vertical padding with 4 sizes.

Syntax
 
    <div class="container py-{size[0-5]}"></div>
   

Equal Padding - To make equal padding around all sides of the container, use .p-{0 to 5} class. The .p-4 class adds equal padding around all the sides of the container.

Syntax
 
    <div class="container px-{size[0-5]}"></div>
   

In the above syntax, t, b, l, and r specify the top, bottom, left, and right padding accordingly, while px and py represent horizontal and vertical padding, respectively.

Source Code

          <div class="container p-5 bg-dark text-white">Container Equal Padding</div>
        
Try it now

Source Code : Output

Container Equal Padding

Bootstrap Container Background Color

Bootstrap uses different predefined background utility classes to set the background color of the container. These classes start with ,.bg-*. Here * refers to one of the following {primary | secondary | danger | success | warning | info | light | dark | black | white | transparent} options.

For example, the .bg-light class is used to display a light gray background color.

Background Color Utility Classes
 
    <div class="bg-primary"></div>
    <div class="bg-secondary"></div>
    <div class="bg-danger"></div>
    <div class="bg-success"></div>
    <div class="bg-warning"></div>
    <div class="bg-info"></div>
    <div class="bg-light"></div>
    <div class="bg-dark"></div>
    <div class="bg-black"></div>
    <div class="bg-white"></div>
    <div class="bg-transparent"></div>
   

General Syntax

      <!--------To Set The Color In Container------->
<div class="container bg-*"></div>
<!--------To Set The Color In Container Fluid------->
<div class="container-fluid bg-*"></div>
  
Try it now

Source Code

          <div class="container  bg-light text-dark  text-center mt-5 p-5">
    <p>Container Having Light Background Color</p>
</div>
        
Try it now

Source Code : Output

Container Having Light Background Color

Bootstrap Container Border

If you want to set border as well as the border color to the container then use the border and border-* classes, respectively. Here, again, * denotes one option from the following given {primary | secondary| danger | warning | info | light | dark | black | white | border-{color}-subtle} options.

Border Color Classes
 
    <div class="border-primary"></div>
    <div class="border-secondary"></div>
    <div class="border-danger"></div>
    <div class="border-success"></div>
    <div class="border-warning"></div>
    <div class="border-info"></div>
    <div class="border-light"></div>
    <div class="border-dark"></div>
    <div class="border-black"></div>
    <div class="border-white"></div>
    <div class="border-transparent"></div>
   

General Syntax

      <!--------Container Border & Color------->
<div class="container border">Container Border</div>
<div class="container border border-*">Container Border Color</div>
<!--------Container Fluid Border & Color ------->
<div class="container-fluid border">Border</div>
<div class="container-fluid border border-*">Border Color</div>
  
Try it now

Source Code

          <div class="container border border-success  bg-light text-center mt-5">
   <p>Container Border With Color</p>
</div>
        
Try it now

Source Code : Output

Container Border With Color

Text Utility Classes

It is used to put the text on the left, center, or right side of the container. To place the text on the left, center, or right side of the container, use text-start, .text-center and .text-end class, respectively.

Example

Left Aligned Text

Center Aligned Text

Right Aligned Text

Text Utility Classes
 
	<div class="text-start"></div>
	<div class="text-center"></div>
	<div class="text-end"></div>
   

General Syntax

      <!--------For Container------->
<div class="container text-{start |end |center}"></div>
<!--------For Container Fluid------->
<div class="container-fluid text-{start | end| center}"></div>
  
Try it now

Online Test / Quiz

Web Tutorials

Bootstrap Containers
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4