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.
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.
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 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.
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.
