Chuyển tới nội dung
Home » Bootstrap 4 Grid Tutorial | Basic Structure Of A Bootstrap 4 Grid

Bootstrap 4 Grid Tutorial | Basic Structure Of A Bootstrap 4 Grid

Bootstrap 4 Tutorial #5 - Grid Basics

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.

Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like

.col-sm-6

.

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from

xs

to

xl

. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3

Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit

flex-basis

or

border

. There are workarounds for older browser versions, but they shouldn’t be necessary if you’re up-to-date.

Column
Column
Column
Column

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3

Variable width content

Use

col-{breakpoint}-auto

classes to size columns based on the natural width of their content.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3

Equal-width multi-row

Create equal-width columns that span multiple rows by inserting a

.w-100

where you want the columns to break to a new line. Make the breaks responsive by mixing the

.w-100

with some responsive display utilities.

col
col
col
col

Bootstrap 4 Tutorial #5 - Grid Basics
Bootstrap 4 Tutorial #5 – Grid Basics

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.

Reordering

Order classes

Use

.order-

classes for controlling the visual order of your content. These classes are responsive, so you can set the

order

by breakpoint (e.g.,

.order-1.order-md-2

). Includes support for through

12

across all five grid tiers.

First, but unordered
Second, but last
Third, but first

There are also responsive

.order-first

and

.order-last

classes that change the

order

of an element by applying

order: -1

and

order: 13

(

order: $columns + 1

), respectively. These classes can also be intermixed with the numbered

.order-*

classes as needed.

First, but last
Second, but unordered
Third, but first

Offsetting columns

You can offset grid columns in two ways: our responsive

.offset-

grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using

.offset-md-*

classes. These classes increase the left margin of a column by columns. For example,

.offset-md-4

moves

.col-md-4

over four columns.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

Margin utilities

With the move to flexbox in v4, you can use margin utilities like

.mr-auto

to force sibling columns away from one another.

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto

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

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.

Bootstrap Grid System Tutorial | Bootstrap 5
Bootstrap Grid System Tutorial | Bootstrap 5

Row Cols

You can also control how many columns that should appear next to each other (regardless of how many cols), with the

.row-cols-*

classes:

Example

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4

1 of 6

2 of 6

3 of 6

4 of 6

5 of 6

6 of 6

Creating Three Column Layouts

The following example describes creating three column layouts for medium and large devices. If the screen resolution is more than or equal to 992 pixels, then it will display in landscape mode in tablets and as usual, it will display in portrait mode.

Example



<br /> Bootstrap 4 Example<br />

.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-3
.col-sm-4
.col-sm-5
.col-sm-2
.col-sm-8
.col-sm-2
.col-sm-2
.col-sm-3
.col-sm-7



It will produce the following result −

Hello and welcome to the second day of Bootstrap 4 🙋🏻 Today we will learn about the Bootstrap 4 Grid, what it is and how you can use it.

The Bootstrap 4 Grid System is used for responsive layouts. A responsive layout represents the way elements align in the page on different resolutions. It is important you understand how to use the grid before learning about any other Bootstrap 4 component. This is because whatever element you will choose to use, you will need to place it somewhere on the screen. Let’s get started!

Photo credit to Animade for his shot.

This article is broken down into the following parts:

  • Bootstrap 4 Containers
  • Bootstrap 4 Rows
  • Bootstrap 4 Columns
  • Further Reading and Watching

The Bootstrap 4 grid consists of containers, rows and columns. We will take them one by one and explain them.

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

Bootstrap 4

In Bootstrap 4 there is a new

-xl-

size, see this demo. Also the

-xs-

infix has been removed, so smallest columns are simply

col-1

,

col-2

..

col-12

, etc..


col-*

– 0 (xs)

col-sm-*

– 576px

col-md-*

– 768px

col-lg-*

– 992px

col-xl-*

– 1200px

Additionally, Bootstrap 4 includes new auto-layout columns. These also have responsive breakpoints (

col

,

col-sm

,

col-md

, etc..), but don’t have defined % widths. Therefore, the auto-layout columns fill equal width across the row.

Creating Two Column Layouts

The following example describes creating two column layouts for small, medium and large devices. On small devices such as mobile phones, columns will automatically become horizontal as default.

Example



<br /> Bootstrap 4 Example<br />

.col-sm-6
.col-sm-6
.col-sm-7
.col-sm-5
.col-sm-4
.col-sm-8
.col-sm-9
.col-sm-3



It will produce the following result −

Output

Bootstrap 4 Grid System
Bootstrap 4 Grid System

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

Further Reading & Watching

  • Official Bootstrap Documentation for the Grid
  • This Video Tutorial about the Grid from Scrimba

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…

Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

Grid system

Bootstrap grid is a powerful system for building mobile-first websites. It uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

Some people even think that grid is the most important reason to use Bootstrap, so in this lesson, we will get to know this incredibly useful tool in depth.

Container

Bootstrap grid needs a container to work properly. We learned about containers in the previous lesson, so we won’t dwell on them here.

In our current project, we have already added a container and it looks like this:

And this is what the container should look like when rendered in our browser:

Row

Next, we need a row.

Rows are wrappers for columns. If you want to split your layout
horizontally, use

.row

. Let’s add 2 rows to our container:

I am a first row
I am a second row

After saving the file and refreshing your browser, you should see 2 new rows.

Columns

Then it’s time for the columns. Bootstrap grid allows you to add up to 12 columns in one line. If you add more than 12, the excess column will jump to the next line.

10
11
12

Columns are incredibly flexible. You can define how wide each column should be and how each of them should behave on different screen widths. Thanks to this, you can easily adjust your layout for both mobile devices and desktops.

