#Bootstrap

7

Sticky footers

Note

To make a sticky footer in the Bootstrap you can use the below.

<body class="d-flex flex-column min-vh-100">
  <main class="flex-fill">
    <!-- Your page content here -->
  </main>

  <footer class="bg-dark text-white text-center py-2">
    <!-- Your footer content here -->
  </footer>
</body>
  • d-flex flex-column min-vh-100 on : makes the body fill the viewport and act like a vertical Flexbox container.
  • flex-fill on : makes the content area take up all available vertical space, pushing the footer down.
  • footer: stays at the bottom even with short content.

Hide details in the mobile screen with Bootstrap

Note

In the feed page I need to hide the dotted line in the mobile screens. So here you can see how its can be done in Bootstrap.

  • d-none d-md-flex: shows only on md and up (desktop/tablet)

  • d-block d-md-none: shows only on mobile

  • text-nowrap: prevents text from wrapping

<div class="mb-3">
  <!-- Desktop layout -->
  <div class="d-none d-md-flex align-items-center">
    <a href="{{ .Permalink }}" class="text-decoration-none fw-medium me-2 text-nowrap">
      Sample heading
    </a>
    <div class="flex-grow-1 border-bottom dotted-line mx-2"></div>
    <p class="text-muted small text-nowrap mb-0">Date</p>
  </div>

  <!-- Mobile layout -->
  <div class="d-block d-md-none">
    <a href="{{ .Permalink }}" class="text-decoration-none fw-medium d-block mb-1">
      Sample heading
    </a>
    <p class="text-muted small mb-0">Date</p>
  </div>
</div>

How to break columns in Bootstrap

Note

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line.

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

You can also apply this break at specific breakpoints with our responsive display utilities.

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

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

Bootstrap Doc