Bootstrap Containers

Bootstrap containers are the basic layout element in Bootstrap that is used to create empty space i.e. (padding) around the content inside of them. It is a required element of the Bootstrap grid system.

Container Types

There are mainly three types of containers in Bootstrap.

Container
Fluid Container
Responsive Container

Bootstrap Container Classes

The followings are the predefined container classes of the Bootstrap.

Container:The container class provides a responsive fixed-width container that has by default margin, left and right padding up to 15px.
Container-fluid: The fluid containers use container-fluid class. It provides a full-width container that covers the whole width of the device and has by default left and right padding up to 15px.
Responsive Container: The container-{breakpoint} class, that covers 100% width until the specified breakpoint.

Container (Fixed Width)

To create a fixed-width container, use the .container class. Please remember that the fixed container's max width will be responsive with respect to device breakpoints.

Example

Container(Fixed Width)

Container Width (Max-Width) With Respect To The Device Breakpoints.

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

Example

Let us understand the container in Bootstrap 5 with the help of an example. Open the given below example and resize the browser window. You will find that container width will be changed with respect to different breakpoints such as small, medium, tablet, and extra large devices.

General Syntax

      <div class="container">Container (Fixed With)</div>

Try It Now

Source Code

    <div class="container bg-info text-white text-center py-4" style="width:80%;">Bootstrap 5 Fixed With Container</div>

Try it yourself

Source Code : Output

Bootstrap 5 Fixed With Container

Container Fluid (Full Width Container)

To create a fluid container that covers the complete width (100% width) of the available screen, use the container-fluid, class. Generally, the container fluid in Bootstrap 5 covers the whole available width of the screen and there will be no horizontal padding.

Example

Container Fluid

Maximum Width (max-width) With Respect To Device 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 ">Fluid Container (Full-Width Container )</div>

Try It Now

Source Code

    <div class="container-fluid bg-info text-white text-center py-4"> Fluid Container(Full Width Container )</div>

Try it yourself

Source Code : Output

Fluid Container(Full Width Container )

Bootstrap 5 Responsive Containers

Responsive containers provide flexibility to display 100% width until the specified breakpoint is reached, then it applies max-width for each higher breakpoint.

For example .container-sm provides 100% wide to start until the sm breakpoint is reached, then it scale up with md, lg, xl, and xxl.

	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

Bootstrap 5 Responsive Container Classes:

Let us understand the responsive breakpoints class step by step.

container-sm: It specifies 100% width till the sm breakpoint i.e. 540px and above 540px, it will have a fixed width.
container-md: It specifies 100% width till the md breakpoint i.e. 720px and above 720px, it will have a fixed width.
container-lg: It specifies 100% width till the lg breakpoint i.e. 960px and above 960px, it will have a fixed width.
container-xl: It specifies 100% width till the xl breakpoint i.e. 1140px and above 1140px, it will have a fixed width.
container-xxl: It specifies 100% width till the xxl breakpoint i.e. 1320px and above 1320px, it will have a fixed width.

Container Width

The Bootstrap container's max-width changes across each breakpoint, such as sm, md, lg,xl, and xxl.

For example, the containerclass has 100% width until the sm breakpoint, and after that, it has a fixed width value for the rest of the breakpoints.

The container has a 540px width for the sm breakpoint having a viewport width is ≥576px but <768px, 720px width for the md breakpoint having a viewport width is ≥768px but <992px, 960px width for lg breakpoint having a viewport width is ≥992px but <1200px, 1140px width for the xl breakpoint having viewport width is ≥1200px but <1400px, and 1320px width for the xxl for breakpoint having viewport width is ≥1400px.

General Syntax

      <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>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Try It Now

Source Code

    <div class="container my-3 text-center">
  <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 yourself

Source Code : Output

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 Container Padding

In general, Bootstrap containers have, by default, left and right padding, but no top or bottom padding. Therefore, we have to use the spacing utility classes for the margin and padding so that the appearance of the container could be improved.

How To Apply Padding Inside Container ?

Bootstrap provides different pre-defined padding classes to enhance the look of the container.

Follow the following rules to apply padding inside the container.

