Grid System in Bootstrap


In the previous Bootstrap lesson Taimienphi.vn showed you how to create a website using Bootstrap. The next lesson below Taimienphi.vn will introduce you to Grid System in Bootstrap.


Grid System in Bootstrap is the fastest way to create Responsive interface layout, refer to the post learn Bootstrap Here of Taimienphi.vn to learn about Grid System in Bootstrap.

Grid System in Bootstrap

Table of Contents:
1. What is Grid System in Bootstrap?
2. Create a 2 column layout in Bootstrap
3. Create a 3 column layout in Bootstrap
4. Create equal width columns in Bootstrap
5. The columns are wrapped in Bootstrap
6. Create a multi-column layout in Bootstrap
7. Nest grid columns in Bootstrap
8. Create columns of variable width in Bootstrap
9. Align the grid columns in Bootstrap
9.1. Align the grid columns vertically
9.2. Align the grid columns horizontally
10. Rearrange grid columns
11. Compensating columns in Bootstrap
12. Create compact layout in Bootstrap
13. Break up columns into new rows

1. What is Grid System in Bootstrap?

Grid System in Bootstrap is the fastest solution to create Responsive interface layout. The latest Bootstrap 4 version adds a mobile-first grid system with a scale of up to 12 columns as the device or viewport size increases.

Bootstrap 4 includes predefined grid layers to quickly create grid layouts for different types of devices, such as mobile phones, tablets, laptops or computers, etc.

For example, you can use classes .col- * to create grid columns for small-sized mobile devices in portrait mode, similarly using layers .col-sm- * to create grid columns for small size devices in landscape mode, layers .col-md- * for devices with average screen sizes like tablets, grades .col-lg- * for large screen size devices such as computers and layers .col-xl- * for larger computer screens.

The following table summarizes some of the key features of the grid system:

grid system in bootstrap

From the table above can see if we apply the class .col-sm- * any for an element will affect the style of that element on both small-sized, medium-sized screen devices and even large or very large screen devices without class .col-md- *, .col-lg- * or class .col-xl- *

Similar class .col-md- * not only affects the style of elements on average screen size devices, but also on large and extra large screen devices without class .col-lg- * or class .col-xl-.

So how to create rows and columns using a 12-column fixed grid system. To do this, first create a container element that acts as a shell for rows and columns using the class .container, then create rows inside the containing element using the class .row. To create columns inside any row, we use classes .col- *, .col-sm- *, .col-md- *, .col-lg- * and class .col-xl- *

The columns are the content area, where we will add our content.

2. Create a 2 column layout in Bootstrap

The example below illustrates how to create a 2-column layout for medium, large, and large screen devices such as tablets, laptops and computers, etc. However, on small screen size devices such as mobile devices (the screen width is less than 768px), the columns will automatically change to horizontal.

grid system in bootstrap 2

Note: In a grid layout, content must be placed inside columns (.col and .col- *) and only columns can be children of rows (.row). Rows must be placed inside .container (fixed-width grid layout) or .container-fluid (full-width grid layout) for proper padding and alignment.

Tips: The column width of the grid is set in percent, so the size of the columns corresponds to its parent. In addition, each column has horizontal padding to control the distance between individual columns.

Because the Grid System in Bootstrap is fixed to 12 columns, so to keep columns in a row (i.e. columns side by side), the total number of grid columns in a row cannot be greater than 12.

3. Create a 3 column layout in Bootstrap

Similarly, we can create different layouts based on the above principle. For example, in the example below to create a 3 column layout for large screen size devices such as laptops, computers. This layout also works on medium sized screen devices like tablets but in landscape mode if the screen resolution is greater than or equal to 992 pixels.

grid system in bootstrap 3

Note: If more than 12 grid columns are placed in a row, each group of additional columns will be wrapped in a new line.

4. Create equal width columns in Bootstrap

In addition, we can create columns of equal width for all devices (including small, small, medium, large and large screen size devices) by using the .col without specifying the number of columns.

Check out the example below to learn how it works:

grid system in bootstrap 4

We can also set the width for one column and the other columns will automatically resize to the same column.

For example: In the example below the adjacent columns in .col class with equal width:

grid system in bootstrap 5

5. The columns are wrapped in Bootstrap

We can create more flexible layouts, changing directions based on viewport size.

In the example below we will create a 3-column layout on large screen size devices such as laptops and computers in landscape mode and on medium screen size devices such as tablets in portrait mode. (screen width is greater than 768px and smaller than 992px) changes to a 2 column layout in which the third column moves to the bottom corner of the first 2 columns:

grid system in bootstrap 6

As you can see in the example above the average total of grid columns (ie col-md- *) is 3 + 9 + 12 = 24> 12, so the element div 3rd class .col-md-12 additional columns in addition to the 12 maximum inner columns .row, wrapped in a new line as adjacent units on average screen size devices.

Similarly you can create other compatible layouts for your web pages using the grid-wrap feature in Bootstrap.

6. Create a multi-column layout in Bootstrap

With the mobile-first grid system on Bootstrap 4, we can easily control the layout displayed on different types of devices with different screen sizes or viewports such as on mobile phones, tablets. , computers, laptops, ….

