Skip to content
Home » Grid System Bootstrap 4 | Grid Classes

Grid System Bootstrap 4 | Grid Classes

Bootstrap 4 Tutorial #5 - Grid Basics

Media queries

Media Queries cũng là một chức năng hay mang lại độ tùy biến cao cho giao diện khi làm Responsive nên mình quyết định đưa nào vào bài viết.

Media Queries là giúp bạn tùy biến code CSS ứng với kích thước trình duyệt nhất định. Chẳng hạn như bạn chia một trang web thành cột với 2 div nhưng khi bạn muốn xem trang web trên thiết bị di độngthì 1 cột sẽ ẩn đi chỉ còn 1 cột thì lúc này bạn có thể dùng Media Queries để làm điều đó.

Tuy nhiên, Media Queries chỉ sử dụng được khi bạn dùng LESS để viết CSS. Nếu chưa biết khái niệm này thì bạn có thể không cần xem phần này mà hãy tìm hiểu cách Dùng LESS viết CSS trước.

Cú pháp của Media Queries dạng như sau:


/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

Sử dụng max-width để giới hạn chiều rộng:


@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like

.col-sm-6

.

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from

xs

to

xxl

. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3

Variable width content

Use

col-{breakpoint}-auto

classes to size columns based on the natural width of their content.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3

Bootstrap 4 Tutorial #5 - Grid Basics
Bootstrap 4 Tutorial #5 – Grid Basics

Breakpoint

Breakpoint (điểm ngắt) chính là thứ sẽ giúp bạn tùy chình layout trên mỗi viewport sizes (khung nhìn) khác nhau. Bootstrap bao gồm 6 breakpoint mặc định hay còn gọi là các grid tiers (tầng lưới), với mỗi breakpoint này chúng ta có thể áp dụng các class khác nhau của bootstrap để có thể tùy chỉnh layout theo ý muốn của mình. Chúng ta sẽ hiểu rõ hơn về nó qua những ví dụ sẽ đề cập sau.

Để ý thấy rằng từ màn hình xs trở lên mỗi breakpoint đều sử dụng dấu >= thay vì < điều đó cho thấy rằng những breakpoint này đang sử dụng thuộc tính min-width trong css. Thế nên các thuộc tính của breakpoint này sẽ áp dụng cho tất cả các kích thước màn hình lớn hơn hoặc bằng với width của breakpoint.

Example

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.

Column
Column
Column

The above 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

.

Bootstrap Grid System Tutorial | Bootstrap 5
Bootstrap Grid System Tutorial | Bootstrap 5

Grid system

Hệ thống lưới của bootstrap sử dụng các container (vùng chứa), row (hàng) và col (cột) để xây dựng layout một cách linh hoạt, có thể bố trí và căn chỉnh nội dung theo từng kích thước màn hình khác nhau.

3.Cách nó hoạt động

  • Grid system sử dụng 6 breakpoint để có thể dễ dàng responsive. 6 breakpoint này được dựng trên min-width media queries trong css do vậy mỗi thuộc tính của breakpoint sẽ ảnh hưởng lên chính nó và các breakpoint ở trên.
    ví dụ: col-sm-4, phần tử chứa class này sẽ có độ rộng là 4 cột từ breakpoint sm trở lên.
  • Container sẽ chứa nội dung của bạn và căn chỉnh nó theo chiều rộng của màn hình thiết bị, nó cùng sẽ tự động thêm padding để tránh content bị sát lề khi chiều rộng màn hình quá nhỏ.
  • Row sẽ bao bọc các Column, class row sẽ có thuộc tính display: flex để khiến cho các cột nằm ngang. Mỗi cột sẽ có 1 phần padding ở 2 bên (được gọi là gutter) để điều chỉnh khoảng cách giữa các cột do vậy class row sẽ có thêm margin horizontal âm để xóa bỏ phần padding thừa ở 2 cột ngoài cùng 2 bên.
  • Các Column rất linh hoạt, mỗi hàng sẽ có đến 12 cột cho phép bạn có thể tạo ra các phần tử trên một hàng có số cột khác nhau, chiều rộng khác nhau.
    ví dụ: col-6, phần tử chứa class này sẽ chiếm chiều rộng bằng 1 nửa container chứa nó (50% width).
  • Gutters được sử dụng để điều chỉnh khoảng cách giữa các phần tử trên cùng 1 hàng.
    ví dụ: gx-* điều chỉnh khoảng cách ngang, gy-* điều chỉnh khoảng cách dọc và g-* điều chỉnh khoảng cách cả 2 chiều.
  • Chúng ta có thể sử dụng Bootstrap bằng source Sass để có thể dễ dàng tùy chỉnh grid system.

3.Breakpoint trên Grid system

Với mỗi breakpoint, container sẽ có chiều rộng khác nhau (như hình dưới) và chúng ta cũng có thể điều chỉnh độ rộng của mỗi cột bằng cú cú pháp

col-{breakpoint}-{number}

3.Chiều rộng Column tự động

Các Column có chiều rộng bằng nhau:

Chúng ta có thể sử dụng class

col

để khiến các cột có chiều rộng bằng nhau.

1 of 3
2 of 3
3 of 3

Chỉ định chiều rộng cho 1 Column riêng biệt

Bạn cũng có thể chỉ định chiều rộng cho một cột riêng biệt và các cột còn lại sẽ tự động điều chỉnh chiều rộng để lấp đầy dòng.

1 of 3
2 of 3 (wider)
3 of 3

Chiều rộng của Column theo content

Sử dụng cú pháp

col-{breakpoint}-auto

để có được một cột có chiều dài dựa trên nội dung bên trong của nó.

1 of 3
Variable width content
3 of 3

3.Responsive với Grid system

Áp dụng breakpoint

Chúng ta có thể sử dụng breakpoint để chỉ định độ rộng của cột cho từng màn hình cụ thể.

col-sm-8
col-sm-4

Đoạn code bên trên sẽ hiển thị 1 dòng với 2 cột từ màn hình sm trở lên, cột một có độ rộng là 8 ô còn cột 2 có độ rộng là 4 ô.

Kết hợp nhiều breakpoint

Nếu bạn muốn bố cục hiển thị khác trên một breakpoint nào đó thì hãy kết hợp chúng lại. Ví dụ nếu bạn muốn 1 bố cục hiển thị như sau:

Hiển thị trên màn hình md trở xuống:

Hiển thị trên màn hình md trở lên:

Thì hãy sử dụng đoạn dưới đây. Mỗi cột trong dòng sẽ chiếm 6 ô nhưng từ màn hình md trở lên mỗi cột sẽ chiếm 4 ô.

.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4

Tùy chỉnh số cột ở mỗi dòng

Chúng ta có thể sử dụng class

.row-cols-{number}

cho mỗi dòng để đặt nhanh độ rộng của các cột trong hàng thay vì phải set riêng cho từng cột riêng biệt (Lưu ý number chỉ nhận giá trị là ‘auto’ hoặc từ 1 đến 6 thôi nhé).

Column
Column
Column
Column
Column
Column
Column
Column

Ví dụ bên trên sẽ hiển thị 5 cột trên 1 dòng.

Lồng nhau

Trong mỗi cột có thể lồng thêm các dòng nữa nhé, như ví dụ bên dưới:

Level 1: .col-sm-3
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6

Responsive classes

Bootstrap’s grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the

.col

and

.col-*

classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to

.col

.

col
col
col
col
col-8
col-4

Stacked to horizontal

Using a single set of

.col-sm-*

classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (

sm

).

col-sm-8
col-sm-4
col-sm
col-sm
col-sm

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

.col-md-8
.col-6 .col-md-4

.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4

.col-6
.col-6

Row columns

Use the responsive

.row-cols-*

classes to quickly set the number of columns that best render your content and layout. Whereas normal

.col-*

classes apply to the individual columns (e.g.,

.col-md-4

), the row columns classes are set on the parent

.row

as a default for contained columns. With

.row-cols-auto

you can give the columns their natural width.

Use these row columns classes to quickly create basic grid layouts or to control your card layouts and override when needed at the column level.

Column
Column
Column
Column

Column
Column
Column
Column

Column
Column
Column
Column

Column
Column
Column
Column

Column
Column
Column
Column

Column
Column
Column
Column

Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

You can also use the accompanying Sass mixin,

row-cols()

:


.element { // Three columns to start @include row-cols(3); // Five columns from medium breakpoint up @include media-breakpoint-up(md) { @include row-cols(5); } }

Bootstrap For Beginners | Grid system - 2024
Bootstrap For Beginners | Grid system – 2024

Grid options

While Bootstrap uses

em

s or

rem

s for defining most sizes,

px

s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small

<576px

Small

≥576px

Medium

≥768px

Large

≥992px

Extra large

≥1200px

Max container width None (auto) 540px 720px 960px 1140px
Class prefix
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

Grid System Rules

Some Bootstrap 4 grid system rules:

  • Rows must be placed within a

    .container

    (fixed-width) or

    .container-fluid

    (full-width) for proper alignment and padding
  • Use rows to create horizontal groups of columns
  • Content should be placed within columns, and only columns may be immediate children of rows
  • Predefined classes like

    .row

    and

    .col-sm-4

    are available for quickly making grid layouts
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on

    .rows
  • Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three

    .col-sm-4
  • Column widths are in percentage, so they are always fluid and sized relative to their parent element
  • The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as “equal width columns” (and equal height). Example: Three elements with

    .col-sm

    will each automatically be 33.33% wide from the small breakpoint and up. Tip: If you want to learn more about Flexbox, you can read our CSS Flexbox Tutorial.

Note that Flexbox is not supported in IE9 and earlier versions.

If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it.

Bootstrap Grid System The Complete Guide - In Action
Bootstrap Grid System The Complete Guide – In Action

Responsive Columns

The following example shows how to create four equal-width columns starting at tablets and scaling to extra large desktops. On mobile phones or screens that are less than 576px wide, the columns will automatically stack on top of each other:

Example

.col-sm-3

.col-sm-3

.col-sm-3

.col-sm-3

Bootstrap 4 Grid System

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

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

Bootstrap’s grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Using the Bootstrap 4 Grid  | BOOTSTRAP 4 TUTORIAL
Using the Bootstrap 4 Grid | BOOTSTRAP 4 TUTORIAL

Basic Structure of a Bootstrap 4 Grid

The following is a basic structure of a Bootstrap 4 grid:

First example: create a row (). Then, add the desired number of columns (tags with appropriate

.col-*-*

classes). The first star (*)
represents the responsiveness: sm, md, lg or xl, while the second star
represents a number, which should always add up to 12 for each row.

Second example: instead of adding a number to each

col

, let bootstrap handle
the layout, to create equal width columns: two

"col"

elements = 50% width to
each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You
can also use

.col-sm|md|lg|xl

to make the columns responsive.

Phần kết

Như vậy trong bài viết nay chúng ta đã cùng tìm hiểu về Grid System trong Bootstrap, đây là một tính năng vô cùng mạnh mẽ của Bootstrap nên nếu làm chủ được nó thì công việc xây dựng bố cục cũng như phát triển web Front-end sẽ trở nên dễ dàng hơn rất nhiều. Rất mong rằng bài viết này sẽ giúp ích cho các bạn

Tài liệu tham khảo:
https://getbootstrap.com/

All rights reserved

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

In these examples the

.themed-grid-col

class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

Get two columns starting at desktops and scaling to large desktops.

No grid classes are necessary for full-width elements.

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.

Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.

Nội dung

Responsive website với Bootstrap cực chi tiết - Cách sử dụng Grid system của bootstrap
Responsive website với Bootstrap cực chi tiết – Cách sử dụng Grid system của bootstrap

Basic Structure of a Bootstrap 4 Grid

The following is a basic structure of a Bootstrap 4 grid:

First example: create a row (). Then, add the desired number of columns (tags with appropriate

.col-*-*

classes). The first star (*)
represents the responsiveness: sm, md, lg or xl, while the second star
represents a number, which should always add up to 12 for each row.

Second example: instead of adding a number to each

col

, let bootstrap handle
the layout, to create equal width columns: two

"col"

elements = 50% width to
each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You
can also use

.col-sm|md|lg|xl

to make the columns responsive.

Reordering

Order classes

Use

.order-

classes for controlling the visual order of your content. These classes are responsive, so you can set the

order

by breakpoint (e.g.,

.order-1.order-md-2

). Includes support for through

12

across all five grid tiers.

First, but unordered
Second, but last
Third, but first

There are also responsive

.order-first

and

.order-last

classes that change the

order

of an element by applying

order: -1

and

order: 13

(

order: $columns + 1

), respectively. These classes can also be intermixed with the numbered

.order-*

classes as needed.

First, but last
Second, but unordered
Third, but first

Offsetting columns

You can offset grid columns in two ways: our responsive

.offset-

grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using

.offset-md-*

classes. These classes increase the left margin of a column by columns. For example,

.offset-md-4

moves

.col-md-4

over four columns.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

Margin utilities

With the move to flexbox in v4, you can use margin utilities like

.mr-auto

to force sibling columns away from one another.

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto

Bootstrap 5 Grid System Tutorial
Bootstrap 5 Grid System Tutorial

Các thành phần chính của Grid System trong Bootstrap

  • Cột (Columns): Cột là thành phần cơ bản của hệ thống lưới Bootstrap. Trang web của bạn được chia thành 12 cột ảo và bạn có thể xác định số lượng cột mà một phần tử sẽ chiếm trên các kích thước màn hình khác nhau.
  • Hàng (Rows): Hàng là một tập hợp các cột. Mỗi hàng bao gồm một hoặc nhiều cột. Hàng giúp bạn xác định cách các cột sẽ xếp chồng lên nhau hoặc xếp theo hàng ngang.
  • Container: Container là một thành phần chứa các hàng. Bootstrap cung cấp hai loại container chính: container và container-fluid. Container thường được sử dụng cho bố cục cố định, trong khi container-fluid sử dụng cho bố cục co dãn trên toàn bộ chiều rộng của màn hình.

>>> Xem thêm bài viết: Tất tần tật về Container trong Bootstrap 5

Basic Structure of a Bootstrap 4 Grid

The following is a basic structure of a Bootstrap 4 grid:

First example: create a row (). Then, add the desired number of columns (tags with appropriate

.col-*-*

classes). The first star (*)
represents the responsiveness: sm, md, lg or xl, while the second star
represents a number, which should add up to 12 for each row.

Second example: instead of adding a number to each

col

, let bootstrap handle
the layout, to create equal width columns: two

"col"

elements = 50% width to
each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You
can also use

.col-sm|md|lg|xl

to make the columns responsive.

Below we have collected some examples of basic Bootstrap 4 grid layouts.

Bootstrap 4 Grid System Explained!
Bootstrap 4 Grid System Explained!

Cách sử dụng Grid System trong Bootstrap

Grid system (hệ thống lưới) Bootstrap cho phép tối đa 12 cột trên trang. Bạn có thể sử dụng từng mục riêng lẻ hoặc hợp nhất chúng lại với nhau để có các cột rộng hơn. Bạn có thể sử dụng tất cả các kết hợp giá trị có tổng bằng 12. Bạn có thể sử dụng 12 cột, mỗi cột có chiều rộng 1 hoặc sử dụng 4 cột, mỗi cột có chiều rộng 3 hoặc bất kỳ kết hợp nào khác. Để sử dụng hệ thống lưới trong Bootstrap, bạn sử dụng các lớp CSS được định nghĩa sẵn như col-md-, col-sm-, col-lg-, vv., để xác định kích thước của cột trên các kích thước màn hình khác nhau. Dưới đây là một ví dụ:

Trong ví dụ này, có ba cột, mỗi cột sẽ hiển thị khác nhau trên các kích thước màn hình khác nhau. Cột 1 và cột 2 sẽ chiếm 4/12 cột trên màn hình lớn (lg), 6/12 cột trên màn hình trung bình (md), và toàn bộ chiều rộng trên màn hình nhỏ (sm). Cột 3 sẽ chiếm toàn bộ chiều rộng trên tất cả các kích thước màn hình.

Sử dụng Offset

Một câu hỏi tiếp tục được đặt ra khi làm giao diện là bạn muốn một thành phần nào đó hiển thị cách ra 1 khoảng so với thành phần kia thì sao ?

Nếu xử lý bằng cách khai báo lại giá trị margin cho các col thì sẽ dẫn đến giao diện sẽ không còn đúng chuẩn nữa. Trong trường hợp này các bạn nên khai báo thêm class: col-@@-offset-@ trong đó.

  • @@: là 4 giá trị xs, sm, md và lag
  • @: là giá trị từ 1 đến 12.

Ví dụ: col-md-offset-4 tức là cột này sẽ thụt vào trong 1 khoảng bằng 4 col md.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

Kết quả hiển thị sẽ được như sau:

Responsive layout với CSS Grid
Responsive layout với CSS Grid

How it works

Breaking it down, here’s how the grid system comes together:

  • Our grid supports six responsive breakpoints. Breakpoints are based on


    min-width

    media queries, meaning they affect that breakpoint and all those above it (e.g.,

    .col-sm-4

    applies to

    sm

    ,

    md

    ,

    lg

    ,

    xl

    , and

    xxl

    ). This means you can control container and column sizing and behavior by each breakpoint.

  • Containers center and horizontally pad your content. Use


    .container

    for a responsive pixel width,

    .container-fluid

    for

    width: 100%

    across all viewports and devices, or a responsive container (e.g.,

    .container-md

    ) for a combination of fluid and pixel widths.

  • Rows are wrappers for columns. Each column has horizontal


    padding

    (called a gutter) for controlling the space between them. This

    padding

    is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.

  • Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g.,


    col-4

    spans four).

    width

    s are set in percentages so you always have the same relative sizing.

  • Gutters are also responsive and customizable. Gutter classes are available across all breakpoints, with all the same sizes as our margin and padding spacing. Change horizontal gutters with


    .gx-*

    classes, vertical gutters with

    .gy-*

    , or all gutters with

    .g-*

    classes.

    .g-0

    is also available to remove gutters.

  • Sass variables, maps, and mixins power the grid. If you don’t want to use the predefined grid classes in Bootstrap, you can use our grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.

Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.

