What is Bootstrap Container ?
Last Updated :
29 Sep, 2021
Bootstrap Containers are the most basic layout element in Bootstrap. Bootstrap Containers are very essential and basic building blocks of bootstrap that wrap a page’s content. It’s responsible for setting and aligning content within it according to viewport or given device. Containers are defined within the container class (.container). In other words, we can say that containers are established the width for the layout to give the content. Elements and content are added within the container.
Containers are used for many purposes such as –
- It requires use with the default grid system.
- To establish width for the layout to give web content.
- To provide responsive fixed behavior of any web project.
- To sets the content margin dealing with the responsive behavior of your layout.
Bootstrap has the default class or predefined class is “.container” & “.container-fluid” class for layout. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.
Basically, there are three types of container classes available in bootstrap:
- Default-Container(container)
- Responsive-Container(along with sm, md, lg, xl, xxl)
- Fluid-Container(container-fluid)
1. Default-Container: The default container uses ‘.container’ class. It provides a responsive fixed-width container.
Syntax:
<div class="container">
<!-- Content here -->
</div>
2. Responsive-Container: Responsive containers are responsive in nature. Responsive containers allow you to specify a class that is wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints.
Syntax:
<div class="container-sm">Wide for small breakpoint</div>
<div class="container-md">Wide for medium breakpoint</div>
<div class="container-lg">Wide for large breakpoint</div>
<div class="container-xl">Wide for extra large breakpoint</div>
<div class="container-xxl">Wide for extra large breakpoint</div>
3. Fluid-Container: Fluid-container uses the ‘.container-fluid’ class. It is used for a full-width container, spanning the entire width of the viewport.
Syntax:
<div class="fluid-container">
<!-- Content here -->
</div>
Include Bootstrap and jQuery CDN into the <head> section before all other stylesheets to load our CSS.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>
Example 1: In this example, we will see how to use the default container ‘.container” class in bootstrap and know how it’s used along within a webpage.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container"
style="background-color: yellow;">
<h1>Default-Container</h1>
<p>
This is the example of
container in bootstrap
</p>
</div>
</body>
</html>
|
Output:
Default-container in Bootstrap
Example 2: In this example, we will see the example of responsive-container uses like ‘.container-sm’ etc., class in bootstrap, and know how it’s used along within a webpage.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class=" container container-sm"
style="background-color: green;">
<h1>Responsive-Container</h1>
<p>
This is the example of
container in bootstrap
</p>
</div>
</body>
</html>
|
Output:
Responsive-container in Bootstrap
Example 3: In this example, we will see the use of fluid-container ‘.container-fluid” class in bootstrap and know how it’s used along within a webpage.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class=" container-fluid"
style="background-color: blue;">
<h1>Fluid-Container</h1>
<p>
This is the example of
container in bootstrap
</p>
</div>
</body>
</html>
|
Output:
Fluid-container in Bootstrap
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...