What do 'col-md-4', 'col-xs-1', and 'col-lg-2' Mean in Bootstrap's Grid System?

Understanding the Grid System in Bootstrap: Decoding "col-md-4", "col-xs-1", and "col-lg-2"

Bootstrap's grid system provides a flexible and responsive solution for structuring layouts. Three key class prefixes are used: "col-xs", "col-sm", and "col-lg", followed by a number. These numbers define how the columns align within the grid.

How the Number Aligns Grids

The number following the prefix represents the number of columns a given element will occupy out of 12 available columns. Each row has a total of 12 columns, so "col--6" will occupy half of the available space, while "col--12" will span the entire width.

How to Use the Numbers

When using these classes, you need to specify the prefix based on the intended screen size. "xs" applies to extra small screens (mobile phones), "sm" to small screens (tablets), "md" to medium screens (some desktops), and "lg" to large screens (remaining desktops).

For example, to create two equal columns within a row, you would use:

<div>

What the Numbers Represent

The numbers in the classes represent specific widths within the grid. Each column represents a fraction of the total available space within a row:

• "col-*-1": 1/12 of the width
• "col-*-2": 2/12 of the width
• "col-*-3": 3/12 of the width
• ...
• "col-*-12": 12/12 of the width

By combining these classes, you can create custom layouts that adapt to different screen sizes and resolutions. Remember to use multiple column classes to specify different behaviors at different breakpoints. This is what makes Bootstrap responsive and allows you to create flexible and adaptive layouts.

The above is the detailed content of What do 'col-md-4', 'col-xs-1', and 'col-lg-2' Mean in Bootstrap's Grid System?. For more information, please follow other related articles on the PHP Chinese website!