If you want to create a responsive design using the Bootstrap, you need to place all your content inside the boxed Bootstrap container classes. The boxed container can be of full width or some specified width size with margins from left and right.

All your rows and grids come inside the container classes. Bootstrap comes with two container classes you can use to create a responsive web page. You can find the examples and descriptions of these two classes below.

Two Bootstrap Container Classes

There are two container classes are given below.

1. .container
2. .container-fluid

Let’s find out how you can use these classes in Bootstrap.

1. How to use Bootstrap .container Class

A .container is a fixed-width class that changes on resizing the screen size. There are some breakpoints in the size of the class at which the class changes its size on reaching each breakpoint.

A bootstrap starts with the container div inside which you put all your Bootstrap rows and grid columns. A .container is the predefined width class you can use to make your content responsive-without worrying for the different screen sizes.

Let’s see a simple example given below.

Output

Container

This is the Bootstrap Container to add boxed content.

The above example creates a fixed width container using the .container class. A row has created here to place twelve grid columns and place HTML content.

How to Use Bootstrap .container-fluid Class

The Bootstrap .container-fluid class takes the full-width viewport of the screen. On resizing the screen the container fluid automatically jumps to the new size. In every screen size, .container-fluid class takes the full-width size of the screen.

Let’s see the class with the example given below.

Output

Container Fluid

This is the Bootstrap Container Fluid to add full content.

These two Bootstrap container classes are required when you want to use the Bootstrap grid system. However, you can create your webpage without using the container classes.