Media queries
Media Queries cũng là một chức năng hay mang lại độ tùy biến cao cho giao diện khi làm Responsive nên mình quyết định đưa nào vào bài viết.
Media Queries là giúp bạn tùy biến code CSS ứng với kích thước trình duyệt nhất định. Chẳng hạn như bạn chia một trang web thành cột với 2 div nhưng khi bạn muốn xem trang web trên thiết bị di độngthì 1 cột sẽ ẩn đi chỉ còn 1 cột thì lúc này bạn có thể dùng Media Queries để làm điều đó.
Tuy nhiên, Media Queries chỉ sử dụng được khi bạn dùng LESS để viết CSS. Nếu chưa biết khái niệm này thì bạn có thể không cần xem phần này mà hãy tìm hiểu cách Dùng LESS viết CSS trước.
Cú pháp của Media Queries dạng như sau:
/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }
Sử dụng max-width để giới hạn chiều rộng:
@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }
Auto-layout columns
Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like
.col-sm-6
.
Equal-width
For example, here are two grid layouts that apply to every device and viewport, from
xs
to
xxl
. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
1 of 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
Breakpoint
Breakpoint (điểm ngắt) chính là thứ sẽ giúp bạn tùy chình layout trên mỗi viewport sizes (khung nhìn) khác nhau. Bootstrap bao gồm 6 breakpoint mặc định hay còn gọi là các grid tiers (tầng lưới), với mỗi breakpoint này chúng ta có thể áp dụng các class khác nhau của bootstrap để có thể tùy chỉnh layout theo ý muốn của mình. Chúng ta sẽ hiểu rõ hơn về nó qua những ví dụ sẽ đề cập sau.
Để ý thấy rằng từ màn hình xs trở lên mỗi breakpoint đều sử dụng dấu >= thay vì < điều đó cho thấy rằng những breakpoint này đang sử dụng thuộc tính min-width trong css. Thế nên các thuộc tính của breakpoint này sẽ áp dụng cho tất cả các kích thước màn hình lớn hơn hoặc bằng với width của breakpoint.
Example
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.
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
.
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
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 options
While Bootstrap uses
em
s or
rem
s for defining most sizes,
px
s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
Extra small
<576px |
Small
≥576px |
Medium
≥768px |
Large
≥992px |
Extra large
≥1200px |
|
Max container width | None (auto) | 540px | 720px | 960px | 1140px |
Class prefix | |||||
# of columns | 12 | ||||
Gutter width | 30px (15px on each side of a column) | ||||
Nestable | Yes | ||||
Column ordering | Yes |
Grid System Rules
Some Bootstrap 4 grid system rules:
-
Rows must be placed within a
.container
(fixed-width) or
.container-fluid
(full-width) for proper alignment and padding - Use rows to create horizontal groups of columns
- Content should be placed within columns, and only columns may be immediate children of rows
-
Predefined classes like
.row
and
.col-sm-4
are available for quickly making grid layouts -
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on
.rows
-
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three
.col-sm-4
- Column widths are in percentage, so they are always fluid and sized relative to their parent element
-
The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as “equal width columns” (and equal height). Example: Three elements with
.col-sm
will each automatically be 33.33% wide from the small breakpoint and up. Tip: If you want to learn more about Flexbox, you can read our CSS Flexbox Tutorial.
Note that Flexbox is not supported in IE9 and earlier versions.
If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it.
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
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.
Basic Structure of a Bootstrap 4 Grid
The following is a basic structure of a Bootstrap 4 grid:
First example: create a row (). Then, add the desired number of columns (tags with appropriate
.col-*-*
classes). The first star (*)
represents the responsiveness: sm, md, lg or xl, while the second star
represents a number, which should always add up to 12 for each row.
Second example: instead of adding a number to each
col
, let bootstrap handle
the layout, to create equal width columns: two
"col"
elements = 50% width to
each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You
can also use
.col-sm|md|lg|xl
to make the columns responsive.
Phần kết
Như vậy trong bài viết nay chúng ta đã cùng tìm hiểu về Grid System trong Bootstrap, đây là một tính năng vô cùng mạnh mẽ của Bootstrap nên nếu làm chủ được nó thì công việc xây dựng bố cục cũng như phát triển web Front-end sẽ trở nên dễ dàng hơn rất nhiều. Rất mong rằng bài viết này sẽ giúp ích cho các bạn
Tài liệu tham khảo:
https://getbootstrap.com/
All rights reserved
Basic grid layouts to get you familiar with building within the Bootstrap grid system.
In these examples the
.themed-grid-col
class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.
Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
Get two columns starting at desktops and scaling to large desktops.
No grid classes are necessary for full-width elements.
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.
Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.
Nội dung
Basic Structure of a Bootstrap 4 Grid
The following is a basic structure of a Bootstrap 4 grid:
First example: create a row (). Then, add the desired number of columns (tags with appropriate
.col-*-*
classes). The first star (*)
represents the responsiveness: sm, md, lg or xl, while the second star
represents a number, which should always add up to 12 for each row.
Second example: instead of adding a number to each
col
, let bootstrap handle
the layout, to create equal width columns: two
"col"
elements = 50% width to
each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You
can also use
.col-sm|md|lg|xl
to make the columns responsive.
Reordering
Order classes
Use
.order-
classes for controlling the visual order of your content. These classes are responsive, so you can set the
order
by breakpoint (e.g.,
.order-1.order-md-2
). Includes support for through
12
across all five grid tiers.
First, but 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
Các thành phần chính của Grid System trong Bootstrap
- Cột (Columns): Cột là thành phần cơ bản của hệ thống lưới Bootstrap. Trang web của bạn được chia thành 12 cột ảo và bạn có thể xác định số lượng cột mà một phần tử sẽ chiếm trên các kích thước màn hình khác nhau.
- Hàng (Rows): Hàng là một tập hợp các cột. Mỗi hàng bao gồm một hoặc nhiều cột. Hàng giúp bạn xác định cách các cột sẽ xếp chồng lên nhau hoặc xếp theo hàng ngang.
- Container: Container là một thành phần chứa các hàng. Bootstrap cung cấp hai loại container chính: container và container-fluid. Container thường được sử dụng cho bố cục cố định, trong khi container-fluid sử dụng cho bố cục co dãn trên toàn bộ chiều rộng của màn hình.
>>> Xem thêm bài viết: Tất tần tật về Container trong Bootstrap 5
Basic Structure of a Bootstrap 4 Grid
The following is a basic structure of a Bootstrap 4 grid:
First example: create a row (). Then, add the desired number of columns (tags with appropriate
.col-*-*
classes). The first star (*)
represents the responsiveness: sm, md, lg or xl, while the second star
represents a number, which should add up to 12 for each row.
Second example: instead of adding a number to each
col
, let bootstrap handle
the layout, to create equal width columns: two
"col"
elements = 50% width to
each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You
can also use
.col-sm|md|lg|xl
to make the columns responsive.
Below we have collected some examples of basic Bootstrap 4 grid layouts.
Cách sử dụng Grid System trong Bootstrap
Grid system (hệ thống lưới) Bootstrap cho phép tối đa 12 cột trên trang. Bạn có thể sử dụng từng mục riêng lẻ hoặc hợp nhất chúng lại với nhau để có các cột rộng hơn. Bạn có thể sử dụng tất cả các kết hợp giá trị có tổng bằng 12. Bạn có thể sử dụng 12 cột, mỗi cột có chiều rộng 1 hoặc sử dụng 4 cột, mỗi cột có chiều rộng 3 hoặc bất kỳ kết hợp nào khác. Để sử dụng hệ thống lưới trong Bootstrap, bạn sử dụng các lớp CSS được định nghĩa sẵn như col-md-, col-sm-, col-lg-, vv., để xác định kích thước của cột trên các kích thước màn hình khác nhau. Dưới đây là một ví dụ:
Trong ví dụ này, có ba cột, mỗi cột sẽ hiển thị khác nhau trên các kích thước màn hình khác nhau. Cột 1 và cột 2 sẽ chiếm 4/12 cột trên màn hình lớn (lg), 6/12 cột trên màn hình trung bình (md), và toàn bộ chiều rộng trên màn hình nhỏ (sm). Cột 3 sẽ chiếm toàn bộ chiều rộng trên tất cả các kích thước màn hình.
Sử dụng Offset
Một câu hỏi tiếp tục được đặt ra khi làm giao diện là bạn muốn một thành phần nào đó hiển thị cách ra 1 khoảng so với thành phần kia thì sao ?
Nếu xử lý bằng cách khai báo lại giá trị margin cho các col thì sẽ dẫn đến giao diện sẽ không còn đúng chuẩn nữa. Trong trường hợp này các bạn nên khai báo thêm class: col-@@-offset-@ trong đó.
- @@: là 4 giá trị xs, sm, md và lag
- @: là giá trị từ 1 đến 12.
Ví dụ: col-md-offset-4 tức là cột này sẽ thụt vào trong 1 khoảng bằng 4 col md.
.col-md-4.col-md-4 .col-md-offset-4.col-md-3 .col-md-offset-3.col-md-3 .col-md-offset-3.col-md-6 .col-md-offset-3
Kết quả hiển thị sẽ được như sau:
How it works
Breaking it down, here’s how the grid system comes together:
-
Our grid supports six responsive breakpoints. Breakpoints are based on
min-width
media queries, meaning they affect that breakpoint and all those above it (e.g.,
.col-sm-4
applies to
sm
,
md
,
lg
,
xl
, and
xxl
). This means you can control container and column sizing and behavior by each breakpoint. -
Containers center and horizontally pad your content. Use
.container
for a responsive pixel width,
.container-fluid
for
width: 100%
across all viewports and devices, or a responsive container (e.g.,
.container-md
) for a combination of fluid and pixel widths. -
Rows are wrappers for columns. Each column has horizontal
padding
(called a gutter) for controlling the space between them. This
padding
is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content. -
Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g.,
col-4
spans four).
width
s are set in percentages so you always have the same relative sizing. -
Gutters are also responsive and customizable. Gutter classes are available across all breakpoints, with all the same sizes as our margin and padding spacing. Change horizontal gutters with
.gx-*
classes, vertical gutters with
.gy-*
, or all gutters with
.g-*
classes.
.g-0
is also available to remove gutters. -
Sass variables, maps, and mixins power the grid. If you don’t want to use the predefined grid classes in Bootstrap, you can use our grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.
Cấu trúc cơ bản của Bootstrap 4 Grid
Dưới đây là cấu trúc của Bootstrap 4 Grid:
Ví dụ 1: tạo 1 hàng (
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.
Grid Classes
The Bootstrap 4 grid system has five classes:
-
.col-
(extra small devices – screen width less than 576px) -
.col-sm-
(small devices – screen width equal to or greater than 576px) -
.col-md-
(medium devices – screen width equal to or greater than 768px) -
.col-lg-
(large devices – screen width equal to or greater than 992px) -
.col-xl-
(xlarge devices – screen width equal to or greater than 1200px)
The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for
sm
and
md
, you only need to specify
sm
.
Alignment
Use flexbox alignment utilities to vertically and horizontally align columns.
Vertical alignment
One of three 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
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-9Level 2: .col-8 .col-sm-6Level 2: .col-4 .col-sm-6
Examples
The next chapters shows examples of grid systems for different devices and screen widths:
- Stacked-to-horizontal
- Extra Small Layout
- Small devices
- Medium devices
- Large devices
- Extra large devices
- More grid examples
Bootstrap 4 Grids
How it works
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
One of three 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.
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
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
.
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
Lợi ích của Grid System trong Bootstrap
- (Responsive): Hệ thống lưới Bootstrap cho phép bạn xây dựng trang web đáp ứng, tự động thích nghi với các kích thước màn hình khác nhau.
- Bạn có thể tạo ra các bố cục phức tạp bằng cách kết hợp các cột và hàng một cách dễ dàng.
- Sử dụng Grid System giúp bạn tiết kiệm thời gian thiết kế và phát triển, vì bạn không cần viết CSS tùy chỉnh cho mọi bố cục.
- Bootstrap đảm bảo rằng bố cục trang web của bạn sẽ có kiểu dáng đồng nhất trên nhiều trình duyệt khác nhau.
Grid Options
The following table summarizes how the Bootstrap 4 grid system works across different screen sizes:
Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
Class prefix | |||||
Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
Container width | None (auto) | 540px | 720px | 960px | 1140px |
Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
# of columns | 12 | 12 | 12 | 12 | 12 |
Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
Nestable | Yes | Yes | Yes | Yes | Yes |
Offsets | Yes | Yes | Yes | Yes | Yes |
Column ordering | Yes | Yes | Yes | Yes | Yes |
Bootstrap 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.
Customizing the grid
Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.
Columns and gutters
The number of grid columns can be modified via Sass variables.
$grid-columns
is used to generate the widths (in percent) of each individual column while
$grid-gutter-width
sets the width for the column gutters.
$grid-columns: 12 !default; $grid-gutter-width: 1.5rem !default;
Grid tiers
Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the
$grid-breakpoints
and
$container-max-widths
to something like this:
$grid-breakpoints: ( xs: 0, sm: 480px, md: 768px, lg: 1024px ); $container-max-widths: ( sm: 420px, md: 720px, lg: 960px );
When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in
px
(not
rem
,
em
, or ).
Bootstrap 4 Grid System
Bootstrap 4 Grid System
Bootstrap’s grid system is built with flexbox and allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
span 4 | span 4 | span 4 | |||||||||
span 4 | span 8 | ||||||||||
span 6 | span 6 | ||||||||||
span 12 |
The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).
Các ví dụ về cách sử dụng Grid System trong Bootstrap
Ví dụ 1: Ví dụ về container trong Grid System
Stringee
A computer Science portal for Stringee
Đầu ra:
Ví dụ 2: Ví dụ về hàng trong Grid System
Bootstrap Example
Stringee.com
A computer Science portal for Stringee
First rowSecond rowThird rowFourth rowFifth row
Đầu ra:
Ví dụ 3: Ví dụ về cột trong Grid System
Bootstrap Example
Stringee
A computer Science portal for Stringee
First rowSecond row1st Column2nd Column3rd Column
đầu ra:
Container
Container (vùng chứa) dùng để bao quanh nội dung, nội dung bên trong container sẽ có kích thước tùy thuộc vào màn hình hoặc mỗi điểm ngắt. Container có 3 loại class chính gồm:
container-fluid
Chiều rộng luôn là 100% kích thước thước màn hình.
container
Chiều rộng sẽ thay đổi tùy theo kích thước màn hình (theo bảng bên dưới).
container-{breakpoint}
Chiều rộng luôn là 100% đến khi nào đạt tới điểm ngắt của breakpoint.
Grid system hoạt động như thế nào?
- Mỗi một hàng, phải được bao bọc bởi class .container hoặc .container-fluid để canh giữa và cách khoảng cách lề.
- Mỗi một hàng gồm các nhóm cột.
- Nội dung nằm trong cột, mỗi cột có thể chứa 12 cột con khác.
- Giữa các cột sẽ có khoảng padding. Khoảng padding của cột đầu và cuối sẽ được quy định bởi .rows.
- Nếu có nhiều hơn 12 cột trên một hàng thì mỗi nhóm 12 cột sẽ cố định và phần dư sẽ được chuyển sang hàng mới.
- Grid system được đinh nghĩa với các kích thước màn hình khác nhau mà hiển thi khác nhau. Ví dụ ta có lớp .col-md- sẽ không hiển thị đúng cột nếu màn hình cỡ lớn và .col-lg- sẽ không áp dụng nếu bạn đang xem bằng màn hình cỡ vừa.
Vậy cách chia grid system theo các thiết bị được chia như thế nào? Hãy nhìn vào bảng dưới đây để hiểu rõ hơn
Các sử dụng trong 1 file HTML như sau:
LvDuit Developer
.col-md-8.col-md-4.col-md-4.col-md-4.col-md-4
Grid options
Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:
- Extra small (xs)
- Small (sm)
- Medium (md)
- Large (lg)
- Extra large (xl)
- Extra extra large (xxl)
As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:
xs
<576px |
sm
≥576px |
md
≥768px |
lg
≥992px |
xl
≥1200px |
xxl
≥1400px |
|
Container | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
Class prefix | ||||||
# of columns | 12 | |||||
Gutter width | 1.5rem (.75rem on left and right) | |||||
Custom gutters | Yes | |||||
Nestable | Yes | |||||
Column ordering | Yes |
Two Unequal Responsive Columns
Cách tạo 2 cột có chiều rộng khác nhau từ điện thoại đến máy tính lớn.
.col-sm-4.col-sm-8
Dịch từ: https://www.w3schools.com/bootstrap4/bootstrap_typography.asp
Xem thêm các tài liệu, hướng dẫn lập trình khác TẠI ĐÂY.
Bài 2 – Tìm hiểu về Grid System trong Bootstrap
Bài đăng này đã không được cập nhật trong 2 năm
Bài trước, mình đã giới thiệu cho các bạn về Bootstrap. Nếu đã quên, bạn có thể đọc lại tại đây.
Bài 1: Bootstrap là gì? Giới thiệu về Bootstrap
Hôm nay, để đi sâu hơn, chúng ta sẽ tìm hiểu về Grid System trong Bootstrap.
Kết
Như vậy, về cơ bản chúng ta đã hiểu được cách sử dụng và làm thế nào để áp dụng Grid System khi thiết kế giao diện cho một website. Bài sau, tôi sẽ tiếp tục giới thiệu cho các bạn về phần Typography trong bootstrap. Hẹn gặp lại các bạn ở bài sau!
All rights reserved
Đã từ lâu, Bootstrap là một công cụ quan trọng trong việc phát triển web front-end, giúp giảm thời gian và công sức cần thiết để xây dựng giao diện web chất lượng cao và đáp ứng trên nhiều thiết bị khác nhau. Hệ thống lưới (Grid System) trong Bootstrap là một phần quan trọng của framework này. Nó cho phép bạn xây dựng bố cục trang web một cách dễ dàng và đáp ứng trên nhiều thiết bị khác nhau.
Grid Options
The following table summarizes how the Bootstrap 4 grid system works across different screen sizes:
Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
Class prefix | |||||
Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
Container width | None (auto) | 540px | 720px | 960px | 1140px |
Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
# of columns | 12 | 12 | 12 | 12 | 12 |
Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
Nestable | Yes | Yes | Yes | Yes | Yes |
Offsets | Yes | Yes | Yes | Yes | Yes |
Column ordering | Yes | Yes | Yes | Yes | Yes |
Kết luận
Trong bài viết này, chúng ta đã khám phá sâu hơn về Grid System trong Bootstrap và tầm quan trọng của nó trong thiết kế và phát triển các trang web hiện đại. Grid System giúp chúng ta tạo ra các giao diện đáp ứng, thích hợp cho nhiều loại thiết bị và màn hình khác nhau một cách dễ dàng. Với kiến thức về Grid system này, chúng ta sẽ xây dựng các trang web đẹp và mang lại trải nghiệm tốt hơn cho người dùng. Các bạn có thể tìm hiểu thêm ở đây.
Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 – 3 năm.
Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…
Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY:
Grid System (hệ thống lưới) trong Bootstrap được xây dựng với flexbox, cho phép tạo tới 12 cột trên một trang. Nếu bạn không muốn sử dụng tất cả 12 cột riêng biệt thì có thể nhóm chúng lại với nhau để tạo ra những cột rộng hơn.
Hệ thống lưới này là thích ứng, và các cột có thể tự động sắp xếp lại để phù hợp với kích thước của màn hình. Hãy chắc chắn rằng, tổng các cột tối đa là 12 hoặc ít hơn (bạn không nhất thiết phải sử dụng hết tất cả 12 cột).
Hệ thống grid của Bootstrap 4 có 5 class:
Các class trên có thể kết hợp với nhau để tạo ra bố cục động và linh hoạt hơn.
Mẹo: Vì class sẽ tăng/giảm theo tỷ lệ, vì vậy nếu muốn đặt cùng độ rộng cho sm và md thì chỉ cần chỉ định sm thôi.
Grid System trong Bootstrap 4 có vài quy tắc sau:
Đây là cấu trúc cơ bản của grid trong Bootstrap 4:
Ở ví dụ 1, sau khi tạo 1 hàng, bạn thêm số cột mình cần tương ứng với các class .col-*-*.* đầu tiên là loại class sm, md, lg hoặc xl. * thứ 2 đại diện cho 1 số, tối đa là 12.
Ở ví dụ 2, thay vì thêm một số vào mỗi col, bạn có thể để Bootstrap xử lý bố cục, tạo các cột có chiều rộng bằng nhau: 2 phần tử “col” thì mỗi col là 50%, 3 phần tử col thì mỗi cái có độ rộng là 33.33%, 4 col thì mỗi col là 25%… Bạn có thể sử dụng .col-sm|md|lg|xl để làm cho các cột có tính thích ứng (responsive).
Dưới đây là vài ví dụ cơ bản về bố cục lưới trong Bootstrap 4.
Ví dụ bên dưới sẽ chỉ cho bạn cách tạo 3 cột có chiều rộng bằng nhau, trên tất cả các thiết bị và độ rộng màn hình.
Bạn cần thêm vào các thẻ div sau:
Dưới đây là file html đầy đủ:
Khi chạy file trên bạn sẽ nhận được 2 bố cục khi màn hình rộng hơn 576px, và khi màn hình nhỏ hơn 576px như dưới đây:
Tiếp theo là ví dụ về cách tạo 2 cột có độ rộng khác nhau, bắt đầu từ màn hình máy tính bảng và mở rộng đến những màn hình lớn hơn. Giả sử ta tạo 1 cột sm-4 và 1 sm-8, khi đó bạn sẽ dùng các thẻ div sau:
Và file html đầy đủ sẽ là:
Khi chạy file trên bạn sẽ nhận được 2 bố cục khi màn hình rộng hơn 576px, và khi màn hình nhỏ hơn 576px như dưới đây:
Tiếp theo là ví dụ về cách tạo 2 cột có độ rộng khác nhau, bắt đầu từ màn hình máy tính bảng và mở rộng đến những màn hình lớn hơn. Giả sử ta tạo 1 cột sm-4 và 1 sm-8, khi đó bạn sẽ dùng các thẻ div sau:
File html đầy đủ lúc này sẽ như sau:
Sau khi chạy file trên, bạn sẽ nhận được 2 bố cục tương ứng với độ rộng màn hình lớn hơn 576px hay nhỏ hơn mức này.
Devmaster Academy via quantrimang
Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp – FullStack |
Lập trình ứng dụng trên nền tảng android |
Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS – FullStack |
Lập trình ứng dụng với WINDOWS FORM |
Lập trình ứng dụng với JAVA (FORM) |
Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,…) – FullStack |
Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery |
Lập trình frontend với reacjs (Full) |
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
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
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
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
.
Grid Classes
Hệ thống lưới Bootstrap 4 có 5 class:
- .col- (thiết bị rất nhỏ – chiều rộng màn hình ít hơn 576px)
- .col-sm (thiết bị nhỏ – chiều rộng màn hình lớn hơn hoặc bằng 576px)
- .col-md- (thiết bị trung bình- chiều rộng màn hình lớn hơn hoặc bằng 768px)
- .col-lg. (thiết bị lớn – chiều rộng màn hình lớn hơn hoặc bằng 992px)
- .col-x1- (thiết bị rất lớn – chiều rộng màn hình lớn hơn hoặc bằng 1200px)
Mẹo: Mỗi lớp chiều rộng sẽ tăng thêm, vì vậy nếu bạn muốn đặt cùng chiều rộng cho sm và md, bạn chỉ cần xác định sm.
Examples
The next chapters shows examples of grid systems for different devices and screen widths:
- Stacked-to-horizontal
- Extra Small Layout
- Small devices
- Medium devices
- Large devices
- Extra large devices
- More grid examples
Bootstrap 4 | Grid System
Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or merge them together for wider columns. All combinations of values summing up to 12 can be used.
Grid Classes: Bootstrap grid system contains five classes which are listed below:
- .col- It is used for extra small screen devices (screen width less than 576px).
- .col-sm- It is used for small screen devices (screen width greater than or equal to 576px).
- .col-md- It is used for medium screen size devices (screen width greater than or equal to 768px).
- .col-lg- It is used for large screen size devices (screen width greater than or equal to 992px).
- .col-xl- It is used for xlarge screen size devices (screen width equal to or greater than 1200px).
Components of Grid System:
- Containers: Bootstrap requires a containing element to wrap site contents in a grid system. The word container is used to contain the row elements and row elements containing the column elements.
- Rows: Rows must be placed within the container or container-fluid for proper alignment and padding. Rows are used to create horizontal groups of columns.
- Columns: Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three col-lg-4.
Example 1: This example uses bootstrap to create an equal width column grid on all devices and screen widths.
Output:
Example 2: This example uses bootstrap to create equal width responsive column grid. When the screen size is less than 576px the column automatically stack to each other.
Output:
- Run-on large screen (Desktop, tablets):
- Run-on small screen (mobile):
Example 3: This example uses bootstrap to create unequal width responsive column grid. When the screen size is less than 576px the column automatically stack to each other.
Output:
- Run-on large screen (Desktop, tablets):
- Run-on small screen (mobile):
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
Looking for a place to share your ideas, learn, and connect? Our Community portal is just the spot! Come join us and see what all the buzz is about!
Last Updated :
28 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment…
Learn how you can adjust column widths in Bootstrap with col-* and col-lg-* classes and combine them for different widths per device size
how can i make columns narrower in bootstrap?
what is bootstrap
What is bootstrap
what does d-none do?
how to display a card within a card using bootstrap
what is the purpose of bootstrap
what does `md` stand for in `col-md-4` for example
what does img-fluid do?
Does col-6 and col-sm-6 mean the same thing in Bootstrap?
what does “sm” in bootstrap grid mean?
how to make bootstrap navbar always be on top and displayed
In bootstrap, how to show an image only on mobile view?
What is bootstrap for?
I want to make a 1 row table with 6 columns in bootstrap, small size, able to have a small image and the date text above the image and the temperature text below the image
What is the difference between and
what is bootstrap?
Does anyone have a tutorial or explanation of boostratp to complement? It still has me a little confused
how can i align my navbar in bootstrap?
how do I align my navbar to the right in bootstrap?
Navbar with a logo to the far left and the links to the far right.
what is container-fluid
how to make three cards from boostrap to be in columns
how to add bootstrap form component styling
Make my cards in bootstrap horizontal
I want bootstrap cards containing an icon and a text
how can align my texts left in bootstrap divs?
why my row-cols do not work in bootstrap?
why my margins don’t work in bootstrap?
bootstrap form grid with search bar and button example
how to adjust 3 images with different size into the same size using boostrap
how to import bootstrap
How to make a row with 7 equal columns in bootstrap
how to change font in bootstrap styled button
how to do 6 columns with bootstrap in vscode
how do i enable shadows in bootstrap?
what is col-sm-6
how to fix the posision of navbar in bootsdrap
what is class mt-5
Please add the code for 3 columns with 2 rows using boostrap
I do not understand why my code does not divide into columns even though I linked my code to bootstrap.
how do I centre text in a bootstrap column
I need a blog page with 3 cards where the most recent blog posts will go and a sidebar that includes recent posts and categories listed.
How do I turn a list into a layout of four columns with Bootstrap?
how to apply padding with bootstrap
what ist the form-control class doing in bootstrap?
What is the most important thing I need to know about bootstrap?
Can you please explain what is d-block, d-none, d-sm-none and all the combinations.
Use bootstrap to create 3 cards of the same width and height that are lined up in a row
How do I make the cards in my code the same height using bootstrap
how to create responsive link sizes with bootstrap
how do i hide an image only on mobile devices using bootstrap
Learn how to turn a list into a layout of four columns with Bootstrap, using the row and col-* classes to create equal-widths columns.
How do I turn a list into a layout of four columns with Bootstrap?
what is bootstrap
What is bootstrap
what does d-none do?
how to display a card within a card using bootstrap
what is the purpose of bootstrap
what does `md` stand for in `col-md-4` for example
what does img-fluid do?
Does col-6 and col-sm-6 mean the same thing in Bootstrap?
what does “sm” in bootstrap grid mean?
how to make bootstrap navbar always be on top and displayed
In bootstrap, how to show an image only on mobile view?
What is bootstrap for?
I want to make a 1 row table with 6 columns in bootstrap, small size, able to have a small image and the date text above the image and the temperature text below the image
What is the difference between and
what is bootstrap?
Does anyone have a tutorial or explanation of boostratp to complement? It still has me a little confused
how can i align my navbar in bootstrap?
how do I align my navbar to the right in bootstrap?
Navbar with a logo to the far left and the links to the far right.
what is container-fluid
how to make three cards from boostrap to be in columns
how to add bootstrap form component styling
Make my cards in bootstrap horizontal
I want bootstrap cards containing an icon and a text
how can align my texts left in bootstrap divs?
why my row-cols do not work in bootstrap?
why my margins don’t work in bootstrap?
bootstrap form grid with search bar and button example
how to adjust 3 images with different size into the same size using boostrap
how to import bootstrap
How to make a row with 7 equal columns in bootstrap
how to change font in bootstrap styled button
how to do 6 columns with bootstrap in vscode
how do i enable shadows in bootstrap?
what is col-sm-6
how to fix the posision of navbar in bootsdrap
what is class mt-5
Please add the code for 3 columns with 2 rows using boostrap
I do not understand why my code does not divide into columns even though I linked my code to bootstrap.
how do I centre text in a bootstrap column
I need a blog page with 3 cards where the most recent blog posts will go and a sidebar that includes recent posts and categories listed.
how to apply padding with bootstrap
what ist the form-control class doing in bootstrap?
What is the most important thing I need to know about bootstrap?
Can you please explain what is d-block, d-none, d-sm-none and all the combinations.
Use bootstrap to create 3 cards of the same width and height that are lined up in a row
How do I make the cards in my code the same height using bootstrap
how to create responsive link sizes with bootstrap
how do i hide an image only on mobile devices using bootstrap
@media for bootstrap 5
Tất tần tật về Grid System trong Bootstrap
Bài đăng này đã không được cập nhật trong 2 năm
Như các bạn đã biết thì Bootstrap đang là một trong nhưng framework css phổ biến nhất hiện nay và một tính năng vô cùng mạnh mẽ của nó chính là Grid System (Hệ thống lưới) giúp chúng ta xây dựng layout một cách dễ dàng và thuận tiện nhất. Do vậy hôm nay chúng ta cùng tìm hiểu về nó nhé!
Trước khi vào phần chính chúng ta hay cùng tìm hiểu qua một số khái niệm cơ bản của bootstrap sau đây.
Grid system là gì
Grid System là một hệ thống lưới và bao gồm nhiều dòng và nhiều cột, số lượng dòng bao nhiêu tùy thuộc vào thiết kế của bạn nhưng số lượng cột trên mỗi dòng luôn luôn là 12. Kích thước trong Grid System tính bằng cột, mỗi cột này sẽ chiếm một % nhất định kích thước của layout. Thay vì chỉ định rõ ràng kích thước là 200px, 300px, … thì giờ chúng ta sẽ dùng đơn vị là cột. Số phần % của mỗi cột đã được định nghĩa sẵn trong bootstrap. Việc của chúng ta lúc này chỉ đơn giản là sử dụng nó.
Vậy thì Cột (Column) và Dòng (Row) ở đây là gì?
- Dòng (row): là khối lớn nhất. Khi chúng ta tạo một hàng, nó chiếm toàn bộ chiều rộng của thành phần chứa nó.
- Cột (Column): Vị trí các thành phần theo chiều dọc được thể hiện dựa trên các cột. Duy nhất các cột được đặt trong hàng, đặt nội dung trực tiếp trong hàng sẽ làm vỡ bố cục.
Grid cơ bản trong Bootstrap 4
Grid System (Hệ thống lưới Grid) được thiết kế theo kiểu flexbox và cho phép sử dụng tới 12 cột trong một trang.
Nếu bạn không sử dụng hết 12 cột thì bạn có thể nhóm các cột lại với nhau để tạo cột rộng hơn.
Grid System (Hệ thống lưới) cố định là 12 cột và các cột được sắp xếp dựa vào kích thước màn hình,…
Đảm bảo rằng tổng bằng 12 hoặc ít hơn (Không nhất thiết phải sử dụng hết 12 cột có sẵn)
Keywords searched by users: grid system bootstrap 4
Categories: Chia sẻ 30 Grid System Bootstrap 4
See more here: kientrucannam.vn
See more: https://kientrucannam.vn/vn/