For example, if you want to insert 2 columns of equal width, you can use the following code:

First column
Second column

As you can see, we’ve added the digits to the

col

class. This (

col-6

class) means that we want each column to be 6 units wide.

You can freely set the width of the columns, just remember that the sum of their width units does not exceed 12.


col-6

+

col-6

together give 12 units, which means 2 identical columns.

If you would like the right column to be slightly larger than the left column, you can set it as follows:

First column
Second column

4 (

col-4

) + 8 (

col-8

) = 12

This way you’ve created a very typical layout with the main column on the right and the sidebar space on the left – that’s exactly the scheme this tutorial uses!

However, there is one problem with the above example – no matter the screen size, our columns remain in the same aspect ratio.

The 4/8 ratio is very useful on large screens where there is plenty of space. However, on mobile devices, dividing a small screen additionally into 2 parts of 4 and 8 units is not acceptable. It would not be comfortable to use such a layout.

Here again, breakpoints come to the rescue. Do you remember the definition below from our previous lesson?

As in containers, we can also use breakpoints in columns and define from what width we want the column to extend to full width.

Taking the example from earlier, let’s say we want both of our columns to be full-width on small and medium screens, and to change to a 4/8 ratio on large screens.

First column
Second column

All we have to do is add a breakpoint

-md

(meaning “medium screen size”) to the

col

class, so that the Bootstrap grid knows that we want 4/8 columns ratio only on screens bigger than medium size, and on other screens (medium and small size) the columns should be stretched to full width.

To sum up – by using class

col-md-4

, we tell grid the following command:

  1. On screens smaller than 768px, I want this column to stretch to full width
  2. On screens larger than 768px, I want this column to be 4 units wide

Take a look at the table below and see what breakpoints you can use when creating a layout:

Breakpoint Class infix Dimensions
X-Small None 0–576px
Small ≥576px
Medium ≥768px
Large ≥992px
Extra large ≥1200px
Extra extra large ≥1400px

Okay, enough of this theory. Now let’s work on some real life examples.

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

.col-md-4
.col-md-4
.col-md-4

Three unequal columns

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.

.col-md-3
.col-md-6
.col-md-3

Two columns with two nested columns

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.

.col-md-8

.col-md-6
.col-md-6
.col-md-4

I think you now have a rough idea of how it works.

Bootstrap grid is a very advanced tool and at first its use can be overwhelming. If you feel that not everything is clear to you – that’s completely normal and fine. It just takes practice. You will gain confidence and fluency over time.

It’s been a long lesson, but don’t hesitate to repeat it to yourself to consolidate your knowledge. If you want to practice on your own and have a look at more examples read the grid system documentation page or play with our grid generator.

If something is still unclear to you – feel free to hit me on twitter.

About author

Michal Szymanski

Co Founder at MDBootstrap / Listed in Forbes „30 under 30″ / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.

Bootstrap 5 Grid System Tutorial
Bootstrap 5 Grid System Tutorial

Bootstrap 4 Grid System

Bootstrap’s grid system allows up to 12 columns across the page.

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

Bootstrap’s grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Nesting

To nest your content with the default grid, add a new

.row

and set of

.col-sm-*

columns within an existing

.col-sm-*

column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9

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

New Grid System in Bootstrap 5 (Practical Examples)
New Grid System in Bootstrap 5 (Practical Examples)

How it works

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

One of three columns
One of three columns
One of three columns

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent

.container

.

Breaking it down, here’s how it works:

  • Containers provide a means to center and horizontally pad your site’s contents. Use

    .container

    for a responsive pixel width or

    .container-fluid

    for

    width: 100%

    across all viewport and device sizes.
  • Rows are wrappers for columns. Each column has horizontal

    padding

    (called a gutter) for controlling the space between them. This

    padding

    is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
  • In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
  • Thanks to flexbox, grid columns without a specified

    width

    will automatically layout as equal width columns. For example, four instances of

    .col-sm

    will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples.
  • Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use

    .col-4

    .
  • Column

    width

    s are set in percentages, so they’re always fluid and sized relative to their parent element.
  • Columns have horizontal

    padding

    to create the gutters between individual columns, however, you can remove the

    margin

    from rows and

    padding

    from columns with

    .no-gutters

    on the

    .row

    .
  • To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
  • Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g.,

    .col-sm-4

    applies to small, medium, large, and extra large devices, but not the first

    xs

    breakpoint).
  • You can use predefined grid classes (like

    .col-4

    ) or Sass mixins for more semantic markup.

Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.

Three Equal Columns

Use the

.col

class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.

Example

col

col

col

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

Responsive classes

Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the

.col

and

.col-*

classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to

.col

.

col
col
col
col
col-8
col-4

Stacked to horizontal

Using a single set of

.col-sm-*

classes, you can create a basic grid system that starts out stacked before becoming horizontal with at the small breakpoint (

sm

).

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

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.


.col-12 .col-md-8
.col-6 .col-md-4

.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4

.col-6
.col-6

Bootstrap 4 Rows

Bootstrap 4 rows are horizontal slices of the screen. They are used only as wrappers for columns. To use them, you need the

.row

class.

They are only used for containing columns. If you place other elements inside the row along with columns you will not get the expected result.

They have to be placed in containers. Containers can hold any element, but a row must be placed inside a container. If you don’t do this, you will get a horizontal scroll on your page. This happens because rows have negative left and right margins of 15. The container has 15px paddings so it counteracts the margins.

The columns have to be children of the row. Otherwise they will not align. The rows and columns are created to work together in this strict hierarchy.

Bootstrap 5 - Responsive Blog Posts Grid Layout
Bootstrap 5 – Responsive Blog Posts Grid Layout

