Signup/Sign In

Bootstrap Container

A container act as a basic unit for designing web layout in Bootstrap. It is used to align the contents of the web page using a grid system. Bootstrap several types of containers. Let's see closely.

Types of containers in Bootstrap

There are three types of containers in Bootstrap which are given below:

  • .container - It provides a fixed-width responsive container.
  • .container-fluid - It provides a full-width container for all types of devices.
  • .container-{breakpoint} - It also provides full-width container unless the breakpoints are specified.

Comparison of container width at different breakpoints

Here is a table that compares the max-width of .container and .fluid-container across each breakpoint.

XS <576px sm >=576px md>=768 lg>=992 xl>=1200
.container 100% 540px 720px 960px 1140px
.container-xs 100% 540px 720px 960px 1140px
.container-sm 100% 100% 720px 960px 1140px
.container-md 100% 100% 100% 960px 1140px
.container-lg 100% 100% 100% 100% 1140px
.container-xl 100% 100% 100% 100% 100%
.container-fluid 100% 100% 100% 100% 100%

Bootstrap Default Container

The .container class is used to add the default container in bootstrap. The default container is responsive and has a fixed width. Let us see an example of a default container.

Here we have used the .container class to add a container. Also changed the background color to gray using inline CSS.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap </title>
	<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container" style ="background-color:gray;">
	<h1> Bootstrap Container</h1>
	<p>Successfully created a container</p>
	</div>
</body>
</html>

Output:

Here is the output of the above program.

Deafult-container

Bootstrap Full-width container

As already discussed .container-fluid is used to create a full-width container. It fits the entire screen of the device. so the width of the container is always 100% at every breakpoint as shown in the above table. Let us see an example.

Here is an example to use a full-width container in bootstrap.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap </title>
  <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container-fluid" style ="background-color:gray;">
  <h1> Bootstrap Container</h1>
  <p>Successfully created a container</p>
</div>


</body>
</html>

Output:

The resultant view of the full-width container is given below.

full-width container

Container Color and Border in Bootstrap

The container can be customized by combining other utilities. We can add borders and background colors to the container. To add background color use .bg-info for light blue color, .bg-success for green color, .bg-primary for blue color etc.

Here is an example of adding a background color and border to the container. We have used contextual classes to add background colors.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap </title>
	<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
	<h2> Container color and border </h2>
	<div class="container border"> Adding border to the container</div>  
	<div class="container bg-light text-blue">Container with light background</div>
	<br>
	<div class="container bg-dark text-white">container with dark background</div>
	<br>
	<div class="container bg-success text-white">container with contextual background</div>
</body>
</html>

Output:

Here the output of the above program.

Container color and border

Container Padding

Container by default has a padding of 15px to the left and right of the container. It does not have any top and bottom padding. so if we want to add extra padding to the container. Use .px-3 for adding padding of 16px.

Let us take an example of adding padding to a container. Here we have used .pt-3 to added padding.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap </title>
  <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 <h2> Container padding </h2>
 <div class="container bg-info pt-3"> Adding border to the container</div>
 
</body>
</html>

Output:

Here is the output of the above program.

Container-padding

Conclusion

So in this tutorial, we have learned about different types of containers. The bootstrap container provides the base for designing layouts. We can add borders and background colors to the containers along with padding and margins.