Padding For Top, Bottom, Left, Right: To add padding inside the container for the specific position such as top, bottom, left, and right, use .p{t|b|l|r}-{size[0-5]} utility class. For example,.pt-4 class specifies adding top padding with 4 sizes.
Horizontal Padding: To give equal padding around the left and right sides of the container, use .px-{size[0-5]} class. The px-5 class specifies horizontal padding with 5 sizes.
Vertical Padding:The container's top and bottom padding can be set by py-{size[0-5]} class. The .py-5 class indicates vertical padding with 5 sizes.
Equal Padding:To provide equal padding around all the sides of the container, use .p-{0 to 5} class. The .p-4 class adds equal padding around all the sides of the container.

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

General Syntax

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

Try It Now

Source Code

    <div class="container p-4 bg-dark text-white">Container Equal Padding</div>

Try it yourself

Source Code : Output

Container Equal Padding

Container Margin

Bootstrap 5 containers have by default left and right spacing, i.e., margin, while container-fluid does not have any space on the page. Therefore, we have to use spacing utility classes to adjust the space around the container.

Follow the following rules to apply margin around the containers.

Margin For Top, Bottom, Left, And Right:To provide a margin for a specific side of the container, use the .m{t|b|l|r}-{size[0-5]} class. For example, .mt-5 class specifies top margin with 5 sizes.
Equal Margin: To provide an equal margin around all the sides of the container, use the m-{size[0-5]} class. The .m-5 class specifies equal margin with 5 sizes.
Horizontal Margin:To assign equal left and right margin, use the mx-{size[0-5]} class. The mx-5 class specifies horizontal margin with 5 sizes.
Vertical Margin: Bootstrap containers' top and bottom margins can be set by the my-{size[0-5]} class. The my-5 class specifies vertical margin with 5 sizes.

Note: The padding can be applied to the inside of the container, whilst the margin will be applied to the outside of the container. The mx and my indicate horizontal and vertical margins respectively.

General Syntax

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

Try It Now

Source Code

    <div class="container mx-4 bg-dark text-white text-center">
      <p>Assigning horizontal margin outside of the container.</p>
  </div>

Try it yourself

Source Code : Output

Assigning horizontal margin outside of the container.

Container Border

Border utility classes are used to create a border around the HTML element. To create a border around the container, use the .border class. Border color can be set by border-* class.

Here, * denotes one of from {primary | secondary| danger | warning | info | light | dark | black | white | border-{color}-subtle}.

General Syntax

      <!--------For Container ------->
<div class="container border"></div> 
<div class="container border border-*"></div>
<!--------For Container Fluid------->
<div class="container-fluid border"></div> 
<div class="container-fluid border border-*"></div>

Try It Now

Source Code

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

Try it yourself

Source Code : Output

Container Border

Containers Background Color

Background utility classes are used to set the background colors of the containers. Use the .bg-* classes to assign the background color of the containers.

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

The .bg-success class sets the green background color to the container.

In the given below syntax, * specifies one of from the followings:{primary | secondary| danger |success| warning | info | light | dark | black | white | transparent}.

General Syntax

      <!--------Container------->
<div class="container bg-*"></div>
<!--------Container Fluid------->
<div class="container-fluid bg-*"></div>

Try It Now

Source Code

    <div class="container  bg-dark text-white  text-center mt-5 p-5">
     <p>Container Dark Background Color</p>
 </div>

Try it yourself

Source Code : Output

Container Dark Background Color

Bootstrap Container Frequently Asked Question(FAQ)

Bootstrap 5 Center Container Horizontally

To place the container in the center horizontally, put the container inside the external wrapper, i.e., a div, and add the .d-flex, .align-items-center, and .justify-content-center class to the external wrapper's base class. These classes will center the container horizontally.

General Syntax

      <div class="d-flex justify-content-center">
     <div class="container">Container</div>
</div>

Try It Now

Source Code

    <div class="d-flex justify-content-center  bg-light  p-5">
      <div class="container bg-warning text-white text-center" style="width:70%;">
        <p>Horizontally Center Container</p>
      </div>
  </div>

Try it yourself

Source Code : Output

Horizontally Center Container

Bootstrap 5 Center Container Vertically

To position the container in the center of the page vertically, simply put the container inside the external wrapper i.e. div, and assign .d-flex and .align-items-center class to the external wrapper's base class.

General Syntax

      <div class="d-flex align-items-center  " >
   <div class="container"></div>  
</div>

Try It Now