Two Unequal Responsive Columns

The following example shows how to get two various-width columns starting at tablets and scaling to large extra desktops:

Example

.col-sm-4

.col-sm-8

Tip: You will learn more about Bootstrap 4 grids later in this tutorial.

by Elena-Cristina Conacel

Learn the Bootstrap 4 Grid System in 10 Minutes

The Bootstrap 4 Grid System is used for responsive layouts.

A responsive layout represents the way elements align in the page on different resolutions. It is important you understand how to use the grid before learning about any other Bootstrap 4 component, because whatever element you use, you will need to place it somewhere on the screen.

Let’s get started!

Table of Contents

The Bootstrap 4 grid consists of containers, rows and columns. We will take them one by one and explain them.

Bootstrap 4 Containers

A Bootstrap 4 container is an element with the class

.container

. The container is the root of the Bootstrap 4 grid system and it is used to control the width of the layout.

The Bootstrap 4 container contains all the elements in a page. This means your page should have the following structure: first the body of the HTML page, inside of it you should add the container and all the other elements inside the container.


...


The simple

.container

class sets the width of the layout depending on the width of the screen. It places the content in the middle of the page aligning it horizontally. There is equal space between the Bootstrap 4 container and the left and the right edge of the page.

The

.container

scales down in width as the screen width narrows and becomes full-width on mobile. The width of the container is defined inside the Bootstrap 4 library for every screen size. You can see the exact sizes here.

A full-width container takes 100% of the screen size regardless of the screen width. To use it you need to add the class .

container-fluid

.

Hello! I am in a simple container.
Hello! I am in a full-width container.

You can view the CodePen here.

To see the differences between the two types of containers, you can open the pen in your console and switch between screen sizes.

Bootstrap 4 Rows

Bootstrap 4 rows are horizontal slices of the screen. They are used only as wrappers for columns. To use them, you need the

.row

class.

...

Here are the most important things you need to remember about Bootstrap 4 rows:

  • They are only used for containing columns. If you place other elements inside the row along with columns you will not get the expected result.
  • They have to be placed in containers. If you don’t do this, you will get a horizontal scroll on your page. This happens because rows have negative left and right margins of 15. The container has 15px paddings so it counteracts the margins.
  • The columns have to be children of the row. Otherwise they will not align. The rows and columns are created to work together in this strict hierarchy.

Bootstrap 4 Columns

We can now get to the nice part of this tutorial, the Bootstrap 4 columns. Columns are great! They help you divide the screen horizontally.

If you place a single column in your row, it will take up all the width. If you add two columns, they will each take 1/2 from the width. And so it goes for any number of columns.

...
...
...
...
...
...
...
...

You can see the code live on CodePen.

Side note: Columns are not coloured. I just added colours for a more visually compelling description/so they look pretty.

Setting Sizes for Columns

Using the

.col

class sets the width for the column dynamically. That means that depending on the number of columns in a row, the width of a column will be the width of the container divided by the number of columns.

But there is another way to define columns. You can use classes for columns and define their size.

By default, the Bootstrap 4 grid consists of 12 columns. You can select any size from 1 to 12 for your column. If you want 3 equal columns, you can use

.col-4

for each one (because 3*4 cols each = 12). Or you can set different sizes for them. Here are some examples:

...
...
...
...
...
...
...
...

You can see the code live on CodePen.

If the sum of the cols in your row doesn’t get to 12, then they don’t fill the whole row. If the sum of the columns goes beyond 12 then it will move to the next line. The first line will only display the first elements that add up to 12 or lower.

Setting Breakpoints for Columns

If you take the example above and want to display it on mobile, you may run into some problems. Displaying five columns on mobile will make the content unreadable.

This is where one of the most powerful Bootstrap 4 components comes into play. In order to have different layouts on different screens you won’t need to write media queries, instead you can use the column breakpoints.

A breakpoint is a Bootstrap 4 variable that stands for a screen resolution. When you are specifying a breakpoint for a class, you are telling the class to be active only for resolutions that are at least as big as the number that the breakpoint holds.

The simplest class that we will learn about is the

.col-[breakpoint]

class. When you use this class, you are defining the behaviour for the columns only when they are displayed on devices that have a resolution of at least the defined breakpoint. Up to the given breakpoint, your columns will align vertically by default. And after your breakpoint, they will align horizontally because of the class.

Bootstrap has 4 breakpoints that you can use:


  • .col-sm

    for larger mobile phones (devices with resolutions ≥ 576px);

  • .col-md

    for tablets (≥768px);

  • .col-lg

    for laptops (≥992px);

  • .col-xl

    for desktops (≥1200px)

Let’s say you want to display two columns one after another vertically on small screens and on the same line on bigger screens. You will need to specify the breakpoint where the columns go on the same line.

In our example we will use the

.col-lg

breakpoint and see how the columns look on different screens. For resolutions that are lower than the given breakpoint (<992px) the columns will be displayed vertically. This means that on mobile devices and tablets, the columns will look like this:

And for devices that have a resolution that is higher or equal to the breakpoint (≥992px) the columns will go on the same row. This means that on laptops and desktops you will get this result:

...
...

You can see the code live on CodePen. If you open the Codepen in another window and see the page at different resolutions, you will see the columns change their positioning.

If you wanted for the 2 columns to go on the same line starting with larger mobile phones you would use

.col-sm

, for tablets

.col-md

and for extra large screens

.col-xl

.

Setting Sizes and Breakpoints for Columns

You can combine the sizes and breakpoints and use a single class with the format

.col-[breakpoint]-[size]

.

For example, if you want three columns of different sizes to align on a row starting with the laptop resolution you need to do this:

...
...
...

