How to Create Responsive Width Containers Using Bootstrap 4

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
Screen Sizes
Extra Small
Extra Large
.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.

Test it Live

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

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.