Cấu trúc cơ bản của Bootstrap 4 Grid

Dưới đây là cấu trúc của Bootstrap 4 Grid:

Ví dụ 1: tạo 1 hàng (

). Sau đó, thêm số lượng cột mong muốn (gắn .col-*-* class thích hợp). Sao đầu tiên (*) diễn tả tính responsive: sm, md, lg hoặc xl, trong khi đó sao thứ hai diễn tả số cột cho mỗi dòng.

Ví dụ 2: thay vì thêm số vào mỗi col, hãy để bootstrap xử lý layout, tạo các cột có kích thước bằng nhau: 2 “col” = 50% chiều rộng cho mỗi cột, 3 “col” = 33.33% chiều rộng cho mỗi cột, 4 “col” = 25% chiều rộng cho mỗi cột,…. Bạn cũng có thể sử dụng .col-sm|md|lg|xl để tạo tính responsive cho cột.

Phía dưới là các ví dụ mà mình đã sưu tầm được về Bootstrap 4 Grid layout cơ bản.

Bootstrap 5 - Responsive Blog Posts Grid Layout
Bootstrap 5 – Responsive Blog Posts Grid Layout

Grid Classes

The Bootstrap 4 grid system has five classes:


  • .col-

    (extra small devices – screen width less than 576px)

  • .col-sm-

    (small devices – screen width equal to or greater than 576px)

  • .col-md-

    (medium devices – screen width equal to or greater than 768px)

  • .col-lg-

    (large devices – screen width equal to or greater than 992px)

  • .col-xl-

    (xlarge devices – screen width equal to or greater than 1200px)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for

sm

and

md

, you only need to specify

sm

.

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns

One of three columns
One of three columns
One of three columns

Horizontal alignment

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns

No gutters

The gutters between columns in our predefined grid classes can be removed with

.no-gutters

. This removes the negative

margin

s from

.row

and the horizontal

padding

from all immediate children columns.

Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via attribute selector. While this generates a more specific selector, column padding can still be further customized with spacing utilities.