You will get this result on resolutions <992px:

And for screens that are ≥992px:

Again, you can see the code live on CodePen.

But what if you want to display one column per row on small mobile resolutions, two columns per row on tablets and four on laptops or devices with higher resolutions?

Then you add multiple classes for a single column to describe the behaviour for every resolution. Using multiple classes, you specify that the content will take six slots on tablets and three on laptops.

...
...
...
...

The result will show like this on tablets:

And like this on laptops and higher resolutions:

This example is also live on CodePen.

As an exercise, you can try and create rows with different number of columns depending on the screensize and verify the behaviour in your browser console.

Offsetting Columns

If you don’t want your columns to be next to each other, you can use the class

.offset-[breakpoint]-[size]

together with the

.col-[breakpoint]-[size]

.

Using this class is the same as adding an empty column before your column. Here is a simple example:

...
...

You can see the code live on CodePen.

You can use the class on any column in the row. Here are some more examples:

...
...
...
...
...

Nesting Columns

This may come as a surprise, but you can add a row inside a column!

The row in question (which will have the width of its parent column) will then be divided into 12 (smaller) columns that you can reference through the

.col-*

classes.

Let’s take a look at what happens when we insert a new row inside a column:

...

...
...
...

You can see the code live on CodePen.

Knowing this, you can go many levels deep to organise your information. The columns will provide a simple way for you to manage your space.

This wraps up the basic knowledge regarding the Bootstrap 4 responsive grid system. If you have questions, please let me know in the comments, I will be glad to answer.

Further Reading

If you have more time, here are some useful resources:

  • Official Grid Documentation from GetBootstrap
  • Video Tutorial from Scrimba

This article was initially posted on the BootstrapBay Blog. It is part of a larger series of Bootstrap 4 tutorials called 14 Days of Bootstrap 4. If you want to continue learning about the Bootstrap 4 components, these articles are a good place to start.

And if you want to jump start your development with a Bootstrap template, you can check out our marketplace.

But before delving deeper, take a moment to celebrate your newly acquired skills!?

Bootstrap 4 Grid System

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.

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

Bootstrap 4 Containers

A Bootstrap 4 container is an element with the class

.container

. The container is the root of the Bootstrap 4 grid system and it is used to control the width of the layout. It contains all the elements in a page. This means you page should have the following structure: first the body of the HTML page, inside of it you add the container and all the other elements inside the container.

The simple

.container

class sets the width of the layout depending on the width of the screen. It places the content in the middle of the page aligning it horizontally. There is equal space between the Bootstrap 4 container and the left and the right edge of the page. The .

container

scales down in width as the screen width narrows and becomes full-width on mobile. The width of the container is defined inside the Bootstrap 4 library for every screen size. You can see the exact sizes here.

A full-width container takes 100% of the screen size regardless of the screen width. To use it you need to add the class .

container-fluid

. To see the differences between the 2 types of containers, you can open the following pen in your console and switch between screen sizes.

See the Pen Bootstrap 4 Containers by cristina (@cristinaconacel) on CodePen.dark

Hello! I am in a simple container.
Hello! I am in a full-width container.

Bootstrap 4 Columns

Basic Columns

See the Pen Bootstrap 4 Basic Columns by cristina (@cristinaconacel) on CodePen.dark

We can now get to the nice part of this tutorial, the Bootstrap 4 columns. Columns are great! They help you divide the screen horizontally. If you place a single column in your row, it will take up all the width. If you add two columns, they will each take 1/2 from the width. And so it goes for any number of columns.

Side note: Columns are not coloured. I just added colours for a more visually compelling description/so they look pretty.

Setting Sizes

Using the

.col

class sets the with for the column dynamically. That means that depending on the number of columns in a row, the width of a column will be the width of the container divided by the number of columns.

But there is another way to define columns. You can use classes for columns and define their size. By default, the Bootstrap 4 grid consists of 12 columns. You can select any size from 1 to 12 for your column. If you want 3 equal columns, you can use

.col-4

for each one (because 3*4 cols each = 12). Or you can set different sizes for them. Here are some examples:

See the Pen Bootstrap 4 Columns with Sizes by cristina (@cristinaconacel) on CodePen.dark

If the sum of the cols in your row doesn’t get to 12, then they don’t fill the whole row. And if it goes beyond 12 then it will move to the next line (it will only display the sum of the first elements <=12 on the first line).

Setting Breakpoints

If you take the example above and want to display it on mobile, you may run into some problems. Displaying 5 columns on mobile will make the content unreadable. This is where one of the most powerful Bootstrap 4 components comes into play. In order to have different layouts on different screens you won’t need to write media queries, instead you can use the column breakpoints.

Let’s say you want to display, for example, 2 columns one after another vertically on small screens and on the same line on bigger screens. You will need to specify the breakpoint where the columns go on the same line.

In our example, we want the columns to arrange horizontally starting with the laptop. The breakpoint for the laptop resolution is

.col-lg

. If you open the Codepen in another window and see the page with a higher resolution, you will see the columns being aligned horizontally.

See the Pen Bootstrap 4 Columns with Breakpoints by cristina (@cristinaconacel) on CodePen.dark

The breakpoint for laptops is

.col-lg

. The code for this example looks like this:

If you wanted for the 2 columns to go on the same line starting with larger mobile phones (>= 576px) you would use .

col-sm

, for tablets (>= 768px) .

col-md

and for extra large screens (>= 1200px) .

col-xl

.

It is useful to keep in mind that up to the given breakpoint, your columns will align vertically. This is one example of the fact that Bootstrap 4 is mobile-first. The default styling is for mobile devices and you specifically need to write what’s the behaviour for bigger screens. And for the resolutions bigger than your breakpoint they will align horizontally.

