Col in Bootstrap is just one part of the Grid system. This article will provide you with all the basic knowledge you need to know about CSSs Grid System.

Col in Bootstrap is just one part of the Grid system. This article will provide you with all the basic knowledge you need to know about CSS's Grid System .

 

• Lesson 1: What is Bootstrap 5?
• Lesson 2: Learning about Containers

Bootstrap is one of the most popular responsive web development frameworks today. It includes HTML, CSS, and JavaScript.

According to Wikipedia, 'in graphic design, a grid (usually a 2D structure) is made up of a series of intersecting vertical and horizontal lines to form the structure of content. It is widely used in layout design and content structure in print design. In web design, it is a very effective method for quickly creating consistent layouts using HTML and CSS.'

So what is the grid system in Bootstrap 5?

The Grid system in Bootstrap 5 allows you to create up to 12 columns on a page. You can use all 12 columns individually or group them together to create wider columns.

Bootstrap's grid system is responsive, and the columns automatically adjust to the screen size.

Bootstrap 's grid system is built with flexbox, allowing you to create up to 12 columns on a page. If you don't want to use all 12 columns separately, you can group them together to create wider columns.

This grid system is responsive, meaning the columns can automatically rearrange to fit the screen size. Make sure the total number of columns is a maximum of 12 or fewer (you don't necessarily need to use all 12 columns).

 

Grid classes

Bootstrap 5's Grid system has 6 classes:

• .col- (micro-device - screen width less than 576px)
• .col-sm- (small device - screen width equal to or greater than 576px)
• .col-md- (medium device - screen width equal to or greater than 768px)
• .col-lg- (large device - screen width equal to or greater than 992px)
• .col-xl- (extremely large device - screen width equal to or greater than 1200px)
• .col-xxl- (extremely large device - screen width equal to or greater than 1400px)

These classes can be combined to create a more dynamic and flexible layout.

Tip: Since the class will increase/decrease proportionally, if you want to set the same width for smboth md, just specify it sm.

Grid options

The following table summarizes how the Bootstrap 5 grid system works on different screen sizes:

	Extra small (<576px)	Small (>=576px)	Medium (>=768px)	Large (>=992px)	Extra Large (>=1200px)	XXL (>=1400px)
Class	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-
Phạm vi Grid	Ngang mọi lúc	Bắt đầu thu gọn, dàn ngang phía trên các điểm ngắt	Bắt đầu thu gọn, dàn ngang phía trên các điểm ngắt	Bắt đầu thu gọn, dàn ngang phía trên các điểm ngắt	Bắt đầu thu gọn, dàn ngang phía trên các điểm ngắt	Bắt đầu thu gọn, dàn ngang phía trên các điểm ngắt
Độ rộng Container	Không (tự động)	540px	720px	960px	1140px	1320px
Phù hợp với	Điện thoại dọc	Điện thoại ngang	Máy tính bảng	Laptop	Laptop và Desktop	Laptop và Desktop
Số cột	12	12	12	12	12	12
Chiều rộng Gutter	1.5rem (.75rem trên mỗi bên của 1 cột)	1.5rem (.75rem trên mỗi bên của 1 cột)	1.5rem (.75rem trên mỗi bên của 1 cột)	1.5rem (.75rem trên mỗi bên của 1 cột)	1.5rem (.75rem trên mỗi bên của 1 cột)	1.5rem (.75rem trên mỗi bên của 1 cột)
Có thể lồng	Có	Có	Có	Có	Có	Có
Offset	Có	Có	Có	Có	Có	Có
Thứ tự cột	Có	Có	Có	Có	Có	Có

 

Rules for the Grid System in Bootstrap

The Grid System in Bootstrap has a few rules:

1. Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) file for proper alignment and padding.

2. Use rows to create horizontal column groups.

3. Content should be placed in columns, and only columns can be children of rows.

4. Predefined classes such as .row and .col-sm-4 are available to quickly create grid layouts.