Need an edge-to-edge design? Drop the parent

.container

or

.container-fluid

.


.no-gutters { margin-right: 0; margin-left: 0; > .col, > [class*="col-"] { padding-right: 0; padding-left: 0; } }

In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

Subsequent columns continue along the new line.

.col-9
.col-4Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6Subsequent columns continue along the new line.

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with

width: 100%

wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple

.row

s, but not every implementation method can account for this.

.col-6 .col-sm-3
.col-6 .col-sm-3

.col-6 .col-sm-3
.col-6 .col-sm-3

You may also apply this break at specific breakpoints with our responsive display utilities.

.col-6 .col-sm-4
.col-6 .col-sm-4

.col-6 .col-sm-4
.col-6 .col-sm-4

Create a Data Table in Bootstrap 5 (2023)
Create a Data Table in Bootstrap 5 (2023)

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables.

$grid-columns

is used to generate the widths (in percent) of each individual column while

$grid-gutter-width

allows breakpoint-specific widths that are divided evenly across

padding-left

and

padding-right

for the column gutters.


$grid-columns: 12 !default; $grid-gutter-width: 30px !default;

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the

$grid-breakpoints

and

$container-max-widths

to something like this:


$grid-breakpoints: ( xs: 0, sm: 480px, md: 768px, lg: 1024px ); $container-max-widths: ( sm: 420px, md: 720px, lg: 960px );

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in

px

(not

rem

,

em

, or ).

Bootstrap 4 Grid System

Nesting

To nest your content with the default grid, add a new

.row

and set of

.col-sm-*

columns within an existing

.col-sm-*

column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6

bootstrap admin dashboard tutorial
bootstrap admin dashboard tutorial

Examples

The next chapters shows examples of grid systems for different devices and screen widths:

  • Stacked-to-horizontal
  • Extra Small Layout
  • Small devices
  • Medium devices
  • Large devices
  • Extra large devices
  • More grid examples

Bootstrap 4 Grids

How it works

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

One of three columns
One of three columns
One of three columns

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent

.container

.

Breaking it down, here’s how it works:

  • Containers provide a means to center and horizontally pad your site’s contents. Use

    .container

    for a responsive pixel width or

    .container-fluid

    for

    width: 100%

    across all viewport and device sizes.
  • Rows are wrappers for columns. Each column has horizontal

    padding

    (called a gutter) for controlling the space between them. This

    padding

    is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
  • In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
  • Thanks to flexbox, grid columns without a specified

    width

    will automatically layout as equal width columns. For example, four instances of

    .col-sm

    will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples.
  • Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use

    .col-4

    .
  • Column

    width

    s are set in percentages, so they’re always fluid and sized relative to their parent element.
  • Columns have horizontal

    padding

    to create the gutters between individual columns, however, you can remove the

    margin

    from rows and

    padding

    from columns with

    .no-gutters

    on the

    .row

    .
  • To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
  • Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g.,

    .col-sm-4

    applies to small, medium, large, and extra large devices, but not the first

    xs

    breakpoint).
  • You can use predefined grid classes (like

    .col-4

    ) or Sass mixins for more semantic markup.

Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.

#06 - Bootstrap Grids - (தமிழில்) (Tamil) | Bootstrap Course  | Web Design
#06 – Bootstrap Grids – (தமிழில்) (Tamil) | Bootstrap Course | Web Design

Nesting

To nest your content with the default grid, add a new

.row

and set of

.col-sm-*

columns within an existing

.col-sm-*

column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-3
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6

Grid System Rules

Some Bootstrap 4 grid system rules:

  • Rows must be placed within a

    .container

    (fixed-width) or

    .container-fluid

    (full-width) for proper alignment and padding
  • Use rows to create horizontal groups of columns
  • Content should be placed within columns, and only columns may be immediate children of rows
  • Predefined classes like

    .row

    and

    .col-sm-4

    are available for quickly making grid layouts
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on

    .rows
  • Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three

    .col-sm-4
  • Column widths are in percentage, so they are always fluid and sized relative to their parent element
  • The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as “equal width columns” (and equal height). Example: Three elements with

    .col-sm

    will each automatically be 33.33% wide from the small breakpoint and up. Tip: If you want to learn more about Flexbox, you can read our CSS Flexbox Tutorial.

Note that Flexbox is not supported in IE9 and earlier versions.

If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it.

HTML CSS Responsive Grid System with SASS, No Bootstrap, Like Bootstrap
HTML CSS Responsive Grid System with SASS, No Bootstrap, Like Bootstrap

Grid Classes

The Bootstrap 4 grid system has five classes:


  • .col-

    (extra small devices – screen width less than 576px)

  • .col-sm-

    (small devices – screen width equal to or greater than 576px)

  • .col-md-

    (medium devices – screen width equal to or greater than 768px)

  • .col-lg-

    (large devices – screen width equal to or greater than 992px)

  • .col-xl-

    (xlarge devices – screen width equal to or greater than 1200px)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for

sm

and

md

, you only need to specify

sm

.

Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like

.col-sm-6

.

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from

xs

to

xl

. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3

Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit

flex-basis

or

border

. There are workarounds for older browser versions, but they shouldn’t be necessary if you’re up-to-date.

Column
Column
Column
Column

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3

Variable width content

Use

col-{breakpoint}-auto

classes to size columns based on the natural width of their content.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3

Equal-width multi-row

Create equal-width columns that span multiple rows by inserting a

.w-100

where you want the columns to break to a new line. Make the breaks responsive by mixing the

.w-100

with some responsive display utilities.

col
col
col
col

CSS Grid trong 30 phút (2022)
CSS Grid trong 30 phút (2022)

Lợi ích của Grid System trong Bootstrap

  • (Responsive): Hệ thống lưới Bootstrap cho phép bạn xây dựng trang web đáp ứng, tự động thích nghi với các kích thước màn hình khác nhau.
  • Bạn có thể tạo ra các bố cục phức tạp bằng cách kết hợp các cột và hàng một cách dễ dàng.
  • Sử dụng Grid System giúp bạn tiết kiệm thời gian thiết kế và phát triển, vì bạn không cần viết CSS tùy chỉnh cho mọi bố cục.
  • Bootstrap đảm bảo rằng bố cục trang web của bạn sẽ có kiểu dáng đồng nhất trên nhiều trình duyệt khác nhau.

Grid Options

The following table summarizes how the Bootstrap 4 grid system works across different screen sizes:

Extra small (<576px) Small (>=576px) Medium (>=768px) Large (>=992px) Extra Large (>=1200px)
Class prefix
Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width None (auto) 540px 720px 960px 1140px
Suitable for Portrait phones Landscape phones Tablets Laptops Laptops and Desktops
# of columns 12 12 12 12 12
Gutter width 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column)
Nestable Yes Yes Yes Yes Yes
Offsets Yes Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes Yes
Bootstrap 5 Crash Course
Bootstrap 5 Crash Course

