bootstrap col-sm col-md difference

The meaning of col-xs-*, col-sm-*, col-md-* in the bootstrap fence system CSS is to automatically select the corresponding class style according to the width of the display screen:

.col-xs- Ultra-small screen mobile phone (<768px) (recommended learning: Bootstrap video tutorial)

.col-sm- Small screen tablet (≥768px)

.col-md- Medium screen desktop monitor (≥992px)

.col-lg- Large screen large desktop monitor (≥1200px)

First of all, explain:

1, col-column;

2. xs-maxsmall, extra small; sm-small, small; md-medium, medium; lg-large, large;

3. -* means occupying columns, that is, automatically occupying each row 12-column grid system ratio;

4, col-xs-*ultra small screen mobile phone (<768px),

.col-sm-*small screen tablet ( ≥768px),

.col-md-*Medium screen desktop monitor (≥992px) (grid parameter).

5. No matter where On this screen, the grid system will automatically divide each row into 12 columns. The parameters followed by col-xs-* and col-sm-* and col-md-* represent the number of columns occupied by each div in the current screen. .

For example

The position of this div on the screen is: .col-xs-6 occupies 6 columns on an ultra-small screen That is half of the screen (12/6 columns = 2 divs). .col-md-3 occupies 3 columns or 1/4 (12/3 columns = 4 divs) in the mid lane screen.

6. Inversely, if we want to display 3 divs side by side on the small screen (12/3 = each occupies 4 columns), then col-xs-4; display 6 on the large screen div (12/6 = each occupies 2 columns), then col-md-2; in this way we can control the layout we want.

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of bootstrap col-sm col-md difference. For more information, please follow other related articles on the PHP Chinese website!

css bootstrap class

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn