4.6. Bootstrap Grid Tutorial

By now you should have:

However those grid examples are complex. Here are some full, simple grid examples:

4.6.1. Example 1

Bootstrap has a 12 column layout. The div below uses 6 columns. It always takes half the screen.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example Bootstrap Document</title>

    <!-- This says our CSS is compatible with phones, and phones
         don't need to scale it strangely. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
          crossorigin="anonymous">

    <!-- Extra style info, so we can see a border around our elements. -->
    <!-- You probably do NOT want this in your project. -->
    <style>
      .mycolor {
        background-color: #EEEEEE;
        border-style: solid;
        border-width: 1px;
      }
      .container {
        background-color: #FFFFEE;
        border-style: solid;
        border-width: 1px;
      }
    </style>
  </head>

  <body>

    <!-- Main content -->
    <div class="container">
        <h1>Example 1</h1>

        <p>Bootstrap has a 12 column layout. The div below uses 6 columns. It
        always takes half the screen.</p>

        <div class="row">
            <div class="mycolor col-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </div>

    <!-- Load in JavaScript that makes Bootstrap interactive -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
          crossorigin="anonymous"></script>
  </body>
</html>

4.6.2. Example 2

Bootstrap has a 12 column layout. We now have two divs that each take 6 columns. Therefore they always take half the screen, and appear side-by-side.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example Bootstrap Document</title>

    <!-- This says our CSS is compatible with phones, and phones
         don't need to scale it strangely. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
          crossorigin="anonymous">

    <!-- Extra style info, so we can see a border around our elements. -->
    <!-- You probably do NOT want this in your project. -->
    <style>
      .mycolor {
        background-color: #EEEEEE;
        border-style: solid;
        border-width: 1px;
      }
      .container {
        background-color: #FFFFEE;
        border-style: solid;
        border-width: 1px;
      }
    </style>
  </head>

  <body>

    <!-- Main content -->
    <div class="container">
        <h1>Example 2</h1>

        <p>Bootstrap has a 12 column layout. We now have two divs that each take
        6 columns. Therefore they always take half the screen, and appear
        side-by-side.</p>

        <div class="row">
            <div class="mycolor col-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>

            <div class="mycolor col-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </div>

    <!-- Load in JavaScript that makes Bootstrap interactive -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
          crossorigin="anonymous"></script>
  </body>
</html>

4.6.3. Example 3

When the screen is xs or sm, each div takes 12 columns. The width of the screen. When the screen gets to md size, each div takes 6 columns. So they appear side-by-side.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example Bootstrap Document</title>

    <!-- This says our CSS is compatible with phones, and phones
         don't need to scale it strangely. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
          crossorigin="anonymous">

    <!-- Extra style info, so we can see a border around our elements. -->
    <!-- You probably do NOT want this in your project. -->
    <style>
      .mycolor {
        background-color: #EEEEEE;
        border-style: solid;
        border-width: 1px;
      }
      .container {
        background-color: #FFFFEE;
        border-style: solid;
        border-width: 1px;
      }
    </style>
  </head>

  <body>

    <!-- Main content -->
    <div class="container">
        <h1>Example 3</h1>

        <p>When the screen is md or larger, each div takes 6 columns.
        So they appear side-by-side.
        When the screen gets to less than md size, each div takes
        12 columns. The width of the screen.</p>

        <div class="row">

            <div class="mycolor col-12 col-md-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>

            <div class="mycolor col-12 col-md-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </div>

    <!-- Load in JavaScript that makes Bootstrap interactive -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
          crossorigin="anonymous"></script>
  </body>
</html>

4.6.4. Example 4

This example scales to between using the whole width (all 12 columns) on small screens, to using only 3/12 = 25% of the width on large screens.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example Bootstrap Document</title>

    <!-- This says our CSS is compatible with phones, and phones
         don't need to scale it strangely. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
          crossorigin="anonymous">

    <!-- Extra style info, so we can see a border around our elements. -->
    <!-- You probably do NOT want this in your project. -->
    <style>
      .mycolor {
        background-color: #EEEEEE;
        border-style: solid;
        border-width: 1px;
      }
      .container {
        background-color: #FFFFEE;
        border-style: solid;
        border-width: 1px;
      }
    </style>
  </head>

  <body>

    <!-- Main content -->
    <div class="container">
        <h1>Example 4</h1>

        <p>This example scales to between using the whole width (all 12
        columns) on small screens, to using only 3/12 = 25% of the width on
        large screens.</p>

        <div class="row">
            <div class="mycolor col-xs-12 col-sm-6 col-md-4 col-lg-3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>

            <div class="mycolor col-xs-12 col-sm-6 col-md-4 col-lg-3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>

            <div class="mycolor col-xs-12 col-sm-6 col-md-4 col-lg-3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div class="mycolor col-xs-12 col-sm-6 col-md-4 col-lg-3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </div>

    <!-- Load in JavaScript that makes Bootstrap interactive -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
          crossorigin="anonymous"></script>
  </body>
</html>

4.6.5. Example 5

This example has sidebar that goes away when the screen is extra small. This uses Bootstrap’s Display Utilities.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example Bootstrap Document</title>

    <!-- This says our CSS is compatible with phones, and phones
         don't need to scale it strangely. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
          crossorigin="anonymous">

    <!-- Extra style info, so we can see a border around our elements. -->
    <!-- You probably do NOT want this in your project. -->
    <style>
      .mycolor {
        background-color: #EEEEEE;
        border-style: solid;
        border-width: 1px;
      }
      .container {
        background-color: #FFFFEE;
        border-style: solid;
        border-width: 1px;
      }
    </style>
  </head>

  <body>

    <!-- Main content -->
    <div class="container">
        <h1>Example 5</h1>

        <p>This example has sidebar that goes away when the screen is
            medium or smaller.</p>

        <div class="row">
            <div class="mycolor d-none d-md-block col-2">
              <p>Menu:</p>
              <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
              </ul>
            </div>

            <div class="mycolor col-12 col-md-10">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>

    </div>

    <!-- Load in JavaScript that makes Bootstrap interactive -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
          crossorigin="anonymous"></script>
  </body>
</html>