Bootstrap 4 Grid System

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

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

Bootstrap’s grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Two Unequal Responsive Columns

The following example shows how to get two various-width columns starting at tablets and scaling to large extra desktops:

Example

.col-sm-4

.col-sm-8

Tip: You will learn more about Bootstrap 4 grids later in this tutorial.

Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Responsive CSS Grid Tutorial
Responsive CSS Grid Tutorial

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables.

$grid-columns

is used to generate the widths (in percent) of each individual column while

$grid-gutter-width

sets the width for the column gutters.


$grid-columns: 12 !default; $grid-gutter-width: 1.5rem !default;

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the

$grid-breakpoints

and

$container-max-widths

to something like this:


$grid-breakpoints: ( xs: 0, sm: 480px, md: 768px, lg: 1024px ); $container-max-widths: ( sm: 420px, md: 720px, lg: 960px );

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in

px

(not

rem

,

em

, or ).

Bootstrap 4 Grid System

Bootstrap 4 Grid System

Bootstrap’s grid system is built with flexbox and allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).

Bạn đã biết khi nào dùng CSS Flexbox hay Grid chưa ?
Bạn đã biết khi nào dùng CSS Flexbox hay Grid chưa ?

Các ví dụ về cách sử dụng Grid System trong Bootstrap

Ví dụ 1: Ví dụ về container trong Grid System



Stringee


A computer Science portal for Stringee



Đầu ra:

Ví dụ 2: Ví dụ về hàng trong Grid System


<br /> Bootstrap Example<br />

Stringee.com


A computer Science portal for Stringee

First row
Second row
Third row
Fourth row
Fifth row



Đầu ra:

Ví dụ 3: Ví dụ về cột trong Grid System


<br /> Bootstrap Example<br />

Stringee


A computer Science portal for Stringee

First row
Second row
1st Column
2nd Column
3rd Column



đầu ra:

Container

Container (vùng chứa) dùng để bao quanh nội dung, nội dung bên trong container sẽ có kích thước tùy thuộc vào màn hình hoặc mỗi điểm ngắt. Container có 3 loại class chính gồm:


container-fluid

Chiều rộng luôn là 100% kích thước thước màn hình.


container

Chiều rộng sẽ thay đổi tùy theo kích thước màn hình (theo bảng bên dưới).


container-{breakpoint}

Chiều rộng luôn là 100% đến khi nào đạt tới điểm ngắt của breakpoint.

Bootstrap - Grid Layout | Web Development Course | Lecture 16
Bootstrap – Grid Layout | Web Development Course | Lecture 16

Grid system hoạt động như thế nào?

  • Mỗi một hàng, phải được bao bọc bởi class .container hoặc .container-fluid để canh giữa và cách khoảng cách lề.
  • Mỗi một hàng gồm các nhóm cột.
  • Nội dung nằm trong cột, mỗi cột có thể chứa 12 cột con khác.
  • Giữa các cột sẽ có khoảng padding. Khoảng padding của cột đầu và cuối sẽ được quy định bởi .rows.
  • Nếu có nhiều hơn 12 cột trên một hàng thì mỗi nhóm 12 cột sẽ cố định và phần dư sẽ được chuyển sang hàng mới.
  • Grid system được đinh nghĩa với các kích thước màn hình khác nhau mà hiển thi khác nhau. Ví dụ ta có lớp .col-md- sẽ không hiển thị đúng cột nếu màn hình cỡ lớn và .col-lg- sẽ không áp dụng nếu bạn đang xem bằng màn hình cỡ vừa.

Vậy cách chia grid system theo các thiết bị được chia như thế nào? Hãy nhìn vào bảng dưới đây để hiểu rõ hơn

Các sử dụng trong 1 file HTML như sau:



<br /> LvDuit Developer<br />



.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4





Grid options

Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:

  • Extra small (xs)
  • Small (sm)
  • Medium (md)
  • Large (lg)
  • Extra large (xl)
  • Extra extra large (xxl)

As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:

xs

<576px

sm

≥576px

md

≥768px

lg

≥992px

xl

≥1200px

xxl

≥1400px

Container None (auto) 540px 720px 960px 1140px 1320px
Class prefix
# of columns 12
Gutter width 1.5rem (.75rem on left and right)
Custom gutters Yes
Nestable Yes
Column ordering Yes
Bootstrap 4 Grid System
Bootstrap 4 Grid System

Two Unequal Responsive Columns

Cách tạo 2 cột có chiều rộng khác nhau từ điện thoại đến máy tính lớn.

.col-sm-4
.col-sm-8

Dịch từ: https://www.w3schools.com/bootstrap4/bootstrap_typography.asp

Xem thêm các tài liệu, hướng dẫn lập trình khác TẠI ĐÂY.

Bài 2 – Tìm hiểu về Grid System trong Bootstrap

Bài đăng này đã không được cập nhật trong 2 năm

Bài trước, mình đã giới thiệu cho các bạn về Bootstrap. Nếu đã quên, bạn có thể đọc lại tại đây.

Bài 1: Bootstrap là gì? Giới thiệu về Bootstrap

Hôm nay, để đi sâu hơn, chúng ta sẽ tìm hiểu về Grid System trong Bootstrap.

Kết

Như vậy, về cơ bản chúng ta đã hiểu được cách sử dụng và làm thế nào để áp dụng Grid System khi thiết kế giao diện cho một website. Bài sau, tôi sẽ tiếp tục giới thiệu cho các bạn về phần Typography trong bootstrap. Hẹn gặp lại các bạn ở bài sau!

All rights reserved

Đã từ lâu, Bootstrap là một công cụ quan trọng trong việc phát triển web front-end, giúp giảm thời gian và công sức cần thiết để xây dựng giao diện web chất lượng cao và đáp ứng trên nhiều thiết bị khác nhau. Hệ thống lưới (Grid System) trong Bootstrap là một phần quan trọng của framework này. Nó cho phép bạn xây dựng bố cục trang web một cách dễ dàng và đáp ứng trên nhiều thiết bị khác nhau.

Bootstrap 4 Grid System | Bootstrap Grid Basic | Bootstrap Tutorial for Beginners
Bootstrap 4 Grid System | Bootstrap Grid Basic | Bootstrap Tutorial for Beginners

Grid Options

The following table summarizes how the Bootstrap 4 grid system works across different screen sizes:

Extra small (<576px) Small (>=576px) Medium (>=768px) Large (>=992px) Extra Large (>=1200px)
Class prefix
Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width None (auto) 540px 720px 960px 1140px
Suitable for Portrait phones Landscape phones Tablets Laptops Laptops and Desktops
# of columns 12 12 12 12 12
Gutter width 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column)
Nestable Yes Yes Yes Yes Yes
Offsets Yes Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes Yes

Kết luận

