All Bootstrap Exercises

Create a breadcrumb and a pagination

Description: Create the breadcrumb Home, Library, Data (current page), and a pagination with 3 pages where page 1 is active.

Hint:

• Use breadcrumb, breadcrumb-item active, pagination, page-item and page-link.

Solution

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>
<nav aria-label="Pages">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

How it works

• The active item of the breadcrumb is not a link and has aria-current="page".
• The Previous item is disabled, because the user is on the first page.

Read Breadcrumb and Pagination.

Create an offcanvas sidebar which opens from the left

Description: A “Menu” button must open a sidebar from the left side, with two links and a close button.

Hint:

• Use offcanvas offcanvas-start, data-bs-toggle="offcanvas" and data-bs-dismiss="offcanvas".

Solution

<button class="btn btn-dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="sidebar">Menu</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="sidebarLabel">Menu</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <a class="d-block mb-2" href="#">Home</a>
    <a class="d-block" href="#">Contact</a>
  </div>
</div>

const s = document.getElementById('sidebar');
document.querySelector('[data-bs-toggle="offcanvas"]').click();
await new Promise(r => setTimeout(r, 700));
console.log('open: ' + s.classList.contains('show'));
s.querySelector('.btn-close').click();
await new Promise(r => setTimeout(r, 700));
console.log('open after close: ' + s.classList.contains('show'));

How it works

• offcanvas-start places the panel on the left side. The toggle button opens it, and the close button closes it.

Read Offcanvas.

Create a button which switches the page to dark mode

Description: A button must switch the page between light and dark mode.

Hint:

• Change the attribute data-bs-theme of the html element.

Solution

<button type="button" class="btn btn-outline-secondary" id="themeSwitch">Switch theme</button>
<script>
  document.getElementById('themeSwitch').addEventListener('click', function () {
    var root = document.documentElement;
    root.setAttribute('data-bs-theme', root.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark');
  });
</script>

const bg = () => getComputedStyle(document.body).backgroundColor;
console.log('start: ' + (document.documentElement.getAttribute('data-bs-theme') || 'light') + ' -> ' + bg());
document.getElementById('themeSwitch').click();
console.log('after the 1st click: ' + document.documentElement.getAttribute('data-bs-theme') + ' -> ' + bg());
document.getElementById('themeSwitch').click();
console.log('after the 2nd click: ' + document.documentElement.getAttribute('data-bs-theme') + ' -> ' + bg());

How it works

• Bootstrap colors come from CSS variables, which change when data-bs-theme changes.
• To remember the choice of the user, also save it in localStorage.

Read Color Modes.

Create a hero section with a heading and two buttons

Description: Make a hero section with a light background, a big heading, a lead text and two buttons. The buttons must be stacked on phones and side by side from the small breakpoint.

Hint:

• Use py-5, display-5, lead and d-grid gap-2 d-sm-flex justify-content-sm-center.

Solution

<div class="bg-body-tertiary py-5 text-center rounded">
  <h1 class="display-5 fw-bold">Learn Bootstrap</h1>
  <p class="lead col-lg-8 mx-auto">Build responsive websites faster with ready components and utilities.</p>
  <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
    <button type="button" class="btn btn-primary btn-lg px-4">Get started</button>
    <button type="button" class="btn btn-outline-secondary btn-lg px-4">Learn more</button>
  </div>
</div>

How it works

• d-grid gap-2 stacks the buttons full width on phones. d-sm-flex changes to a flex row from 576px, and justify-content-sm-center centers them.

Read Utilities and Flex Utilities.