How does Bootstrap Grid work?

Certainly! As an experienced tutor specializing in Bootstrap Training, I can provide you with a comprehensive understanding of how Bootstrap Grid works. If you're interested in learning more about Bootstrap and its grid system, UrbanPro.com is the perfect platform to find the best online coaching for Bootstrap Training.

Overview of Bootstrap Grid:

Bootstrap Grid is a powerful, mobile-first grid system that allows developers to create responsive and flexible layouts. It is based on a 12-column layout, providing a structured way to organize content on a webpage.

Key Concepts:

1. Container:

   • The grid system in Bootstrap is built within a container. Containers hold and structure the grid's layout. There are two types of containers in Bootstrap: .container and .container-fluid.
   • The .container class creates a fixed-width container, while .container-fluid creates a full-width container that spans the entire width of the viewport.

2. Rows:

   • Rows are the horizontal containers for columns. Rows ensure that columns are properly aligned and spaced.
   • Use the .row class to create a new row within a container.

3. Columns:

   • Columns are the vertical containers within a row. They occupy the horizontal space within a row and are defined by the number of columns they span.
   • Bootstrap uses classes like .col-, where the size is specified based on the number of columns the element should span. For example, .col-md-6 would create a column that spans 6 out of the 12 columns on medium-sized screens.

Example:

In this example, we have a container with a row containing two columns, each spanning 6 columns on medium-sized screens.

Responsiveness:

Bootstrap Grid is designed to be responsive, meaning it adjusts the layout based on the screen size. The grid system uses media queries to apply different styles for various screen sizes, such as extra-small (xs), small (sm), medium (md), and large (lg).