grid system in bootstrap 7

The above illustration has a total of 12 columns of content on all devices, but its layout varies depending on the device screen size, such as on mobile devices, the layout is displayed. displayed as a grid of 1 column and 12 rows overlapping, while on a tablet the layout is displayed as a 2 column and 6 row layout.

On devices with large screen sizes such as computers, laptops, the layout is displayed as 3 columns 4 rows, and on devices with extremely large screen sizes the layout is displayed as 4 columns 3 rows.

The problem is how to create the same Responsive interface layout using the grid system in Bootstrap.

Suppose the target device we are targeting is a regular computer or laptop. Because the laptop layout has 3 columns 4 rows, that is, the grid layout is 3×4, so the HTML code to create such a grid layout will look like this:

grid system in bootstrap 8

In the example above, if on a normal computer or laptop with a screen width or viewport greater than or equal to 992px but less than 1200px, the output layout will have 4 rows of rows that each have 3 equal columns.

To customize the layout for other devices, such as on tablets, because on tablets, the layout is displayed as a 2×6 grid (i.e. 2 columns and 6 rows). So we add layers .col-md-6 on each column.

grid system in bootstrap 9

Tips: To customize the layout for different devices, first need to determine what the target device you are targeting and create a layout for that device, then add layers that match the device.

Similarly, you can customize the layout for extremely large screen size devices by adding layers .col-xl-3 on each column.

grid system in bootstrap 10

Tips: We do not need to customize the layout for small screen size devices like mobile devices because the columns on these devices will automatically convert to a horizontal layout and be displayed as a grid layout. 1×12 without layers .col- * or .col-sm- *.

7. Nest grid columns in Bootstrap

The grid columns in Bootstrap can also be nested, ie we can put the rows and columns inside an existing column. The formula for placing columns is the same, that is, the total number of columns must be equal to or less than 12 in a row.

For example: The following is an example illustrating nesting grid columns in Bootstrap:

grid system in bootstrap 11

8. Create columns of variable width in Bootstrap

By using the class col- {breakpoint} -auto, we can specify the size of the columns based on the width of the content in the columns.

For example: In the example below we will create columns of variable width:

grid system in bootstrap 12

9. Align the grid columns in Bootstrap

Also we can use the flexbox alignment utility to align the grid columns horizontally and vertically in a container element. Refer to some examples below:

9.1 Align the grid columns vertically

By using the class.align-items-start, .align-items-center and .align-items-end to align grid columns vertically at the top, middle and bottom corners of a corresponding container element.

grid system in bootstrap 13

If you want you can also align individual columns in a row vertically as in the example below:

grid system in bootstrap 14

Note: You can skip numbers in class .col- * grid and just use class .col to create equal sized columns for all devices with different screen sizes.

9.2 Align the grid columns horizontally

Use the class .justify-content-start, .justify-content-center and .justify-content-end to align grid columns horizontally to the left, middle and right of an element containing, respectively.

For example: In the example below we align the grid columns horizontally:

grid system in bootstrap 15

Also we can use class .justify-content-around to distribute grid columns evenly with half-sized gaps at either end, or use layers .justify-content-between to distribute grid columns evenly with the first column set at the beginning and the last column set at the end.

For example:

grid system in bootstrap 16

10. Rearrange grid columns

If desired, you can change the visual order of grid columns without changing the actual order of columns. By using class .order-last To set the order of columns in the last position, use layers .order-first to set the columns in the first place.

Refer to the example below:

grid system in bootstrap 17

Use the class .order- * to arrange grid columns in numerical order. Grid columns with a higher sequence number are followed by a grid column with a lower sequence number or a grid column with an unordered layer.

For example:

grid system in bootstrap 18

11. Compensating columns in Bootstrap

We can also move grid columns to the right for alignment using the column offset layers like .offset-sm- *, .offset-md- *, .offset-lg- *, ….

These classes offset columns by increasing the left margin according to the specified number of columns. Such class .offset-md-4 on the column .col-md-8 Move right through 4 columns from the original position. Refer to the example below to easily visualize:

grid system in bootstrap 19

In addition, we can also offset the columns with alignments. These classes are useful in cases if the width of the offset is not fixed.

For example:

grid system in bootstrap 20

Note: You can use class .col-auto to create columns that occupy a lot of space, ie content-based column sizes.

12. Create compact layout in Bootstrap

By using class .no-gutters on .row to remove spaces between the default gutter columns and create compact layouts in Bootstrap. This class removes outer margins and horizontal padding from all child columns immediately.

For example: The following is an example illustrating how to create a compact layout in bootstrap:

grid system in bootstrap 21

13. Break up columns into new rows

We can create columns of equal width across multiple rows by inserting tags div with class .w-100 in the position you want to split the columns into new rows. Or alternatively is class combination .w-100 with responsive display classes.

For example: In the example below we break the columns into new rows:

grid system in bootstrap 22

https://thuthuat.taimienphi.vn/grid-system-rong-bootstrap-50817n.aspx
The above lesson Taimienphi.vn has just introduced you to Grid System in Bootstrap. In the next Bootstrap lesson, Taimienphi.vn will introduce you further Create fixed layout in Bootstrap Please.

.

Add a Comment

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