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

Bootstrap 4 Grid System | Grid Options

Bootstrap 4 Tutorial #5 - Grid Basics

Z-index

Several Bootstrap components utilize

z-index

, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used

100

+ or

500

+.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.


$zindex-dropdown: 1000 !default; $zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; $zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default;

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit

z-index

values of , , and for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher

z-index

value to show their border over the sibling elements.

Nội dung

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 Tutorial #5 - Grid Basics
Bootstrap 4 Tutorial #5 – Grid Basics

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

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 Grid System Tutorial | Bootstrap 5
Bootstrap Grid System Tutorial | Bootstrap 5

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

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

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

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.

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

.

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

Responsive breakpoints

Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.


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

Since we write our source CSS in Sass, all our media queries are available via Sass mixins:


@include media-breakpoint-up(xs) { ... } @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } // Example usage: @include media-breakpoint-up(sm) { .some-class { display: block; } }

We occasionally use media queries that go in the other direction (the given screen size or smaller):


// Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... } // Small devices (landscape phones, less than 768px) @media (max-width: 767.98px) { ... } // Medium devices (tablets, less than 992px) @media (max-width: 991.98px) { ... } // Large devices (desktops, less than 1200px) @media (max-width: 1199.98px) { ... } // Extra large devices (large desktops) // No media query since the extra-large breakpoint has no upper bound on its width

Note that since browsers do not currently support range context queries, we work around the limitations of

min-

and

max-

prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Once again, these media queries are also available via Sass mixins:


@include media-breakpoint-down(xs) { ... } @include media-breakpoint-down(sm) { ... } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... }

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.


// Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... } // Small devices (landscape phones, 576px and up) @media (min-width: 576px) and (max-width: 767.98px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

These media queries are also available via Sass mixins:


@include media-breakpoint-only(xs) { ... } @include media-breakpoint-only(sm) { ... } @include media-breakpoint-only(md) { ... } @include media-breakpoint-only(lg) { ... } @include media-breakpoint-only(xl) { ... }

Similarly, media queries may span multiple breakpoint widths:


// Example // Apply styles starting from medium devices and up to extra large devices @media (min-width: 768px) and (max-width: 1199.98px) { ... }

The Sass mixin for targeting the same screen size range would be:


@include media-breakpoint-between(md, xl) { ... }

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

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

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.

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 For Beginners | Grid system - 2024
Bootstrap For Beginners | Grid system – 2024

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-3
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6

Bootstrap 4 Grid System
Bootstrap 4 Grid System

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

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 Layout | Web Development Course | Lecture 16
Bootstrap – Grid Layout | Web Development Course | Lecture 16

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).

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 Grid System Tutorial
Bootstrap 5 Grid System Tutorial

Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its

max-width

changes at each breakpoint) or fluid-width (meaning it’s

100%

wide all the time).

While containers can be nested, most layouts do not require a nested container.

Use

.container-fluid

for a full width container, spanning the entire width of the viewport.

...

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

.

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

Overview

Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.

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

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

Responsive breakpoints

Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.


// Extra small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

Since we write our source CSS in Sass, all our media queries are available via Sass mixins:


// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }` @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } // Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint .custom-class { display: none; } @include media-breakpoint-up(sm) { .custom-class { display: block; } }

We occasionally use media queries that go in the other direction (the given screen size or smaller):


// Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... } // Small devices (landscape phones, less than 768px) @media (max-width: 767.98px) { ... } // Medium devices (tablets, less than 992px) @media (max-width: 991.98px) { ... } // Large devices (desktops, less than 1200px) @media (max-width: 1199.98px) { ... } // Extra large devices (large desktops) // No media query since the extra-large breakpoint has no upper bound on its width


min-and


max-prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Once again, these media queries are also available via Sass mixins:


@include media-breakpoint-down(xs) { ... } @include media-breakpoint-down(sm) { ... } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... } // No media query necessary for xl breakpoint as it has no upper bound on its width // Example: Style from medium breakpoint and down @include media-breakpoint-down(md) { .custom-class { display: block; } }

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.


// Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... } // Small devices (landscape phones, 576px and up) @media (min-width: 576px) and (max-width: 767.98px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

These media queries are also available via Sass mixins:


@include media-breakpoint-only(xs) { ... } @include media-breakpoint-only(sm) { ... } @include media-breakpoint-only(md) { ... } @include media-breakpoint-only(lg) { ... } @include media-breakpoint-only(xl) { ... }

