Bootstrap 5

Install

local via npm

npm install bootstrap@latest-5
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

via CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

You find the latest version at bootstrapcdn.com.

Bootstrap starter template

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title><?php // TODO Page title ?></title>
</head>
<body>

    <?php // TODO Body content ?>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>
</html>

Integrate Bootstrap with scss

@import "fonts"; // load additional web fonts
@import "config/colors"; // set values for the colors
@import "config/variables"; // set values for further bootstrap variables
@import "../../node_modules/bootstrap/scss/bootstrap.scss"; // include bootstrap
@import "utils"; // my own utils, small helper classes, mixins
@import "globals"; // globals and bootstrap things, that can not be handled via configuration
@import "header"; // css for the navigation and header
@import "footer"; // css for the page footer
@import "blocks"; // one scss file for every "block" (aka section or module) in your layout or CMS

Read a Bootstrap breakpoint or max-width value

$breakpoint-sm: map-get($grid-breakpoints, sm); 
.max-width-sm {
  max-width: map-get($container-max-widths, sm);
}

Mixin to create a max-width util

@each $name, $value in $grid-breakpoints {
  .max-width-#{$name} {
    max-width: $value;
  }
}

Disable the Grid-System

Navigation expand on Hover

Prevent sticky button hovers on mobile touch devices

@media (hover: none) {
    .btn:hover {
        color: inherit;
        background-color: inherit;
    }
}

Alignment

Align text or button at the bottom of a card

  1. Add d-flex and flex-column to card-body
  2. Add mt-auto to the element in card-body

Align cols on bottom of a row

  • Add align-items-end to the row