HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
You learned from the previous chapter that Bootstrap requires a containing element to wrap site contents
You learned from the previous chapter that Bootstrap requires a containing element to wrap site contents.
Containers are used to pad the content inside of them, and there are two container classes available:
.container class provides a responsive fixed width container.container-fluid class provides a full width container, spanning the entire width of the viewportUse the .container class to create a responsive, fixed-width container.
Note that its width (max-width) will change on different screen sizes:
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra Large ≥1200px |
XXL ≥1400px |
|---|
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
Open the example below and resize the browser window to see that the container width will change at different breakpoints:
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
The XXL breakpoint (≥1400px) is new in Bootstrap 5, while the largest breakpoint in Bootstrap 4 is Extra large (≥1200px).
Use the .container-fluid class to create a full width container, that will always span the entire width of the screen (width is always 100%):
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
By default, containers have left and right padding, with no top or bottom padding. Therefore, we often use spacing utilities, such as extra padding and margins to make them look even better. For example,
.pt-5 means "add a large top padding":
<div class="container pt-5"></div>
Other utilities, such as borders and colors, are also often used together with containers:
<div class="container p-5 my-5 border"></div>
<div class="container
p-5 my-5 bg-dark
text-white"></div>
<div class="container p-5 my-5 bg-primary
text-white"></div>
You will learn much more about colors and border utilities in a later chapter.
You can also use the .container-sm|md|lg|xl classes to determine when the container should be responsive.
The max-width of the container will change on different screen sizes/viewports:
| Class |
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
XXL ≥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 |
<div class="container-sm">.container-sm</div>
<div
class="container-md">.container-md</div>
<div
class="container-lg">.container-lg</div>
<div
class="container-xl">.container-xl</div>
<div
class="container-xxl">.container-xxl</div>
W3.CSS is an excellent alternative to Bootstrap 5.
If you want to learn W3.CSS, go to our W3.CSS Tutorial.