If you want to create a responsive design using the bootstrap, you need to place all your content inside the boxed Bootstrap container. The boxed container can be of full width or some margins from left and right. All your rows and grids comes inside the container. Bootstrap comes with two container classes you can use to create a responsive web page.

Bootstrap Container Classes

There two container classes are given below.

  1. container
  2. container-fluid

How to use container Class

A container is a fixed width class which change on resizing the screen size. There are some break points in the size of the class at which the class change its size on reaching each break point.

A bootstrap starts with the container div inside which you put all your Bootstrap rows and grid columns. 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

This is the Bootstrap Tutorial to learn container classes.

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

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 jump to the new size. In every screen sizes, container fluid class takes the full width size of the screen.

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

Output

This is the Bootstrap Tutorial to learn container classes.

These 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.

Leave a Reply

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.