Bootstrap 5 Cheat Sheet

https://getbootstrap.com/docs/5.0

Responsive

Mobile first! If you want something apply to mobile only do something like this:

• <div class="m-5 m-lg-0">  <!-- default = mobile margin 5, for breakpoint lg and higher: margin 0 -->

Hide an element for lg oder higher:

• <div class="d-lg-none">

Grid

Columns

if you want responsive columns and full control:

• <ul class="row">
      <li class="col-12 col-md-6 col-lg-3 mb-3">
      <li class="col-12 col-md-6 col-lg-3 mb-3">
      <li class="col-12 col-md-6 col-lg-3 mb-3">
      <li class="col-12 col-md-6 col-lg-3 mb-3">
  </ul>

"col-auto" makes a column as small as possible

Align the content to the end and bottom:

<div class="d-flex align-items-end justify-content-end lh-1">
    Fooo
</div>

Gutters

If you wand a column with background color and gutter, you need to use a child DIV with background color. Reason: Gutters work with padding, otherwise there is no visible gutter.

Two Column List (Responsive )

<ul class="container-fluid row gx-3 list-unstyled">
    {% for tocId, tocEntry in toc %}
        {# mobile first: col-12 = full width, from "md" and bigger -> 2 columns #}
        <li class="col-12 col-md-6 p0 fs-5">
            <div class="border-bottom border-grey py-3">
                {{ font_awesome('fa-arrow-circle-o-right', 'text-primary me-1') }}
                <a href="#{{ tocId }}" class="text-black fw-bold">
                    {{ tocEntry['title'] }}
                </a>
            </div>
        </li>
    {% endfor %}
</ul>

List-Group

{# https://getbootstrap.com/docs/5.0/components/list-group/ #}
<ul class="list-group list-group-flush"> {# flush = less styled form #}
    {% for tocId, tocEntry in toc %}
        <li class="list-group-item">
            {{ font_awesome('fa-arrow-circle-o-right') }}
            <a href="#{{ tocId }}">
                {{ tocEntry['title'] }}
            </a>
        </li>
    {% endfor %}
</ul>

Custom Bullet List / flex-fill

<li class="row flex-nowrap align-items-center">
    <div class="col">
       O) 
    </div>
    <div class="col flex-fill">
        My list item
    </div>
</li>

Enlarge click target

"stretched-link" expands the click area up to the next block level element.
If you want to go up to higher blocks, use "position-relative" an the parent block.

Customize bootstrap variables/maps

With npm/yarn sources are in

• node_modules/bootstrap/scss/
• e.g node_modules/bootstrap/scss/_utilities.scss

Add Semibold font-weight

https://getbootstrap.com/docs/5.0/utilities/api/#modify-utilities

With Webpack, eg. in app.scss

$font-weight-lighter:         200;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-semibold:        500;
$font-weight-bold:            600;
$font-weight-bolder:          700;


@import "~bootstrap/scss/utilities";

// Add semibold (500) to font-weight map
$utilities: map-merge(
  $utilities,
  (
    "font-weight": (
            property: font-weight,
            class: fw,
            values: (
                    light: $font-weight-light,
                    lighter: $font-weight-lighter,
                    normal: $font-weight-normal,
                    semibold: $font-weight-semibold,
                    bold: $font-weight-bold,
                    bolder: $font-weight-bolder
            )
    )
  )
);

Button -> Responsive Collapse Element

Show an element, but if smaller than breakpoint "lg" show a button for de-collapse:

• <div class="d-lg-none">
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#search-bar" aria-expanded="false" aria-controls="search-bar">
          Search
      </button>
  </div>
  
  <div id="search-bar" class="row collapse uncollapse-flex">
      ...
  </div>
  

app.scss:

• // Do not hide when breakpoint lg or larger
  @include media-breakpoint-up(lg) {
    .collapse.uncollapse-flex {
      display: flex;
    }
  }