Source Code

    <div class="d-flex align-items-center  bg-light  mt-4 " style="height:200px;">
      <div class="container">
        <h5> Vertically Center Content</h5>
       </div>  
    </div>

Try it yourself

Source Code : Output

Vertically Center Content

Bootstrap 5 Center Container Vertically & Horizontally

To put the container in the center of the page horizontally as well as vertically, place the container inside the external wrapper, and assign the .d-flex .align-items-center, and .justify-content-center classes to the external wrapper's base class.

General Syntax

      <div class="d-flex align-items-center justify-content-center">
    <div class="container">Container</div>
</div>

Try It Now

Source Code

    <div class="d-flex align-items-center justify-content-center  bg-light  p-5">
    <div class="container bg-warning text-white text-center" style="width:70%;">
        <p>Horizontally And Vertically Center Container</p>
     </div>
</div>

Try it yourself

Source Code : Output

Horizontally And Vertically Center Container

Bootstrap 5 Container Center Content Horizontally

To center, either the Bootstrap container's content or the container-fluid content horizontally, add the text-center class to the container or container-fluid base class.

General Syntax

      <div class="container text-center"></div>
<div class="container-fluid text-center"></div>

Try It Now

Source Code

    <div class=" bg-dark text-white  container text-center P-4">
  <p>Horizontally Centered Content</p>
</div>

Try it yourself

Source Code : Output

Horizontally Centered Content

Bootstrap 5 Container Content Vertically Center

To place the Bootstrap container's content vertically centered, assign .d-flex, and .align-items-center classes to the container's base class.

General Syntax

      <div class="container d-flex align-items-center "></div>

Try It Now

Source Code

    <div class="container d-flex align-items-center  bg-dark text-white p-4 ">
   <p>Vertically Centered Text</p>
</div>

Try it yourself

Source Code : Output

Vertically Centered Text

Bootstrap 5 Container Content Vertically And Horizontally Center

The container's content can be centered horizontally & vertically by assigning .d-flex, .align-items-center, and .justify-content-center classes to the container's base class.

General Syntax

      <div class="container d-flex align-items-center justify-content-center "></div>

Try It Now

Source Code

    <div class="container d-flex align-items-center justify-content-center  bg-dark text-white  p-5 ">
    <p>Horizontally & Vertically Centered Text</p>
</div>

Try it yourself

Source Code : Output

Horizontally & Vertically Centered Text

In the above syntax, the justify-content-center, and align-items-center classes are used to place the container horizontally, and vertically center of the page respectively.

Nested Containers In Bootstrap 5

Do not nest containers to each other. If you nest the container then it creates horizontal space inside the container. Therefore, always keep in mind that each section i.e (section, div) contains only one container or container-fluid. If you want to change the containers background color then place it either <section> or <div> and assign it 100% width and then change the background color of the container.

General Syntax

      <section>
	<div class="container">Container</div>
</section>
<div>
	<div class="container">Container</div>
</div>

Try It Now

Source Code

    <section class=" bg-dark text-white  p-4">
	<div class="container text-white">Container Background Color</div>
</section>

Try it yourself

Source Code : Output

Container Background Color

Conclusion

The Bootstrap containers are an essential element of the Bootstrap grid systems that are used to wrap elements inside of them with certain padding and margin. The container is divided into three parts, a fixed-width container, a full-width container, and a responsive container. It is used to create interactive user interfaces.

Bootstrap Containers

Container Types

Bootstrap Container Classes

Container (Fixed Width)

Container Width (Max-Width) With Respect To The Device Breakpoints.

Example

Container Fluid (Full Width Container)

Maximum Width (max-width) With Respect To Device Breakpoints.

Bootstrap 5 Responsive Containers

Bootstrap 5 Responsive Container Classes:

Container Width

Bootstrap Container Padding

How To Apply Padding Inside Container ?

Container Margin

Container Border

Containers Background Color

Bootstrap Container Frequently Asked Question(FAQ)

Bootstrap 5 Center Container Horizontally

Bootstrap 5 Center Container Vertically

Vertically Center Content

Bootstrap 5 Center Container Vertically & Horizontally

Bootstrap 5 Container Center Content Horizontally

Bootstrap 5 Container Content Vertically Center

Bootstrap 5 Container Content Vertically And Horizontally Center

Nested Containers In Bootstrap 5

Conclusion

Related Tutorial