Grid System

12-Column Layout

Bootstrap's grid system divides the page into 12 columns, providing a flexible and responsive layout structure. This allows developers to create visually appealing and well-structured designs that adapt seamlessly to different screen sizes and devices.

Grid Classes

• container: The container class wraps and centers the content within a fixed-width container. It provides padding, margin, and ensures proper alignment of content;
• row: The row class creates a horizontal group of columns. It serves as a container for columns, ensuring proper alignment and spacing between them;
• col: Columns within a row are defined using the col class. Developers specify the width of columns using col classes such as col-6, col-md-4, or col-lg-3.

Responsive Design

Bootstrap's grid system is designed to be responsive, allowing content to adapt dynamically based on the viewport size and device type. Developers can use responsive grid classes like col-md-6 or col-lg-4 to specify column widths for different screen sizes, such as medium or large devices.

Note

In Bootstrap, the classes sm,md, lg, and xl represent different screen sizes

Examples

Example 1: Basic Grid Layout

In this example, we have a container with a single row containing three equal-width columns. Each column takes up an equal portion of the row's width, resulting in a horizontal layout with three columns.

Example 2: Responsive Grid Layout

In this example, a container has one row with three columns. The first two columns (col-md-6) are set to occupy half of the row's width on medium-sized screens and above. The third column (col-md-12) is set to occupy the entire row width on medium-sized screens and above. This ensures that the third column occupies the entire row's width.

Result of the responsive grid's behavior