Post

Bootstrap 5 Cheatsheet

Posted
By Daniel Florido
11 min read

Im starting to use bootstrap as apposed to custom css because bootstrap,

  • Is customizable
  • Can save time
  • Keeps the designer and developer aligned through the bootstrap component framework

We do dream to create our own framework and we have got some starter css but its no where as exstensive or as powerful as bootstrap. This guide will help us and I hope others too be a good, quick reference for the power of bootstrap. Eventually we will make a tailwind guide. Its all apart of adopting css frameworks. You’ve got to walk before you can fly.

Colors

Background Colors

1

bg-secondary

Text Colors

1

.text-white

Typography

1
2
3
4
5
6
7

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

font size

2 Column Layout

Col

  • implicit width unless you specify
  • col-auto will size the column width based on the nested content
1
2
3
4
5
6
7
8
9
10
11

<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="box">content</div>
    </div>

    <div class="col">
      <div class="box">content</div>
    </div>
  </div>
</div>

Auto width columns

Set width to whatever the content width is

1

<div class = "col-auto">

Responsive columns

2 column on small screen. 3 column on desktop

example 1

1

<div class="col-sm-6 col-lg-4"></div>

example 2

1

<div{{ item.attributes.addClass('field__item col-xl-3 col-lg-4 col-md-6 col-sm-12') }}>{{ item.content }}</div>

more info

Breakpoints

BreakpointClass infixDimensions
x-smallnone<576px
smallsm>576px
mediummd>768px
Largelg>992px
Extra Largexl>1200px
Extra Extra Largexxl>1400px
  • The first column is set to 8 only on large screens
1
2
3
4
5
6
7
8
9
10
11

<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <div class="box">content</div>
    </div>

    <div class="col">
      <div class="box">content</div>
    </div>
  </div>
</div>

more info

Offset

  • offset is used for positioning of cols
  • offset will move the placement of cols along the row
1
2
3
4
5
6
7
8
9
10
11

<div class="container">
  <div class="row">
    <div class="col-lg-8 offset-3">
      <div class="box">content</div>
    </div>

    <div class="col">
      <div class="box">content</div>
    </div>
  </div>
</div>

Set column amount in row

  • set cols to always be 2 column
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="container">
  <div class="row row-cols-2">
    <div class="col">
      <div class="box">content</div>
    </div>

    <div class="col">
      <div class="box">content</div>
    </div>
    <div class="col">
      <div class="box">content</div>
    </div>

    <div class="col">
      <div class="box">content</div>
    </div>
  </div>
</div>

flexbox

flex-wrap

1

flex-nowrap

flex direction

1

 flex-row-reverse

1
2

flex-row


1

flex-column

Alignment with Flexbox

ensure to use d-flex when using flex box align classes

Vertical alignment

Apply to row class

  • align-items-start
  • align-items-center
  • align-items-end

horizontal alignment

  • justify-content-start
  • justify-content-end
  • justify-content-center
  • justify-content-between

target specific size screens with flexbox alignment classess

  • justify-content-md-end

Margins and padding spacing

Where property is one of:

1
2

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

1
2
3
4
5
6
7

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Sample css classes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * 0.25) !important;
}

.px-2 {
  padding-left: ($spacer * 0.5) !important;
  padding-right: ($spacer * 0.5) !important;
}

.p-3 {
  padding: $spacer !important;
}

The default spacer values

1
2
3
4
5
6
7
8
9
10

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Set Grid gutters between cols

  • gutter values are set with g-value on the parent
  • use gx or gy to specify the direction of the gutter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="container">
  <div class="row row-cols-2 g-2">
    <div class="col">
      <div class="box">content</div>
    </div>

    <div class="col">
      <div class="box">content</div>
    </div>
    <div class="col">
      <div class="box">content</div>
    </div>

    <div class="col">
      <div class="box">content</div>
    </div>
  </div>
</div>

Nested rows

  • you can nest rows
  • ensure to follow correct format for nesting
1
2
3
4
5
6
7

<div class="container">
  <div class="row row-cols-2 g-2">
    <div class="col">
      <div class="box">content</div>
    </div>
  </div>
</div>

Tables

  • just add the class of table to make the table look nice
  • apply color classes such as table-success to whole table or individual rows
  • apply the table-striped class to the table element for zebra striping
1

<table class="table table-primary"></table>

other table classes

  • table-hover - create a hover effect on each row
  • table-active - activate a row
  • table-border
  • table-borderless
  • table-small - removes padding
  • table-responsive - this is a wrapper div.table-responsive for applying horizontal scrollbars
  • table-group-divider - apply class to thead or tbody

Forms

form classes

  • label class = "form-label"
  • input class = "form-control"
  • input class = "form-control-sm"
  • input class = "form-control-lg"
  • input class = "form-control-plaintext"

select classes

  • all the size classes still work when applied

  • label class = "form-select"

range classes

  • remove form-controll class if applied

  • label class = "form-range"

checkbox wrapper classes

  • apply wrapper <div class ="form-check">
  • convert checkbox to toggle switch by applying class to wrapper div class = "form-check form-switch"
  • display inline with div class = "form-check form-check-inline"

checkbox classes

  • apply classes to label and input respectively

  • input class = "form-check-input"
  • label class = "form-check-label"

input values

  • readonly
  • disabled

input groups

  • group elements together to create great looking form fields

see bootstrap docs for examples

floating labels

this solves the problem of the placeholder text disappearing when the cursor is input into the field. As people will forget what the field is meant for once the placeholder is cleared.

see example here

Form validation

its a bit complex and requires some js to do the field validation.

  • turn off the default browser validation with <form novalidate>
  • apply bootstrap validation with <form class="needs-validation" novalidate>
  • form field feedback wrapper ` <div class="valid-feedback"> Looks good! </div>`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
  "use strict";

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll(".needs-validation");

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms).forEach(function (form) {
    form.addEventListener(
      "submit",
      function (event) {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }

        form.classList.add("was-validated");
      },
      false
    );
  });
})();

more info more info

Buttons

Here is your typical bootstrap btn

1

<button class="btn btn-primary">More info</button>

And you can do the same thing with links

1

<a class="btn btn-primary" href="">test</a>

btn class examples .btn-link .btn-sm .btn-outline-secondary

Apply button styles using scss

1
2
3
4
5

.nav-item:last-child {
    @extend .btn;
    @extend .btn-primary;
}

btn states

disable btn states

1

<button class="btn" disabled>More info</button>

1

<a class="btn" disabled>test</a>

toggle btn states

1

<button class="btn btn-outline-secondary" data-bs-toggle="button">test</button>

btn groups

  • groups the btns together to remove the space between them.
  • apply classes as a wrapper
1
2
3
4
5
6

<div class="btn-group">
  <a class="btn">test</a>
  <a class="btn">test</a>
  <a class="btn">test</a>
  <a class="btn">test</a>
</div>

Btn mixin

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

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow(
        $btn-box-shadow,
        0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5)
      );
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow(
          $btn-active-box-shadow,
          0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5)
        );
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $disabled-border;
  }
}

Alerts

Simple alert for a successful function

1

<div class="alert alert-success" role="alert">this function is complete</div>

Alerts can also be closable by adding in some extra components

1
2
3
4
5

<div class="alert alert-success alert-dismissible" role="alert">
  this function is complete
</div>
<a class="alert-link" disabled>alert link sample with correct styling class</a>
<button class="btn-close" aria-label="close" data-bs-dismiss="alert"></button>

add animation

1
2
3
4
5

<div class="alert alert-success alert-dismissible fade show" role="alert">
  this function is complete
</div>
<a class="alert-link" disabled>alert link sample with correct styling class</a>
<button class="btn-close" aria-label="close" data-bs-dismiss="alert"></button>

Cards

A pretty common structure for a card