5. Columns create gutter (space between column contents) through padding. This padding is compensated row-by-row for the first and last columns via negative margin in .rows .

6. Grid columns are created by specifying the number of columns out of a total of 12 that you want to create. For example, the following 3 columns would use 3.col -sm-4 .

7. Column widths are calculated as a percentage, so they are very flexible and their size corresponds to their parent element.

The basic structure of Bootstrap 5 Grid

The following is the basic structure of a grid in Bootstrap 5:

In Example 1 : After creating a row ( ), you add the number of columns you need (corresponding to the appropriate classes). The first symbol represents responsiveness: sm, md, lg, xl, or xxl; while the second symbol represents a number, so a maximum of 12 numbers per row is allowed..col-*-***

In Example 2 : Instead of adding a number to each column col, you can let Bootstrap handle the layout, creating columns of equal width:

• If there are 2 elements , then each element is 50%.
• The three col elements each have a width of 33.33%.
• 4 cols, each col is 25%.
• .

You can use this .col-sm|md|lg|xl|xxlto make the columns responsive.

Below are some basic examples of basic grid layouts in Bootstrap 5.

Create 3 equal columns

The example below will show you how to create three columns of equal width, across all devices and screen sizes.

You need to add the following div tags:

 nội dung trong cột nội dung trong cột nội dung trong cột 

 

Below is the complete HTML file:

 Ví dụ Bootstrap 

3 columns of equal width

Note: Try adding a new div with class="col" inside the row class - it will create 3 columns of equal width.

 .col .col .col 

When you run the file above, you will get the layout shown below:

Creating Responsive Columns in Bootstrap

The example below will show you how to create four columns of equal width starting from the width of a tablet screen and scaling for larger screens. On phones or screens smaller than 576px, the columns will automatically stack.

In this case, you need to use the following div tags:

 nội dung trong cột nội dung trong cột nội dung trong cột nội dung trong cột 

And the complete HTML file would be:

 Ví dụ Bootstrap 

Adaptive column

Change your browser window to see the change.

The columns will automatically overlap when the screen width is less than 576px.

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

When you run the file above, you will get two layouts: one for screens wider than 576px, and one for screens smaller than 576px, as shown below:

 

Create two responsive columns with different widths.

Next is an example of how to create two columns of different widths, starting from a tablet screen and expanding to larger screens. Let's say we create one column sm-4and one column sm-8; then you would use the following div tags:

 nội dung của cột nội dung của cột 

The complete HTML file will now look like this:

 Ví dụ Bootstrap 

2 columns of different widths

Change the width of your browser window to see the effect.

The columns will automatically overlap when the screen is smaller than 576px.

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

After running the file above, you will get two layouts corresponding to screen widths larger than 576px and smaller than 576px.

Mix and combine

Don't want to just stack simple columns in several Grid levels? Then combine different classes for each level as needed. The example below will help you better visualize how it 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 

Nesting

To nest content with the default grid, add .rowand group columns .col-sm-*within the column .col-sm*. Nested rows consist of a set of added columns, up to 12 or fewer.

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

 

Here are some things to remember about how the Grid system works in Bootstrap 5:

• Grid systems can support multiple responsive breakpoints . Breakpoints are based on min-width media queries , meaning they affect that breakpoint and all other breakpoints above it (e.g., .col-sm-4 applies to sm, md, lg, xl, xxl). This means you can control the container, column size, and behavior of each breakpoint .
• The container centers and pads horizontally across the content. Use `.container` for responsive pixel length, `.container-fluid` for width: 100% across all viewports and devices, or a responsive container (e.g., `.container-md` ).
• Rows are packed into columns. Each column has vertical padding called gutter to control the space between them. Padding is then disabled on rows with negative alignment indices to ensure that content within the column appears in the bottom right position. Rows also support edit classes.
• The gutter is also responsive and customizable.

You can try using this online CSS editor to run the HTML files above, or install Bootstrap on your computer and use the editor to create the HTML file yourself.