Last Updated on February 3, 2021 by Roshan Parihar
In this tutorial, learn how to create responsive width containers using Bootstrap 4. The short answer is: use the responsive container classes .container-sm, .container-md, .container-lg, and .container-xl.
The width of these container classes remains 100% until it reaches the specified breakpoints. Let’s find out how to create them with the examples given below:
How to Create Responsive Width Containers Using Bootstrap 4
A responsive width container is useful to create that resizes itself according to the specified breakpoints. There are 4 responsive classes in Bootstrap 4 as given below with its screen size:
see the table given below to check the max-width for each class 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 shows that the screen sizes of these responsive containers are 100% wide until it reached the specified breakpoint.
You can check the example given below that uses all the responsive container classes with the content added inside. Click the ‘Test is Live’ button to check them live and resize your browser size to see different screen sizes and responsiveness.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="container-sm"> <strong>Container-sm</strong> <p>This is a paragraph.</p> </div> <div class="container-md"> <strong>Container-md</strong> <p>This is a paragraph.</p> </div> <div class="container-lg"> <strong>Container-lg</strong> <p>This is a paragraph.</p> </div> <div class="container-xl"> <strong>Container-xl</strong> <p>This is a paragraph.</p> </div> |
The above example contains the heading and the paragraph inside the responsive container width classes of Bootstrap 4. This is useful to design web pages that required responsive containers that resize themselves according to the screen sizes.
You May Also Like to Read