1
2
3
4
5
6
7
8
9
10
11

<div class="card">
  <img class="card-img-top" src="https://via.placeholder.com/250x220" />
  <div class="card-body">
    <h2 class="card-title">the title</h2>
    <div class="subtitle">the sub title</div>
    <div class="card-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia nibh
      vel nibh ornare, sit amet commodo ligula consectetur.
    </div>
  </div>
</div>

You can have the image at the bottom but you need to change the class name and add it outside the card body at the bottom

1
2
3
4
5
6
7
8
9
10
11

<div class="card">
  <div class="card-body">
    <h2 class="card-title">the title</h2>
    <div class="subtitle">the sub title</div>
    <div class="card-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia nibh
      vel nibh ornare, sit amet commodo ligula consectetur.
    </div>
  </div>
  <img class="card-img-bottom" src="https://via.placeholder.com/250x220" />
</div>

or what one of those snazzy card img overlays?

  • add class to card-body
  • ensure class on img tag is card-img
1
2
3
4
5
6
7
8
9
10
11

<div class="card">
  <div class="card-body card-img-overlay">
    <h2 class="card-title">the title</h2>
    <div class="subtitle">the sub title</div>
    <div class="card-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia nibh
      vel nibh ornare, sit amet commodo ligula consectetur.
    </div>
  </div>
  <img class="card-img" src="https://via.placeholder.com/250x220" />
</div>

Cards also have headers and footers

1
2
3
4
5
6
7
8
9
10
11
12

<div class="card">
  <div class="card-body">
    <h2 class="card-header">the title</h2>
    <div class="subtitle">the sub title</div>
    <div class="card-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia nibh
      vel nibh ornare, sit amet commodo ligula consectetur.
    </div>
    <div class="card-footer">the footer</div>
  </div>
  <img class="card-img-bottom" src="https://via.placeholder.com/250x220" />
</div>

Equal height cards

Just add class h-100 to the card class

1
2
3
4
5
6
7
8
9
10
11

<div class="card">
  <img class="card-img-top" src="https://via.placeholder.com/250x220" />
  <div class="card-body">
    <h2 class="card-title">the title</h2>
    <div class="subtitle">the sub title</div>
    <div class="card-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia nibh
      vel nibh ornare, sit amet commodo ligula consectetur.
    </div>
  </div>
</div>

Tabs

no need to load custom js init file. full snippet

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

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button
      class="nav-link active"
      id="nav-home-tab"
      data-bs-toggle="tab"
      data-bs-target="#nav-home"
      type="button"
      role="tab"
      aria-controls="nav-home"
      aria-selected="true"
    >
      Home
    </button>
    <button
      class="nav-link"
      id="nav-profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#nav-profile"
      type="button"
      role="tab"
      aria-controls="nav-profile"
      aria-selected="false"
    >
      Profile
    </button>
    <button
      class="nav-link"
      id="nav-contact-tab"
      data-bs-toggle="tab"
      data-bs-target="#nav-contact"
      type="button"
      role="tab"
      aria-controls="nav-contact"
      aria-selected="false"
    >
      Contact
    </button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div
    class="tab-pane fade show active"
    id="nav-home"
    role="tabpanel"
    aria-labelledby="nav-home-tab"
  >
    ...
  </div>
  <div
    class="tab-pane fade"
    id="nav-profile"
    role="tabpanel"
    aria-labelledby="nav-profile-tab"
  >
    ...
  </div>
  <div
    class="tab-pane fade"
    id="nav-contact"
    role="tabpanel"
    aria-labelledby="nav-contact-tab"
  >
    ...
  </div>
</div>

Tab content classes

  • active pane ` tab-pane fade show active`

  • non active pane ` tab-pane fade`

Trouble shooting tabs

  • parent container for tab content must have class tab-content
  • ensure id of btn and id of tab-pane are different. There can only be unique id per page
css
This post is licensed under CC BY 4.0 by the author.