Bootstrap 5 Cheat Sheet

https://getbootstrap.com/docs/5.0

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>

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