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
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-9Level 2: .col-8 .col-sm-6Level 2: .col-4 .col-sm-6
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 32 of 33 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 32 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 3Variable width content3 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-8col-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é).
ColumnColumnColumnColumnColumnColumnColumnColumn
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-3Level 2: .col-8 .col-sm-6Level 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.
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
.
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
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.
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-3Level 2: .col-8 .col-sm-6Level 2: .col-4 .col-sm-6
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 unorderedSecond, but lastThird, 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 lastSecond, but unorderedThird, 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.
ColumnColumnColumn
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 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 |
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)
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.
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 22 of 21 of 32 of 33 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 32 of 3 (wider)3 of 31 of 32 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 3Variable width content3 of 31 of 3Variable width content3 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) { ... }
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 contentSecondary 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.
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 22 of 21 of 32 of 33 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.
ColumnColumnColumnColumn
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 32 of 3 (wider)3 of 31 of 32 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 3Variable width content3 of 31 of 3Variable width content3 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.
colcolcolcol
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
.
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
.
colcolcolcolcol-8col-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-8col-sm-4col-smcol-smcol-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.
ColumnColumnColumnColumn
ColumnColumnColumnColumn
ColumnColumnColumnColumn
ColumnColumnColumnColumn
ColumnColumnColumnColumn
ColumnColumnColumnColumn
ColumnColumnColumnColumnColumnColumnColumnColumnColumnColumnColumnColumn
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.
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.
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.
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
.
colcolcolcolcol-8col-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-8col-sm-4col-smcol-smcol-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 breakpoint100% wide until medium breakpoint100% wide until large breakpoint100% wide until extra large breakpoint
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 contentSecondary 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 |
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 (
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 columnsOne of three columnsOne of three columnsOne of three columnsOne of three columnsOne of three columnsOne of three columnsOne of three columnsOne of three columns
One of three columnsOne of three columnsOne of three columns
Horizontal alignment
One of two columnsOne of two columnsOne of two columnsOne of two columnsOne of two columnsOne of two columnsOne of two columnsOne of two columnsOne of two columnsOne 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
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
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.
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.
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 columnsOne of three columnsOne 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.
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
Keywords searched by users: bootstrap 4 grid system
Categories: Chia sẻ 37 Bootstrap 4 Grid System
See more here: kientrucannam.vn
See more: https://kientrucannam.vn/vn/