Bootstrap 5 Grid System - Examples And Tutorial

Trang chủ » Html Col Sizes » Bootstrap 5 Grid System - Examples And Tutorial

Có thể bạn quan tâm

Basic example

Bootstrap’s grid system uses a series of containers, rows, and columns to arrange and align content. It’s built with flexbox and is fully responsive. Below is an example and detailed explanation of how the grid system works.

One of three columns One of three columns One of three columns Show code Edit in sandbox
  • HTML
<div class="container"> <div class="row"> <div class="col-md"> One of three columns </div> <div class="col-md"> One of three columns </div> <div class="col-md"> One of three columns </div> </div> </div>

The above bootstrap grid example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent .container.

Taking it step by step:

Container

Bootstrap requires a containing element to wrap site contents and house our grid system. Without a container, the grid won't work properly.

Row

Rows create horizontal groups of columns. Therefore, if you want to split your layout horizontally, use .row.

Columns

Bootstrap's grid system allows up to 12 columns across the page.

MDB 5 - Bootstrap 5 & Material Design Radio Component MDB 5 - Bootstrap 5 & Material Design Radio Component

We use .col-md-* to create a column, where * specifies the number of columns between 1 and 12.

md specifies the breakpoint where the columns change its width.

md means "screen ≥768px", so I'm the example below the columns will stretch to 100% of the width on the screens smaller or equal 768px.

Từ khóa » Html Col Sizes