Trong bài viết này, chúng ta đã khám phá sâu hơn về Grid System trong Bootstrap và tầm quan trọng của nó trong thiết kế và phát triển các trang web hiện đại. Grid System giúp chúng ta tạo ra các giao diện đáp ứng, thích hợp cho nhiều loại thiết bị và màn hình khác nhau một cách dễ dàng. Với kiến thức về Grid system này, chúng ta sẽ xây dựng các trang web đẹp và mang lại trải nghiệm tốt hơn cho người dùng. Các bạn có thể tìm hiểu thêm ở đây.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 – 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY:

Grid System (hệ thống lưới) trong Bootstrap được xây dựng với flexbox, cho phép tạo tới 12 cột trên một trang. Nếu bạn không muốn sử dụng tất cả 12 cột riêng biệt thì có thể nhóm chúng lại với nhau để tạo ra những cột rộng hơn.

Hệ thống lưới này là thích ứng, và các cột có thể tự động sắp xếp lại để phù hợp với kích thước của màn hình. Hãy chắc chắn rằng, tổng các cột tối đa là 12 hoặc ít hơn (bạn không nhất thiết phải sử dụng hết tất cả 12 cột).

Hệ thống grid của Bootstrap 4 có 5 class:

Các class trên có thể kết hợp với nhau để tạo ra bố cục động và linh hoạt hơn.

Mẹo: Vì class sẽ tăng/giảm theo tỷ lệ, vì vậy nếu muốn đặt cùng độ rộng cho sm và md thì chỉ cần chỉ định sm thôi.

Grid System trong Bootstrap 4 có vài quy tắc sau:

Đây là cấu trúc cơ bản của grid trong Bootstrap 4:

Ở ví dụ 1, sau khi tạo 1 hàng, bạn thêm số cột mình cần tương ứng với các class .col-*-*.* đầu tiên là loại class sm, md, lg hoặc xl. * thứ 2 đại diện cho 1 số, tối đa là 12.

Ở ví dụ 2, thay vì thêm một số vào mỗi col, bạn có thể để Bootstrap xử lý bố cục, tạo các cột có chiều rộng bằng nhau: 2 phần tử “col” thì mỗi col là 50%, 3 phần tử col thì mỗi cái có độ rộng là 33.33%, 4 col thì mỗi col là 25%… Bạn có thể sử dụng .col-sm|md|lg|xl để làm cho các cột có tính thích ứng (responsive).

Dưới đây là vài ví dụ cơ bản về bố cục lưới trong Bootstrap 4.

Ví dụ bên dưới sẽ chỉ cho bạn cách tạo 3 cột có chiều rộng bằng nhau, trên tất cả các thiết bị và độ rộng màn hình.

Bạn cần thêm vào các thẻ div sau:

Dưới đây là file html đầy đủ:

Khi chạy file trên bạn sẽ nhận được 2 bố cục khi màn hình rộng hơn 576px, và khi màn hình nhỏ hơn 576px như dưới đây:

Tiếp theo là ví dụ về cách tạo 2 cột có độ rộng khác nhau, bắt đầu từ màn hình máy tính bảng và mở rộng đến những màn hình lớn hơn. Giả sử ta tạo 1 cột sm-4 và 1 sm-8, khi đó bạn sẽ dùng các thẻ div sau:

Và file html đầy đủ sẽ là:

Khi chạy file trên bạn sẽ nhận được 2 bố cục khi màn hình rộng hơn 576px, và khi màn hình nhỏ hơn 576px như dưới đây:

Tiếp theo là ví dụ về cách tạo 2 cột có độ rộng khác nhau, bắt đầu từ màn hình máy tính bảng và mở rộng đến những màn hình lớn hơn. Giả sử ta tạo 1 cột sm-4 và 1 sm-8, khi đó bạn sẽ dùng các thẻ div sau:

File html đầy đủ lúc này sẽ như sau:

Sau khi chạy file trên, bạn sẽ nhận được 2 bố cục tương ứng với độ rộng màn hình lớn hơn 576px hay nhỏ hơn mức này.

Devmaster Academy via quantrimang

Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp – FullStack
Lập trình ứng dụng trên nền tảng android
Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS – FullStack
Lập trình ứng dụng với WINDOWS FORM
Lập trình ứng dụng với JAVA (FORM)
Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,…) – FullStack
Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery
Lập trình frontend với reacjs (Full)
Bootstrap 4 Tutorial: Create Responsive Web Design With Bootstrap Grid System
Bootstrap 4 Tutorial: Create Responsive Web Design With Bootstrap Grid System

Responsive classes

Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the

.col

and

.col-*

classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to

.col

.

col
col
col
col
col-8
col-4

Stacked to horizontal

Using a single set of

.col-sm-*

classes, you can create a basic grid system that starts out stacked before becoming horizontal with at the small breakpoint (

sm

).

col-sm-8
col-sm-4
col-sm
col-sm
col-sm

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.


.col-12 .col-md-8
.col-6 .col-md-4

.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4

.col-6
.col-6

Sass

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.


$grid-columns: 12; $grid-gutter-width: 1.5rem;


$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px );


$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px );

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.


// Creates a wrapper for a series of columns @include make-row(); // Make the element grid-ready (applying everything but the width) @include make-col-ready(); // Without optional size values, the mixin will create equal columns (similar to using .col) @include make-col(); @include make-col($size, $columns: $grid-columns); // Get fancy by offsetting, or changing the sort order @include make-col-offset($size, $columns: $grid-columns);

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.


