How to Create Full Width Container Using Bootstrap 4

Last Updated on January 25, 2021 by Roshan Parihar

In this tutorial, learn how to create full width container in Bootstrap 4. The short answer is: use the Bootstrap class .container-fluid and place all the content inside it.

A full width container width is 100% for all screen devices. It covers the whole screen size that covers the entire viewport of devices.

Let’s find out its syntax and examples to learn how to create full width container in Bootstrap 4.

How to Create Full Width Container Using Bootstrap 4

The layout of full width container in Bootstrap 4 is responsive for all screen sizes like extra small, small, medium, large, and extra-large size devices. It resizes itself according to the screen size and 100% for all screen types.

You have to use the Bootstrap 4 class .container-fluid and place all the content inside it as given below:

Output

The above examples showing the layout that covers all the screen size in the output. This is useful to design web pages that cover the entire screen and looks beautiful to users.

Create Fixed Width Layout in Bootstrap 4

In addition to the above full width layout, you can also create a responsive fixed width container in Bootstrap 4. However, its size is variable in all screen sizes like extra small, small, medium, large, and extra-large size devices. You can resize your screen size to check the screen size.

You have to use the Bootstrap 4 class .container for fixed width layout as given below:

The above examples showing the layout that creates a container with some margin and width size. This is useful to design web pages that required more space to display with the designs.

You May Also Like to Read

• Bootstrap 4 Layout