Shulou(Shulou.com)06/02 Report--

This article mainly introduces "which types of bootstrap4 grids are divided into". In daily operation, I believe that many people have doubts about which types of bootstrap4 grids are divided into. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the questions of "which types of bootstrap4 grids are divided into?" Next, please follow the editor to study!

The bootstrap4 grid is divided into five categories: 1, ".col", for all devices; 2, ".col-sm" for flat panel devices; 3, ".col-md" for desktop displays; 4, ".col-lg" for large desktop displays; and 5, ".col-xl" for super-large desktop displays.

Operating environment of this tutorial: Windows7 system, bootsrap4 version, DELL G3 computer

Bootstrap provides a responsive, mobile device-first streaming grid (grid) system that automatically divides into up to 12 columns as the screen or viewport (viewport) size increases.

We can also define the number of columns according to our own needs:

The grid system of Bootstrap 4 is responsive, and the columns are automatically rearranged according to the screen size.

Bootstrap 4 grid systems have the following five categories:

.col-for all Devic

Col-sm- flat panel-screen width equal to or greater than 576px

Col-md- desktop monitor-screen width equal to or greater than 768px)

Col-lg- large desktop display-screen width equal to or greater than 992px)

Col-xl- oversized desktop display-screen width equal to or greater than 1200px)

The following table summarizes how Bootstrap grid systems work on different devices:

Ultra-small equipment

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.