Bootstrap 4 tutorial: Layout (1): Overview / Grid System / Utilities for layout

Name	Viewport width	Width of `.container`
(xs)	<576px	Browser default (auto)
sm	≧576px	540px
md	≧768px	720px
lg	≧992px	960px
xl	≧1200px	1140px

Z-index	Usage
1,2,3	Internally used for element states (hover, active, focus)
1000	Dropdown
1020	Sticky top (Navbar)
1030	Fixed top / Fixed bottom (Navbar)
1040	Backdrop (Modal background)
1050	Modal
1060	Popover
1070	Tooltip

Caution: You should take care for changing horizontal margins or paddings from grid system defaults. Especially, changing margins of rows, or changing paddings of columns can corrupt layouts easily.

Equal-width

Setting multiple columns div.col inside a row div.row arranges columns horizontally with the same width. A maximum number of columns in a row is determined by a browser from widths of a row and colomns. See examples below (up to 20 columns).

Examples set gray borders (.border) to columns div.col* to indicate boundaries. Areas of inner contents also set background colors (.bg-light) to indicate gutters.

1/1

1/2

2/2

1/3

2/3

3/3

1/4

2/4

3/4

4/4

1/5

2/5

3/5

4/5

5/5

1/6

2/6

3/6

4/6

5/6

6/6

1/7

2/7

3/7

4/7

5/7

6/7

7/7

1/8

2/8

3/8

4/8

5/8

6/8

7/8

8/8

1/9

2/9

3/9

4/9

5/9

6/9

7/9

8/9

9/9

1/10

2/10

3/10

4/10

5/10

6/10

7/10

8/10

9/10

10/10

1/11

2/11

3/11

4/11

5/11

6/11

7/11

8/11

9/11

10/11

11/11

1/12

2/12

3/12

4/12

5/12

6/12

7/12

8/12

9/12

10/12

11/12

12/12

1/13

2/13

3/13

4/13

5/13

6/13

7/13

8/13

9/13

10/13

11/13

12/13

13/13

1/14

2/14

3/14

4/14

5/14

6/14

7/14

8/14

9/14

10/14

11/14

12/14

13/14

14/14

1/15

2/15

3/15

4/15

5/15

6/15

7/15

8/15

9/15

10/15

11/15

12/15

13/15

14/15

15/15

1/16

2/16

3/16

4/16

5/16

6/16

7/16

8/16

9/16

10/16

11/16

12/16

13/16

14/16

15/16

16/16

1/17

2/17

3/17

4/17

5/17

6/17

7/17

8/17

9/17

10/17

11/17

12/17

13/17

14/17

15/17

16/17

17/17

1/18

2/18

3/18

4/18

5/18

6/18

7/18

8/18

9/18

10/18

11/18

12/18

13/18

14/18

15/18

16/18

17/18

18/18

1/19

2/19

3/19

4/19

5/19

6/19

7/19

8/19

9/19

10/19

11/19

12/19

13/19

14/19

15/19

16/19

17/19

18/19

19/19

1/20

2/20

3/20

4/20

5/20

6/20

7/20

8/20

9/20

10/20

11/20

12/20

13/20

14/20

15/20

16/20

17/20

18/20

19/20

20/20

The following structure is used (containers div.container are omitted from here).

Row div.row
- Column div.col (× number of columns: 1..16)
  - Text {index}/{number of columns}

Equal-width multi-row

For equal-width layouts using div.col, use an empty div.w-100 to insert a break to a new line.

.row

.row⇒ .w-100

.row

.row⇒ .w-100

.row

Structure

div.row
- div.col (×2)
- div.w-100 (breaks to a new line)
- div.col (×3)
- div.w-100 (breaks to a new line)
- div.col (×4)

Setting one column width

Width of a grid column can be set from 1/12 (approx. 8.3%) to 12/12 (100%).

div.col-(1|2|3|4|5|6|7|8|9|10|11|12)

.col-1

.col-2

.col-3

.col-4

.col-5

.col-6

.col-7

.col-8

.col-9

.col-10

.col-11

.col-12

Mixing fixed-width and equal-width

.col 1/6(equal)

.col-6 6/12(set)

.col 1/6(equal)

.col 7/36(equal)

.col-5 5/12(set)

.col 7/36(equal)

Structure

div.row
- div.col
- div.col-6
- div.col (×2)
div.row
- div.col (×2)
- div.col-5
- div.col

Variable width content

.col-auto sets an element width to browser default (by CSS width: auto; ). A width of a element is automatically calculated by a browser from its inner content.

.col-auto 123

.col-auto 1234567890

.col-auto 12345678901234567890

An example of the official document is a complex combination with responsive and flexbox (explained later ⇒ Variable width content with flex )。

Column wrapping

Setting 12 or more columns in total automatically breaks to a next line.

.col-9

.col-4

.col-7

.col-3

Structure

div.row
- div.col-9
- div.col-4 breaks by being greater than 12
- div.col-7
- div.col-3 breaks by being greater than 12