Setting Sizes and Breakpoints

You can combine the sizes and breakpoints and use a single class with the format

.col-[breakpoint]-[size]

. For example, if you want 3 columns of different sizes to align on a row starting with the laptop resolution you need to do this:

And the result will look like this:

See the Pen Bootstrap 4 Columns with Sizes and Breakpoints by cristina (@cristinaconacel) on CodePen.dark

But what if you want to display 1 column per row on mobile devices, 2 columns per row on tablets and 4 starting with laptops? Then you add multiple classes for a single column to describe the behaviour for every resolution. Using multiple classes, you specify that the content will take 6 slots on tablets and 3 on laptops. The result will show like this:

See the Pen Bootstrap 4 Columns with Multiple Breakpoints by cristina (@cristinaconacel) on CodePen.dark

Please open the CodePen on different screen sizes to see the differences. And here is the code behind it:

As an exercise, you can try and create rows with different number of columns depending on the screensize on your own. You can fork the CodePen above and see its behaviour in your browser console.

Offsetting Columns

If you don’t want your columns to be next to each other, you can use the class

.offset-[breakpoint]-[size]

together with the

.col-[breakpoint]-[size]

. Using this class is the same as adding an empty column before your column. Here is a simple example:

See the Pen Bootstrap 4 Offsetting Columns by cristina (@cristinaconacel) on CodePen.dark

You can use the class on any column in the row. Here are some more examples:

See the Pen Bootstrap 4 Offsetting Multiple Columns by cristina (@cristinaconacel) on CodePen.dark

Nesting Columns

This may come as a surprise, but you can add a row inside a column. That row (which will have the width of its parent column) will then be divided into 12 (smaller) columns that you can reference through the

.col-*

classes. Let’s take a look at what happens when we add a new row in a column:

See the Pen Bootstrap 4 Nesting Columns by cristina (@cristinaconacel) on CodePen.dark

This wraps up the basic knowledge regarding the Bootstrap 4 responsive grid system. This is a very important piece when learn to design responsively. If you have questions, please let me know in the comments, I will be glad to answer. I hope you will celebrate your achievement 🙂

Photo credit to Jonas Mosesson for his shot.

CSS Grid cơ bản cho người mới toàn tập phần 1
CSS Grid cơ bản cho người mới toàn tập phần 1

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

Basic Structure of a Bootstrap 4 Grid

The following is a basic structure of a Bootstrap 4 grid:

First example: create a row (). Then, add the desired number of columns (tags with appropriate

.col-*-*

classes). The first star (*)
represents the responsiveness: sm, md, lg or xl, while the second star
represents a number, which should always add up to 12 for each row.

Second example: instead of adding a number to each

col

, let bootstrap handle
the layout, to create equal width columns: two

"col"

elements = 50% width to
each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You
can also use

.col-sm|md|lg|xl

to make the columns responsive.

Bootstrap 4 Page sizes for UI designers grid system in xd(web designing full course in hindi)Part #4
Bootstrap 4 Page sizes for UI designers grid system in xd(web designing full course in hindi)Part #4

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

.

No Gutters

Add the

.no-gutters

class to the

.row

container to remove gutters (extra space):

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

What is the difference among

col-lg-*

,

col-md-*

and

col-sm-*

in Twitter Bootstrap?

What is the difference among

  • 1See getbootstrap.com/css for the

    px

    dimensions of each. Nov 8, 2013 at 17:35
  • 8that I know but do not understand it’s effect Nov 8, 2013 at 17:37
  • I find it confusing this question has

    bootstrap-3

    and

    bootstrap-4

    as a tag since they are entirely different Nov 14, 2018 at 19:09
Responsive Service Box Using CSS Grid Layout
Responsive Service Box Using CSS Grid Layout

Responsive 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

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

.

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

Bootstrap 3

The Bootstrap 3 grid comes in 4 tiers (or “breakpoints”)…

  • Extra small (for smartphones

    .col-xs-*

    )
  • Small (for tablets

    .col-sm-*

    )
  • Medium (for laptops

    .col-md-*

    )
  • Large (for laptops/desktops

    .col-lg-*

    ).

These grid sizes enable you to control grid behavior on different widths. The different tiers are controlled by CSS media queries.

So in Bootstrap’s 12-column grid…


col-sm-3

is 3 of 12 columns wide (25%) on a typical small device width (> 768 pixels)


col-md-3

is 3 of 12 columns wide (25%) on a typical medium device width (> 992 pixels)

The smaller tier (

xs

,

sm

or

md

) also defines the size for larger screen widths. So, for the same size column on all tiers, just set the width for the smallest viewport…

..


is the same as,

..

Larger tiers are implied. Because

col-sm-3

means

3 units on sm-and-up

, unless specifically overridden by a larger tier that uses a different size.


xs

(default) > overridden by

sm

> overridden by

md

> overridden by

lg

Combine the classes to use change column widths on different grid sizes. This creates a responsive layout.

..

The

sm

,

md

and

lg

grids will all “stack” vertically on screens/viewports less than 768 pixels. This is where the

xs

grid fits in. Columns that use the

col-xs-*

classes will not stack vertically, and continue to scale down on the smallest screens.

Resize your browser using this demo and you’ll see the grid scaling effects.

