What does sm mean in bootstrap?

In bootstrap, sm means "small" and is the abbreviation of small; sm is often used to represent the grid class ".col-sm-*", which means small screen device class and represents the display size. A screen device that is greater than or equal to 768px and less than 992px, similar to a tablet device.

The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer

What does sm mean in bootstrap

sm means small, that is, small.

What is the grid system

The grid system refers to dividing the page layout into equal-width columns, and then defining the number of columns to create modules. Customize the page layout. Bootstrap's grid system uses a 1-12 column pattern and uses proportional calculations to set the column widths you define. For example, if you want to use a two-column layout mode for this row, the width of each column will be 50% of the outer container. No matter what device you use to browse, it will be displayed in this proportion. However, if the device width is smaller than the minimum width you set, the two columns will become one column side by side.

Bootstrap’s grid system

Using the grid system in Bootstrap is very simple and convenient. You only need to introduce their already defined classes into your divs. .

Let’s first take a look at several grid classes that can be used in Bootstrap:

1. .col-xs-* This is an ultra-small screen class (<768px ), similar to mobile phones and other devices.

2. .col-sm-* This is a small screen device class (≥768px and

3. .col-md-* This is a medium device class (≥992px and

4. .col-lg-* This is a large device class (≥1200px).

col- For all devices

col-sm- Tablet- Screen width equal to or greater than 576px

col-md- Desktop monitor- Screen width equal to or greater than 768px)

col-lg- Large desktop monitor - screen width equal to or greater than 992px)

col-xl- Extra large desktop monitor - screen width equal to or greater than 1200px)

Related recommendations: bootstrap tutorial

The above is the detailed content of What does sm mean in bootstrap?. For more information, please follow other related articles on the PHP Chinese website!