Similarly, media queries may span multiple breakpoint widths:


// Example // Apply styles starting from medium devices and up to extra large devices @media (min-width: 768px) and (max-width: 1199.98px) { ... }

The Sass mixin for targeting the same screen size range would be:


@include media-breakpoint-between(md, xl) { ... }

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

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

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.

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

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

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

.

Bootstrap 5 Crash Course
Bootstrap 5 Crash Course

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); } }

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.

bootstrap admin dashboard tutorial
bootstrap admin dashboard tutorial

Z-index

Several Bootstrap components utilize

z-index

, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used

100

+ or

500

+.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.


$zindex-dropdown: 1000 !default; $zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; $zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default;

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit

z-index

values of , , and for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher

z-index

value to show their border over the sibling elements.

Overview

Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.

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.

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

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.

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

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.

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 4 Simple Landing Page | Bootstrap Tutorials | Home Page Designes
Bootstrap 4 Simple Landing Page | Bootstrap Tutorials | Home Page Designes

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

Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

Bootstrap comes with three different containers:


  • .container

    , which sets a

    max-width

    at each responsive breakpoint

  • .container-fluid

    , which is

    width: 100%

    at all breakpoints

  • .container-{breakpoint}

    , which is

    width: 100%

    until the specified breakpoint

The table below illustrates how each container’s

max-width

compares to the original

.container

and

.container-fluid

across each breakpoint.

See them in action and compare them in our Grid example.

Extra small

<576px

Small

≥576px

Medium

≥768px

Large

≥992px

Extra large

≥1200px

100% 540px 720px 960px 1140px
100% 540px 720px 960px 1140px
100% 100% 720px 960px 1140px
100% 100% 100% 960px 1140px
100% 100% 100% 100% 1140px
100% 100% 100% 100% 100%

All-in-one

Our default

.container

class is a responsive, fixed-width container, meaning its

max-width

changes at each breakpoint.

Fluid

Use

.container-fluid

for a full width container, spanning the entire width of the viewport.

...

Responsive

Responsive containers are new in Bootstrap v4.4. They allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply

max-width

s for each of the higher breakpoints. For example,

.container-sm

is 100% wide to start until the

sm

breakpoint is reached, where it will scale up with

md

,

lg

, and

xl

.

100% wide until small breakpoint
100% wide until medium breakpoint
100% wide until large breakpoint
100% wide until extra large breakpoint

Tìm hiểu về Bootstrap cực đơn giản.
Tìm hiểu về Bootstrap cực đơn giản.

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

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
HTML CSS Responsive Grid System with SASS, No Bootstrap, Like Bootstrap
HTML CSS Responsive Grid System with SASS, No Bootstrap, Like Bootstrap

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.

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

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

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.

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

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.

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.

Bootstrap 4 Tutorial: Create Responsive Web Design With Bootstrap Grid System
Bootstrap 4 Tutorial: Create Responsive Web Design With Bootstrap Grid System

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.

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.

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

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

Keywords searched by users: bootstrap 4 grid system

Bootstrap Grid System Explanation: Understand Bootstrap Columns
Bootstrap Grid System Explanation: Understand Bootstrap Columns
Bootstrap 4 | Grid System - Geeksforgeeks
Bootstrap 4 | Grid System – Geeksforgeeks
How To Use Bootstrap Grid - Bootstrap 4 Grid Layout - Youtube
How To Use Bootstrap Grid – Bootstrap 4 Grid Layout – Youtube
Bootstrap 5 Grid System - Examples And Tutorial
Bootstrap 5 Grid System – Examples And Tutorial
Working With Bootstrap 4 Grid System For Creating Responsive Layouts - Dzone
Working With Bootstrap 4 Grid System For Creating Responsive Layouts – Dzone
Bootstrap 4 Grid By Jeremy Elder On Dribbble
Bootstrap 4 Grid By Jeremy Elder On Dribbble
Bootstrap Grid - Javatpoint
Bootstrap Grid – Javatpoint
Bootstrap Grid System | Complete Guide To Bootstrap Grid System
Bootstrap Grid System | Complete Guide To Bootstrap Grid System
Sử Dụng Grid System Trong Bootstrap
Sử Dụng Grid System Trong Bootstrap

See more here: kientrucannam.vn

Leave a Reply

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