This article explains more about how the Bootstrap grid

  • 8What is the effect of nesting col-sm within a col-md? How would that change the behavior of col-sm and col-md?– DonatoApr 3, 2015 at 17:29
  • 1It causes the nested

    sm

    remain in columns at narrower widths. Try for yourself: codeply.com/go/LGyFiEJqXq Apr 3, 2015 at 18:46
  • @Skelly, may I ask you to have a look at a responsive design related question here : tinyurl.com/nadfh2u ? Apr 12, 2015 at 14:59
  • Why is

    ..


    the same as

    ..


    and not

    ..


    (xx-3 for all)?– jbyrdMar 13, 2017 at 16:12

  • Thanks.. I fixed that:

    ..


    is the same as

    ..


    Mar 13, 2017 at 16:24

The bootstrap docs do explain it, but it still took me a while to get it. It makes more sense when I explain it to myself in one of two ways:

If you think of the columns starting out horizontally, then you can choose when you want them to stack.

For example, if you start with columns: A B C

You decide when should they stack to be like this:

If you choose col-lg, then the columns will stack when the width is < 1200px.

If you choose col-md, then the columns will stack when the width is < 992px.

If you choose col-sm, then the columns will stack when the width is < 768px.

If you choose col-xs, then the columns will never stack.

On the other hand, if you think of the columns starting out stacked, then you can choose at what point they become horizontal:

If you choose col-sm, then the columns will become horizontal when the width is >= 768px.

If you choose col-md, then the columns will become horizontal when the width is >= 992px.

If you choose col-lg, then the columns will become horizontal when the width is >= 1200px.

  • 47This answer explains it best. At least for me it did. This was all i needed to know: “If you choose col-lg, then the columns will stack when the width is < 1200px.”. Thanks!– Jo SmoSep 1, 2016 at 17:03
  • 5This is how you explain in an elevator ride and still get your explanation understood. Oct 3, 2016 at 21:37
  • I know this is old, so it doesn’t matter what col-* i choose it will stack eventually on different sizes?– nullFeb 8, 2018 at 16:28
  • 3This just revamped my understanding of Bootstrap.– kds23May 19, 2018 at 9:27
  • Fantastic explanation! You should consider making some tutorials! You seem to have a knack of making things simple to understand! 🙂 Aug 30, 2021 at 15:35

From Twitter Bootstrap documentation:

  • small grid (≥ 768px) =

    .col-sm-*

    ,
  • medium grid (≥ 992px) =

    .col-md-*

    ,
  • large grid (≥ 1200px) =

    .col-lg-*

    .

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

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

Bootstrap 4 Grid Examples

Below we have collected some examples of Bootstrap 4 grid layouts.

Learn Flexbox CSS in 8 minutes
Learn Flexbox CSS in 8 minutes

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

.

Stacked to Horizontal

The following example shows how to create a column layout that starts out stacked on extra small devices, before becoming horizontal on larger devices (sm, md, lg and xl):

Example

col-sm-9

col-sm-3

col-sm

col-sm

col-sm

Bootstrap 5 Crash Course
Bootstrap 5 Crash Course

More Equal Columns

Example

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4

1 of 6

2 of 6

3 of 6

4 of 6

5 of 6

6 of 6

Responsive Columns

The following example shows how to create four equal-width columns starting at tablets and scaling to extra large desktops. On mobile phones or screens that are less than 576px wide, the columns will automatically stack on top of each other:

Example

.col-sm-3

.col-sm-3

.col-sm-3

.col-sm-3

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

Grid Options

The following table summarizes aspects of how Bootstrap 4 grid system works across multiple devices −

Extra small devices (<576px) Small devices (≥576px) Medium devices (≥768px) Large devices (≥992px) Extra Large devices (≥1200px)
Grid behavior 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
Max container width None (auto) 540px 720px 960px 1140px
Class classes .col- .col-sm- .col-md- .col-lg- .col-xl-
# 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
Column ordering Yes Yes Yes Yes Yes

Basic Grid Structure

Following is basic structure of Bootstrap 4 grid −

Basic Structure of a Bootstrap 4 Grid

The following is a basic structure of a Bootstrap 4 grid:

First example: create a row (). Then, add the desired number of columns (tags with appropriate

.col-*-*

classes). The first star (*)
represents the responsiveness: sm, md, lg or xl, while the second star
represents a number, which should always add up to 12 for each row.

Second example: instead of adding a number to each

col

, let bootstrap handle
the layout, to create equal width columns: two

"col"

elements = 50% width to
each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You
can also use

.col-sm|md|lg|xl

to make the columns responsive.

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

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

Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Working of Grid System

  • Rows must be placed within a .container class for proper alignment and padding.

  • For responsive width use .container class and for fixed width across all viewport, use the .container-fluid class.

  • Use rows to create horizontal groups of columns.

  • Content should be placed within the columns, and only columns may be the immediate children of rows.

  • Columns contain padding for controlling the space between them.

  • If you place more than 12 columns in a row, then the columns will be placed in a new line.

  • Columns create gaps between column content via padding. Therefore, you can remove the margin from rows and padding from columns with .no-gutters class on the row.

  • You can make grid system responsive by using five grid breakpoints such as extra small, small, medium, large, and extra large.

  • Predefined grid classes like .col-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.

Bootstrap For Beginners | Grid system - 2024
Bootstrap For Beginners | Grid system – 2024

Let’s un-complicate Bootstrap!

Notice how the col-sm occupies the 100% width (in other terms breaks into new line) below

576px

but col doesn’t. You can notice the current width at the top center in gif.

Here comes the code:

col
col
col
col-sm
col-sm
col-sm

Bootstrap by default aligns all the columns(col) in a single row with equal width. In this case three

col

will occupy 100%/3 width each, whatever the screen size. You can notice that in gif.

Now what if we want to render only one column per line i.e give 100% width to each column but for smaller screens only? Now comes the

col-xx

classes!

I used

col-sm

because I wanted to break the columns into separate lines below 576px. These 4

col-xx

