Bootstrap 4 layout requires to add all your website content part inside the containers. To make your content responsive according to screen sizes, you have to use container classes within which you can add rows and columns.
In this tutorial, you will learn all types of containers in Bootstrap 4 to wrap your content inside it. All layout of Bootstrap 4 start with a container that you will learn here.
Bootstrap 4 Layout: Fixed, Full, and Responsive Width Containers
There are three Bootstrap 4 container classes you can use for content wrapping:-
| Container Class | Description |
|---|---|
.container |
Fixed width container with different width changes according to screen sizes. |
.container-fluid |
The full-width container covers the entire screen with 100% width. |
.container-sm|md|lg|xl |
Responsive width container new in Bootstrap 4.4 used for 100% width until reached specified breakpoints. |
Let’s start learning both of them in detail below.
Fixed Width Container
To create a fixed width container, use the .container class. It’s max-width is predefined to each screen sizes as given below:-
| Container Class |
Screen Sizes | ||||
|---|---|---|---|---|---|
| Extra Small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra Large ≥1200px |
|
.container |
100% | 540px | 720px | 960px | 1140px |
You can find above that the screen size is different for each screen size and 100% for extra small screen size.
See the below example that uses the .container inside in which all content comes inside. Click the ‘Test is Live’ button to check the example live on each screen size.
|
1 2 3 4 |
<div class="container"> <h3>Container</h3> <p>This is a paragraph.</p> </div> |
The above example contains the <h3> tag and the <p> tag to add heading and paragraph content.
Full-Width Container in Bootstrap 4 Layout
For creating a full-width container, use the .container-fluid class. It’s max-width is 100% for all screen sizes to cover the entire screen width as given below:-
| Container Class |
Screen Sizes | ||||
|---|---|---|---|---|---|
| Extra Small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra Large ≥1200px |
|
.container-fluid |
100% | 100% | 100% | 100% | 100% |
The table has given above shows the screen size is 100% for each screen size to cover the entire viewport.
Check the example given below using the .container-fluid inside in which all content is added. You can click the ‘Test is Live’ button to check the example live and resize the screen sizes.
|
1 2 3 4 |
<div class="container-fluid"> <h3>Container-Fluid</h3> <p>This is a paragraph.</p> </div> |
The example contains the heading using <h3> tag and the paragraph using <p> tag.
Responsive Containers in Bootstrap 4 Layout
A responsive container can be created by using any of the class from .container-sm, .container-md, .container-lg, and .container-xl. You need to specify a class that is 100% wide until it reached the specified breakpoints.
see the table given below to check the max-width for each classes for different screen sizes:-
| Responsive Container Class |
Screen Sizes | ||||
|---|---|---|---|---|---|
| Extra Small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra Large ≥1200px |
|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
The above table showing the screen sizes which are 100% wide until it reached the specified breakpoint.
Check the example given below uses all the responsive class inside which the content is added. Click the ‘Test is Live’ button to check them live on different screen sizes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="container-sm"> <h2>Container-sm</h2> <p>This is a paragraph.</p> </div> <div class="container-md"> <h2>Container-md</h2> <p>This is a paragraph.</p> </div> <div class="container-lg"> <h2>Container-lg</h2> <p>This is a paragraph.</p> </div> <div class="container-xl"> <h2>Container-xl</h2> <p>This is a paragraph.</p> </div> |
Next Chapter ➔ Bootstrap 4 Grid System >>