Bootstrap 4 - Layouts

Bootstrap 4 is the newest version of Bootstrap. The Bootstrap is a free to use and completely open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap 4 is completely free to download and use.

Layouts in Bootstrap 4

In Bootstrap 4, there are container classes that are typically used to wrap the different contents in a page. There are basically two container classes that can be used for various different activities -

  1. .container - this container class can be used to represent a fixed width container.
  2. .container-fluid - this container can be used to represent a full width container.

Container

The .container class in Bootstrap 4 can be applied into a web page for the purpose of wrapping the page content with a fixed width. Moreover, by using the container class the content can be placed in the center very easily with the help of using the .container class as shown below.

The syntax of this class is given below:

The example of a simple web page that shows a fixed width container class can be seen in the code given below:

Test it Now

The output of the following program is shown below -

Output:

Bootstrap 4 - Layouts

Fluid Container

In this section, a user can build a full width container with the help of a .container-fluid class.

The syntax is given below:

The example of this class is given below, the example below shows a simple web page that contains a full width container -

Example:

Test it Now

The output of the following program is shown below -

Output:

Bootstrap 4 - Layouts




Latest Courses