classes are provided by Bootstrap for different display devices like mobiles, tablets, laptops, large monitors etc.

So,

col-sm

would break below 576px,

col-md

would break below 768px,

col-lg

would break below 992px and

col-xl

would break below 1200px

Note that there’s no


col-xs

class in bootstrap 4.

This pretty much sums-up. You can go back to work.

But there’s bit more to it. Now comes the

col-*

and

col-xx-*

for customizing width.

Remember in the above example I mentioned that

col

or

col-xx

takes the equal width in a row. So if we want to give more width to a specific

col

we can do this.

Bootstrap row is divided into 12 parts, so in above example there were 3

col

so each one takes 12/3 = 4 part. You can consider these parts as a way to measure width.

We could also write that in format

col-*

i.e.

col-4

like this :

col
col
col

And it would’ve made no difference because by default bootstrap gives equal width to

col

(4 + 4 + 4 = 12).

But, what if we want to give 7 parts to 1st

col

, 3 parts to 2nd

col

and rest 2 parts (12-7-3 = 2) to 3rd

col

(7+3+2 so total is 12), we can simply do this:

col-7
col-3
col-2

and you can customize the width of

col-xx-*

classes also.

col-sm-7
col-sm-3
col-sm-2

How does it look in the action?

What if sum of

col

is more than 12? Then the

col

will shift/adjust to below line. Yes, there can be any number of columns for a row!

col-12
col-9
col-6
col-6

What if we want 3 columns in a row for large screens but split these columns into 2 rows for small screens?

col-12 col-sm TOP
col col-sm
col col-sm

You can play around here: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

  • 6Thank you for the clear explanation, elaborate answer with animations and several examples.– ShaOct 11, 2020 at 13:37
  • 1Excellent explanation. Thanks! Feb 24, 2021 at 1:10

I think the confusing aspect of this is the fact that BootStrap 3 is a mobile first responsive system and fails to explain how this affects the col-xx-n hierarchy in that part of the Bootstrap documentation. This makes you wonder what happens on smaller devices if you choose a value for larger devices and makes you wonder if there is a need to specify multiple values. (You don’t)

I would attempt to clarify this by stating that… Lower grain types (xs, sm) attempt retain layout appearance on smaller screens and larger types (md,lg) will display correctly only on larger screens but will wrap columns on smaller devices. The values quoted in previous examples refer to the threshold as which bootstrap degrades the appearance to fit the available screen estate.

What this means in practice is that if you make the columns col-xs-n then they will retain correct appearance even on very small screens, until the window drops to a size that is so restrictive that the page cannot be displayed correctly. This should mean that devices that have a width of 768px or less should show your table as you designed it rather than in degraded (single or wrapped column form). Obviously this still depends on the content of the columns and that’s the whole point. If the page attempts to display multiple columns of large data, side by side on a small screen then the columns will naturally wrap in a horrible way if you did not account for it. Therefore, depending on the data within the columns you can decide the point at which the layout is sacificed to display the content adequately.

e.g. If your page contains three col-sm-n columns bootstrap would wrap the columns into rows when the page width drops below 992px. This means that the data is still visible but will require vertical scrolling to view it. If you do not want your layout to degrade, choose xs (as long as your data can be adequately displayed on a lower resolution device in three columns)

If the horizontal position of the data is important then you should try to choose lower granularity values to retain the visual nature. If the position is less important but the page must be visible on all devices then a higher value should be used.

If you choose col-lg-n then the columns will display correctly until the screen width drops below the xs threshold of 1200px.

  • 6I guess this is what the OP was asking for (not the raw numbers), but got flamed upon. Jul 3, 2015 at 11:47
  • I agree this should be the accepted answer as it states exactly the behaviour of the different sizes.– MaxFeb 8, 2017 at 7:11

TL;DR


.col-X-Y

means on screen size X and up, stretch this element to fill Y columns.

Bootstrap provides a grid of 12 columns per

.row

, so Y=3 means width=25%.


xs, sm, md, lg

are the sizes for smartphone, tablet, laptop, desktop respectively.

The point of specifying different widths on different screen sizes is to let you make things larger on smaller screens.

Example

Meaning: 50% width on Desktops, 100% width on Mobile, Tablet, and Laptop.

Device Sizes and class prefix:

  • Extra small devices Phones (<768px) –

    .col-xs-
  • Small devices Tablets (≥768px) –

    .col-sm-
  • Medium devices Desktops (≥992px) –

    .col-md-
  • Large devices Desktops (≥1200px) –

    .col-lg-

Grid options:

Reference: Grid System


.col-xs-$ Extra Small Phones Less than 768px .col-sm-$ Small Devices Tablets 768px and Up .col-md-$ Medium Devices Desktops 992px and Up .col-lg-$ Large Devices Large Desktops 1200px and Up

One particular case : Before learning bootstrap grid system, make sure browser zoom is set to 100% (a hundred percent). For example : If screen resolution is (1600px x 900px) and browser zoom is 175%, then “bootstrap-ped” elements will be stacked.

HTML

class="col-lg-4"
class="col-lg-4"

Chrome zoom 100%

Browser 100 percent – elements placed horizontally

Chrome zoom 175%

well it’s used to tell bootstrap how many columns are to be placed in a row depending on the screen size-


col-xs-2

would show only 2 columns in a row in extra small(xs) screen, in the same way as sm defines a small screen, md(medium sized), lg(large sized), but according to bootstrap smaller first rule, if you mention


xs-col-2 md-col-4