.example-container { @include make-container(); // Make sure to define this width after the mixin to override // `width: 100%` generated by `make-container()` width: 800px; } .example-row { @include make-row(); } .example-content-main { @include make-col-ready(); @include media-breakpoint-up(sm) { @include make-col(6); } @include media-breakpoint-up(lg) { @include make-col(8); } } .example-content-secondary { @include make-col-ready(); @include media-breakpoint-up(sm) { @include make-col(6); } @include media-breakpoint-up(lg) { @include make-col(4); } }

Main content
Secondary content

Bootstrap 4 Grid System Explained in Great Detail with Examples
Bootstrap 4 Grid System Explained in Great Detail with Examples

Sass mixins

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.


$grid-columns: 12; $grid-gutter-width: 30px; $grid-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone sm: 576px, // Medium screen / tablet md: 768px, // Large screen / desktop lg: 992px, // Extra large screen / wide desktop xl: 1200px ); $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px );

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.


// Creates a wrapper for a series of columns @include make-row(); // Make the element grid-ready (applying everything but the width) @include make-col-ready(); @include make-col($size, $columns: $grid-columns); // Get fancy by offsetting, or changing the sort order @include make-col-offset($size, $columns: $grid-columns);

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.


.example-container { width: 800px; @include make-container(); } .example-row { @include make-row(); } .example-content-main { @include make-col-ready(); @include media-breakpoint-up(sm) { @include make-col(6); } @include media-breakpoint-up(lg) { @include make-col(8); } } .example-content-secondary { @include make-col-ready(); @include media-breakpoint-up(sm) { @include make-col(6); } @include media-breakpoint-up(lg) { @include make-col(4); } }

Main content
Secondary content

Grid Classes

The Bootstrap 4 grid system has five classes:


  • .col-

    (extra small devices – screen width less than 576px)

  • .col-sm-

    (small devices – screen width equal to or greater than 576px)

  • .col-md-

    (medium devices – screen width equal to or greater than 768px)

  • .col-lg-

    (large devices – screen width equal to or greater than 992px)

  • .col-xl-

    (xlarge devices – screen width equal to or greater than 1200px)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for

sm

and

md

, you only need to specify

sm

.

New Grid System in Bootstrap 5 (Practical Examples)
New Grid System in Bootstrap 5 (Practical Examples)

Grid Classes

Hệ thống lưới Bootstrap 4 có 5 class:

  • .col- (thiết bị rất nhỏ – chiều rộng màn hình ít hơn 576px)
  • .col-sm (thiết bị nhỏ – chiều rộng màn hình lớn hơn hoặc bằng 576px)
  • .col-md- (thiết bị trung bình- chiều rộng màn hình lớn hơn hoặc bằng 768px)
  • .col-lg. (thiết bị lớn – chiều rộng màn hình lớn hơn hoặc bằng 992px)
  • .col-x1- (thiết bị rất lớn – chiều rộng màn hình lớn hơn hoặc bằng 1200px)

Mẹo: Mỗi lớp chiều rộng sẽ tăng thêm, vì vậy nếu bạn muốn đặt cùng chiều rộng cho sm và md, bạn chỉ cần xác định sm.

Examples

The next chapters shows examples of grid systems for different devices and screen widths:

  • Stacked-to-horizontal
  • Extra Small Layout
  • Small devices
  • Medium devices
  • Large devices
  • Extra large devices
  • More grid examples

Bootstrap 4 | Grid System

Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or merge them together for wider columns. All combinations of values summing up to 12 can be used.

Grid Classes: Bootstrap grid system contains five classes which are listed below:

  • .col- It is used for extra small screen devices (screen width less than 576px).
  • .col-sm- It is used for small screen devices (screen width greater than or equal to 576px).
  • .col-md- It is used for medium screen size devices (screen width greater than or equal to 768px).
  • .col-lg- It is used for large screen size devices (screen width greater than or equal to 992px).
  • .col-xl- It is used for xlarge screen size devices (screen width equal to or greater than 1200px).

Components of Grid System:

  • Containers: Bootstrap requires a containing element to wrap site contents in a grid system. The word container is used to contain the row elements and row elements containing the column elements.
  • Rows: Rows must be placed within the container or container-fluid for proper alignment and padding. Rows are used to create horizontal groups of columns.
  • Columns: Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three col-lg-4.

Example 1: This example uses bootstrap to create an equal width column grid on all devices and screen widths.

Output:

Example 2: This example uses bootstrap to create equal width responsive column grid. When the screen size is less than 576px the column automatically stack to each other.

Output:

  • Run-on large screen (Desktop, tablets):
  • Run-on small screen (mobile):

Example 3: This example uses bootstrap to create unequal width responsive column grid. When the screen size is less than 576px the column automatically stack to each other.

Output:

  • Run-on large screen (Desktop, tablets):
  • Run-on small screen (mobile):

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

Looking for a place to share your ideas, learn, and connect? Our Community portal is just the spot! Come join us and see what all the buzz is about!

Last Updated :
28 Apr, 2022

Like Article

Save Article

Share your thoughts in the comments

Please Login to comment…

Learn how you can adjust column widths in Bootstrap with col-* and col-lg-* classes and combine them for different widths per device size

how can i make columns narrower in bootstrap?

what is bootstrap

What is bootstrap

what does d-none do?

how to display a card within a card using bootstrap

what is the purpose of bootstrap

what does `md` stand for in `col-md-4` for example

what does img-fluid do?

Does col-6 and col-sm-6 mean the same thing in Bootstrap?

what does “sm” in bootstrap grid mean?

how to make bootstrap navbar always be on top and displayed

In bootstrap, how to show an image only on mobile view?

What is bootstrap for?

I want to make a 1 row table with 6 columns in bootstrap, small size, able to have a small image and the date text above the image and the temperature text below the image

What is the difference between and

what is bootstrap?

Does anyone have a tutorial or explanation of boostratp to complement? It still has me a little confused

how can i align my navbar in bootstrap?

how do I align my navbar to the right in bootstrap?

Navbar with a logo to the far left and the links to the far right.

what is container-fluid

how to make three cards from boostrap to be in columns

how to add bootstrap form component styling

Make my cards in bootstrap horizontal

I want bootstrap cards containing an icon and a text

how can align my texts left in bootstrap divs?

why my row-cols do not work in bootstrap?

why my margins don’t work in bootstrap?

bootstrap form grid with search bar and button example

how to adjust 3 images with different size into the same size using boostrap

how to import bootstrap

How to make a row with 7 equal columns in bootstrap

how to change font in bootstrap styled button

how to do 6 columns with bootstrap in vscode

how do i enable shadows in bootstrap?

what is col-sm-6

how to fix the posision of navbar in bootsdrap

what is class mt-5

Please add the code for 3 columns with 2 rows using boostrap

I do not understand why my code does not divide into columns even though I linked my code to bootstrap.

how do I centre text in a bootstrap column

I need a blog page with 3 cards where the most recent blog posts will go and a sidebar that includes recent posts and categories listed.

How do I turn a list into a layout of four columns with Bootstrap?

how to apply padding with bootstrap

what ist the form-control class doing in bootstrap?

What is the most important thing I need to know about bootstrap?

Can you please explain what is d-block, d-none, d-sm-none and all the combinations.

Use bootstrap to create 3 cards of the same width and height that are lined up in a row

How do I make the cards in my code the same height using bootstrap

how to create responsive link sizes with bootstrap

how do i hide an image only on mobile devices using bootstrap

Learn how to turn a list into a layout of four columns with Bootstrap, using the row and col-* classes to create equal-widths columns.

How do I turn a list into a layout of four columns with Bootstrap?

what is bootstrap

What is bootstrap

what does d-none do?

how to display a card within a card using bootstrap

what is the purpose of bootstrap

what does `md` stand for in `col-md-4` for example

what does img-fluid do?

Does col-6 and col-sm-6 mean the same thing in Bootstrap?

what does “sm” in bootstrap grid mean?

how to make bootstrap navbar always be on top and displayed

In bootstrap, how to show an image only on mobile view?

What is bootstrap for?

I want to make a 1 row table with 6 columns in bootstrap, small size, able to have a small image and the date text above the image and the temperature text below the image

What is the difference between and

what is bootstrap?

Does anyone have a tutorial or explanation of boostratp to complement? It still has me a little confused

how can i align my navbar in bootstrap?

how do I align my navbar to the right in bootstrap?

Navbar with a logo to the far left and the links to the far right.

what is container-fluid

how to make three cards from boostrap to be in columns

how to add bootstrap form component styling

Make my cards in bootstrap horizontal

I want bootstrap cards containing an icon and a text

how can align my texts left in bootstrap divs?

why my row-cols do not work in bootstrap?

why my margins don’t work in bootstrap?

bootstrap form grid with search bar and button example

how to adjust 3 images with different size into the same size using boostrap

how to import bootstrap

How to make a row with 7 equal columns in bootstrap

how to change font in bootstrap styled button

how to do 6 columns with bootstrap in vscode

how do i enable shadows in bootstrap?

what is col-sm-6

how to fix the posision of navbar in bootsdrap

what is class mt-5

Please add the code for 3 columns with 2 rows using boostrap

I do not understand why my code does not divide into columns even though I linked my code to bootstrap.

how do I centre text in a bootstrap column

I need a blog page with 3 cards where the most recent blog posts will go and a sidebar that includes recent posts and categories listed.

how to apply padding with bootstrap

what ist the form-control class doing in bootstrap?

What is the most important thing I need to know about bootstrap?

Can you please explain what is d-block, d-none, d-sm-none and all the combinations.

Use bootstrap to create 3 cards of the same width and height that are lined up in a row

How do I make the cards in my code the same height using bootstrap

how to create responsive link sizes with bootstrap

how do i hide an image only on mobile devices using bootstrap

@media for bootstrap 5

Tất tần tật về Grid System trong Bootstrap

Bài đăng này đã không được cập nhật trong 2 năm

Như các bạn đã biết thì Bootstrap đang là một trong nhưng framework css phổ biến nhất hiện nay và một tính năng vô cùng mạnh mẽ của nó chính là Grid System (Hệ thống lưới) giúp chúng ta xây dựng layout một cách dễ dàng và thuận tiện nhất. Do vậy hôm nay chúng ta cùng tìm hiểu về nó nhé!

Trước khi vào phần chính chúng ta hay cùng tìm hiểu qua một số khái niệm cơ bản của bootstrap sau đây.

Bootstrap Grid System
Bootstrap Grid System

Grid system là gì

Grid System là một hệ thống lưới và bao gồm nhiều dòng và nhiều cột, số lượng dòng bao nhiêu tùy thuộc vào thiết kế của bạn nhưng số lượng cột trên mỗi dòng luôn luôn là 12. Kích thước trong Grid System tính bằng cột, mỗi cột này sẽ chiếm một % nhất định kích thước của layout. Thay vì chỉ định rõ ràng kích thước là 200px, 300px, … thì giờ chúng ta sẽ dùng đơn vị là cột. Số phần % của mỗi cột đã được định nghĩa sẵn trong bootstrap. Việc của chúng ta lúc này chỉ đơn giản là sử dụng nó.

Vậy thì Cột (Column) và Dòng (Row) ở đây là gì?

  • Dòng (row): là khối lớn nhất. Khi chúng ta tạo một hàng, nó chiếm toàn bộ chiều rộng của thành phần chứa nó.
  • Cột (Column): Vị trí các thành phần theo chiều dọc được thể hiện dựa trên các cột. Duy nhất các cột được đặt trong hàng, đặt nội dung trực tiếp trong hàng sẽ làm vỡ bố cục.

Grid cơ bản trong Bootstrap 4

Grid System (Hệ thống lưới Grid) được thiết kế theo kiểu flexbox và cho phép sử dụng tới 12 cột trong một trang.

Nếu bạn không sử dụng hết 12 cột thì bạn có thể nhóm các cột lại với nhau để tạo cột rộng hơn.

Grid System (Hệ thống lưới) cố định là 12 cột và các cột được sắp xếp dựa vào kích thước màn hình,…

Đảm bảo rằng tổng bằng 12 hoặc ít hơn (Không nhất thiết phải sử dụng hết 12 cột có sẵn)

Bootstrap Grid System
Bootstrap Grid System

Keywords searched by users: grid system bootstrap 4

Bootstrap 4 Grid System
Bootstrap 4 Grid System
Bootstrap 4 Grid System - Javatpoint
Bootstrap 4 Grid System – Javatpoint
Bootstrap 4 | Grid System - Geeksforgeeks
Bootstrap 4 | Grid System – Geeksforgeeks
Learn The Bootstrap 4 Grid System In 10 Minutes
Learn The Bootstrap 4 Grid System In 10 Minutes
Bootstrap Grid Images :: Photos, Videos, Logos, Illustrations And Branding  :: Behance
Bootstrap Grid Images :: Photos, Videos, Logos, Illustrations And Branding :: Behance
Bootstrap 5 Grid System - Examples And Tutorial
Bootstrap 5 Grid System – Examples And Tutorial
Bootstrap 4 Grid System - Javatpoint
Bootstrap 4 Grid System – Javatpoint
How To Use Bootstrap Grid - Bootstrap 4 Grid Layout - Youtube
How To Use Bootstrap Grid – Bootstrap 4 Grid Layout – Youtube
Working With Bootstrap 4 Grid System For Creating Responsive Layouts - Dzone
Working With Bootstrap 4 Grid System For Creating Responsive Layouts – Dzone
Bootstrap Grid System
Bootstrap Grid System
Bootstrap 3 Grid System
Bootstrap 3 Grid System
Bootstrap Grid - Javatpoint
Bootstrap Grid – Javatpoint
How To Use Bootstrap Grid System?
How To Use Bootstrap Grid System?
Bootstrap 4 Grid System (With Example)
Bootstrap 4 Grid System (With Example)
Bootstrap 4 Grid System
Bootstrap 4 Grid System
Bootstrap 5 Columns And Grid System | Explained
Bootstrap 5 Columns And Grid System | Explained
Free Pre-Built Bootstrap 4 Grid System By Dtux ~ Epicpxls
Free Pre-Built Bootstrap 4 Grid System By Dtux ~ Epicpxls
Bootstrap 4 Grid By Jeremy Elder On Dribbble
Bootstrap 4 Grid By Jeremy Elder On Dribbble
Bootstrap 4 Grid System Free Download Psd :: Behance
Bootstrap 4 Grid System Free Download Psd :: Behance
Working With Bootstrap 4 Grid System For Creating Responsive Layouts - Dzone
Working With Bootstrap 4 Grid System For Creating Responsive Layouts – Dzone
Bootstrap Grid System: Hệ Thống Lưới Trong Bootstrap
Bootstrap Grid System: Hệ Thống Lưới Trong Bootstrap

See more here: kientrucannam.vn

Leave a Reply

Your email address will not be published. Required fields are marked *