Column breaks

On setting each width to columns, div.w-100 also can be used to insert a break to a new line.

.col-3

.col-5⇒ .w-100

.col-4

Structure

div.row
- div.col-3
- div.col-5
- div.w-100 (inserts a break)
- div.col-4

Responsive classes

.col-(sm|md|lg|xl)(-1|-2|-3|...|-12|-auto)?

Example 1: Equal-widths

.col (always two columns)

.col

.col-sm (two columns on width≧576px, two rows on width<576px)

.col-sm

.col-md (two columns on width≧768px, two rows on width<768px)

.col-md

.col-lg (two columns on width≧992px, two rows on width<992px)

.col-lg

.col-xl (two columns on width≧1200px, two rows on width<1200px)

.col-xl

Structure

div.row
- div.col(-sm|-md|-lg|-xl)? (×2)

Example 2: Setting columns widths

.col-3

.col-6

.col-sm-3

.col-sm-6

.col-md-3

.col-md-6

.col-lg-3

.col-lg-6

.col-xl-3

.col-xl-6

Structure

div.row
- div.col(-sm|-md|-lg|-xl)?-3
- div.col(-sm|-md|-lg|-xl)?-6

Example 3: Variable width contents

.col-auto 12345

.col-auto 12345678901234567890

.col-sm-auto 12345

.col-sm-auto 12345678901234567890

.col-md-auto 12345

.col-md-auto 12345678901234567890

.col-lg-auto 12345

.col-lg-auto 12345678901234567890

.col-xl-auto 12345

.col-xl-auto 12345678901234567890

Structure

div.row
- div.col(-sm|-md|-lg|-xl)?-auto (×2)
  - Text (two different lengths)

Switching layouts

The next example demonstrates switching between stacked (as mobile) and horizontal (as PC) layouts on the md breakpoint (768px) as follows.

Mobile

1-1

1-2

2-1

2-2

2-3

1-1

1-2

2-1

2-2

2-3

Live example below (change the browser window width to switch).

1-1 .col-md-8

1-2 .col-md-4

2-1 .col-md

2-2 .col-md

2-3 .col-md

Structure

div.row
- div.col-md-8
- div.col-md-4
div.row
- div.col-md (×3)

Mix and match

Another example of layout switching on the md breakpoint.

Mobile

1-1

1-2

2-1

2-2

2-3

3-1

3-2

1-1

1-2

2-1

2-2

2-3

3-1

3-2

Live example below

1-1 .col-12.col-md-8

1-2 .col-6.col-md-4

2-1 .col-6.col-md-4

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

2-3 .col-6.col-md-4

3-1 .col-6

3-2 .col-6

Variable width contents with flex

A complex example using auto-width, flexbox, and responsive behaviors (from the official document).

Adds .justify-content-md-center (⇒ Flex) to rows div.row (aligns inner elements center on ≥md)
Adds .col-md-auto to the central row of each column (sets browser default width on ≥md)
Adds .col to the lower-left column (equal or available maximum width)
Adds .col.col-lg-2 to all other columns (equal width as default, 2/12 on ≥md)

Live example below (central rows .col-md-auto are shown with orange background)

1-1 .col.col-lg-2

1-2 .col-md-auto

1-3 .col.col-lg-2

2-1 .col

2-2 .col-md-auto

2-3 .col.col-lg-2

Responsive behaviors (three cases)

sm(<768px)

1-1

1-2

1-1

2-1

2-2

2-1

lg(≥992px)

1-1

1-2

1-3

2-1

2-2

2-3

md(768px≤width<992px)

1-1

1-2

1-3

2-1

2-2

2-3

Alignment

Use Flex utilities.

Vertical alignment

In examples below, red border is added and height is fixed to 5rem for each row.

.row.align-items-start

.col (1/3)

.col (2/3)

.col (3/3)

.row.align-items-center

.col (1/3)

.col (2/3)

.col (3/3)

.row.align-items-end

.col (1/3)

.col (2/3)

.col (3/3)

.col.align-self-(start|center|end)

-start

-center

-end

Horizontal alignment

.row.justify-content-start

.col-2 (1/3)

.col-2 (2/3)

.col-2 (3/3)

.row.justify-content-center

.col-2 (1/3)

.col-2 (2/3)

.col-2 (3/3)

.row.justify-content-end

.col-2 (1/3)

.col-2 (2/3)

.col-2 (3/3)

.row.justify-content-around

.col-2 (1/3)

.col-2 (2/3)

.col-2 (3/3)

.row.justify-content-between

.col-2 (1/3)

.col-2 (2/3)

.col-2 (3/3)

No gutters

Adding .no-gutters to div.row removes gutters from a row.

div.row

.col-9

.col-3

div.row.no-gutters

.col-9

.col-3

Actual internal behavior is more complex (not just removes gutters: Also see Gutters for details).

div.row.no-gutters
- Removes horizontal (negative) margins (-15px to 0) ⇒ margin-(left|right): 0
  - Applied parent (container) paddings (results to 30px smaller width)