then 2 columns would be shown in every row for screen sizes from xs upto sm(included) and changes when it gets next size i.e. for md up to lg(included) for a better understanding of screen sizes try running them in various screen modes in chrome’s developer mode(ctr+shift+i) and try various pixels or devices

  • Bootstrap 4 Tutorial
  • Bootstrap 4 – Home
  • Bootstrap 4 – Overview
  • Bootstrap 4 – Environment Setup
  • Bootstrap 4 – Layout
  • Bootstrap 4 – Grid System
  • Bootstrap 4 – Content
  • Bootstrap 4 – Components
  • Bootstrap 4 – Utilities
  • Differences Between Bootstrap 3 and 4
  • Bootstrap 4 Useful Resources
  • Bootstrap 4 – Quick Guide
  • Bootstrap 4 – Useful Resources
  • Bootstrap 4 – Discussion

Bootstrap 4 – Grid System

Example of Grid System

Following is an example of Bootstrap 4 grid system −

Example



<br /> Bootstrap 4 Example<br />
.grid_system div[class^=”col”] { border: 1px solid white; background: #e4dcdc; text-align: center; padding-top: 5px; padding-bottom: 5px }

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-3
.col-sm-3
.col-sm-6
.col-sm-5
.col-sm-7
.col-sm-6
.col-sm-6
.col-sm-12



It will produce the following result −

Output

Bootstrap 4 Tutorial #6 - Flex Grid
Bootstrap 4 Tutorial #6 – Flex Grid

Sass mixins

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.


$grid-columns: 12; $grid-gutter-width: 30px; $grid-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone sm: 576px, // Medium screen / tablet md: 768px, // Large screen / desktop lg: 992px, // Extra large screen / wide desktop xl: 1200px ); $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px );

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.


// Creates a wrapper for a series of columns @include make-row(); // Make the element grid-ready (applying everything but the width) @include make-col-ready(); @include make-col($size, $columns: $grid-columns); // Get fancy by offsetting, or changing the sort order @include make-col-offset($size, $columns: $grid-columns);

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.


.example-container { width: 800px; @include make-container(); } .example-row { @include make-row(); } .example-content-main { @include make-col-ready(); @include media-breakpoint-up(sm) { @include make-col(6); } @include media-breakpoint-up(lg) { @include make-col(8); } } .example-content-secondary { @include make-col-ready(); @include media-breakpoint-up(sm) { @include make-col(6); } @include media-breakpoint-up(lg) { @include make-col(4); } }

Main content
Secondary content

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 Tutorial for Beginners | Using the Bootstrap 4 Grid Practically
Bootstrap 4 Tutorial for Beginners | Using the Bootstrap 4 Grid Practically

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns

One of three columns
One of three columns
One of three columns

Horizontal alignment

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns

No gutters

The gutters between columns in our predefined grid classes can be removed with

.no-gutters

. This removes the negative

margin

s from

.row

and the horizontal

padding

from all immediate children columns.

Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via attribute selector. While this generates a more specific selector, column padding can still be further customized with spacing utilities.

Need an edge-to-edge design? Drop the parent

.container

or

.container-fluid

.


.no-gutters { margin-right: 0; margin-left: 0; > .col, > [class*="col-"] { padding-right: 0; padding-left: 0; } }

In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

Subsequent columns continue along the new line.

.col-9
.col-4Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6Subsequent columns continue along the new line.

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with

width: 100%

wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple

.row

s, but not every implementation method can account for this.

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

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

You may also apply this break at specific breakpoints with our responsive display utilities.

.col-6 .col-sm-4
.col-6 .col-sm-4

.col-6 .col-sm-4
.col-6 .col-sm-4

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 Grids

How to use the Bootstrap 4 grid -  Demo site
How to use the Bootstrap 4 grid – Demo site

Keywords searched by users: bootstrap 4 grid tutorial

Using The Bootstrap 4 Grid | Bootstrap 4 Tutorial - Youtube
Using The Bootstrap 4 Grid | Bootstrap 4 Tutorial – Youtube
Bootstrap 4 | Grid System - Geeksforgeeks
Bootstrap 4 | Grid System – Geeksforgeeks
Using The Bootstrap 4 Grid | Bootstrap 4 Tutorial - Youtube
Using The Bootstrap 4 Grid | Bootstrap 4 Tutorial – Youtube
Bootstrap 4 Tutorial In Hindi Part 4: Bootstrap 4 Grid System Explained In  Hindi - Youtube
Bootstrap 4 Tutorial In Hindi Part 4: Bootstrap 4 Grid System Explained In Hindi – Youtube
Bootstrap 4 Tutorial
Bootstrap 4 Tutorial
Bootstrap 4 Tutorial For Beginners | Using The Bootstrap 4 Grid - Youtube
Bootstrap 4 Tutorial For Beginners | Using The Bootstrap 4 Grid – Youtube
Learn Bootstrap 4 Tutorial For Beginners | Navbar In Bootstrap 4 - Mind  Luster
Learn Bootstrap 4 Tutorial For Beginners | Navbar In Bootstrap 4 – Mind Luster
Bootstrap Tutorial – Grid System (Video) – Bootstrapbay
Bootstrap Tutorial – Grid System (Video) – Bootstrapbay
Understanding The Bootstrap Grid System(Part 1) | Tutorial - 4 - Youtube
Understanding The Bootstrap Grid System(Part 1) | Tutorial – 4 – Youtube
Tutorial 4: Understanding The Bootstrap Grid System (Columns) | Hfarazm
Tutorial 4: Understanding The Bootstrap Grid System (Columns) | Hfarazm
Creating A Grid Of Photos - Bootstrap Video Tutorial | Linkedin Learning,  Formerly Lynda.Com
Creating A Grid Of Photos – Bootstrap Video Tutorial | Linkedin Learning, Formerly Lynda.Com

See more here: kientrucannam.vn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *