The Bootstrap grid system is a powerful layout mechanism provided by the Bootstrap framework for creating responsive and flexible web page layouts. It's based on a 12-column grid, which allows developers to divide a webpage into columns and rows easily.
Key Components of the Bootstrap Grid System
1. Container : The outermost element that wraps the entire content of the webpage. It provides padding and centers the content within the viewport. Bootstrap offers two types of containers
a. .container : Creates a responsive fixed-width container
b. .container-fluid : Creates a full-width container that spans the entire viewport width.
2. Row : Inside the container, rows are used to group columns horizontally. Rows ensure proper alignment and padding of columns. Each row consists of up to 12 columns.
3. Column : Columns are the basic building blocks of the grid system. They are placed within rows and are used to organize and position content. Columns in Bootstrap have classes like `col-*`, where `*` represents the number of columns the element should span.
-`col-4`: Span 4 out of 12 columns (1/3 width).
- `col-6`: Span 6 out of 12 columns (1/2 width).
- `col-12`: Span 12 out of 12 columns (full width).
4. Responsive Classes: Bootstrap provides responsive classes to control column behavior on different screen sizes:
col-xs-*`: Extra small devices (phones).
`col-sm-*`: Small devices (tablets).
`col-md-*`: Medium devices (desktops).
`col-lg-*`: Large devices (larger desktops).
`col-xl-*`: Extra large devices.