Bootstrap 5 Cheat Sheet


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">



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">

"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">


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'] }}
    {% endfor %}


{# #}
<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'] }}
    {% endfor %}

Custom Bullet List / flex-fill

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

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

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(
    "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">
    <div id="search-bar" class="row collapse uncollapse-flex">


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