- Also removes child-columns' gutters (using the child combinator >)
  - (pseudo code) .no-gutters > .col* { padding-(left|right): 0 }

The next example is based on the official document.

div.row

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

.col-6.col-md-4

div.row.no-gutters

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

.col-6.col-md-4

It is also an example of responsive behaviors (three cases).

xs(<576px)

md or greater (≥768px)

sm(576px≤width<768px)

Order classes

You can change columns' order with adding .order-(1|2|3|...|12) (⇒ Flex utilities ).

.order-12

.order-1

(none)

.order-7

Structure

div.row
- div.col.order-12
- div.col.order-1
- div.col
- div.col.order-7

Use .order-first to set at first, .order-last to set at last.

(none)

.order-last

.order-first

Structure

div.row
- div.col
- div.col.order-last
- div.col.order-first

Offsetting columns

Offset classes

.offset-(1|2|3|...) sets offset spacing on the left as the same width as .col-(1|2|3...)

.col-4

.offset-4.col-4

Structure

div.row
- div.col-4
- div.offset-4.col-4

.offset-3.col-3

Structure

div.row
- div.offset-3.col-3
- div.offset-3.col-3

.offset-3.col-6

Structure

div.row
- div.offset-3.col-6

Responsive offset: .offset-(xl|lg|md|sm)-(1|2|3|...)

An example below is based on the official document (difficult).

1L
.col-sm-5
.col-md-6

1R
.offset-sm-2.col-sm-5
.offset-md-0.col-md-6

2L
.col-sm-6
.col-md-5
.col-lg-6

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

Overall conditions

	xs	sm	md	lg,xl		xs	sm	md	lg,xl
1st row, left (1L)	None (12/12)	5/12	6/12		1st row, right (1R)	None (12/12)	Offset 2 and 5/12	Offset 0 ^[Note] and 6/12
2nd row, left (2L)	None (12/12)	6/12	5/12	6/12	2nd row, right (2R)	None (12/12)	6/12	Offset 2 and 5/12	Offset 0 ^[Note] and 6/12

Note: Setting responsive offsets to zero (looks like useless) is required. They are needed to cancel offsets by lower breakpoints.

Resposive behaviors (four cases)

xs(<576px)

sm(576px≤width<768px)

md(768px≤width<992px)

lg,xl(≥992px)

Margin utilities

An example below (from the official document) shows how to use spacing utilities for responsive grid layouts (advanced).

1L .col-md-4

1R .col-md-4.ml-auto

2L .col-md-3.ml-md-auto

2R .col-md-3.ml-md-auto

3L .col-auto.mr-auto

3R .col-auto

Overall conditions

	< md	≧ md		< md	≧ md
1st row, left (1L)	None (12/12)	4/12	1st row, right (1R)	None (12/12)	4/12 Left margin `auto`
2nd row, right (2L)	None (12/12)	3/12 Left margin `auto`	2nd row, right (2R)	None (12/12)	3/12 Left margin `auto`
3rd low, left (3L)	Width `auto` Right margin `auto`		3rd row, right (3R)	Width `auto`

Responsive behaviors

xs, sm (<768px)

md, lg, xl (≥768px)

Nesting

You can nest grid row/column structures with inserting div.row(-*)'s to div.col(-*)'s (in any level but practically once). It is typically required to make eight (any number that does not divide 12) column layouts with mutiple span(s). See the example below.

Structure

div.row
- div col-6 (Top-left half)
  - div.row (nests and re-divides inner)
    - div.col-3 (×4)
      - div.bg-light
        
        Text (1|2|3|4)
div.row
- div.col-6.offset-6 (Bottom-right half)
  - div.row (nests and re-divides inner)
    - div.col-3 (×4)
      - div.bg-light
        
        Text (5|6|7|8)

The example below shows structural details of the above.

Added borders
Light green background to outer div.row
Pink background to inner div.row
Addded slight vertical paddings to show nesting levels

Grid nesting tends to be complex and you can avoid it for most cases. For example, if you (just) want 8-column grids, using equal-width class is more suitable.

Utilities for layout

Showing/Hiding elements ⇒ Display
Layout using flexbox ⇒ Flex
Setting margins and/or paddings ⇒ Spacing
Showing/Hiding elements without changing layout ⇒ Visibility

Bootstrap 4 tutorial

Overview

Containers

Responsive breakpoints

Z-index

Grid system

Basic usage

Gutters

Equal-width

Equal-width multi-row

Setting one column width

Mixing fixed-width and equal-width

Variable width content

Column wrapping

Column breaks

Responsive classes

Example 1: Equal-widths

Example 2: Setting columns widths

Example 3: Variable width contents

Switching layouts

Mix and match

Variable width contents with flex

Alignment

Vertical alignment

Horizontal alignment

No gutters

Order classes

Offsetting columns

Offset classes

Margin utilities

Nesting

Utilities for layout