Bootstrap Components

Create a responsive navbar with a brand and three links

Description: Build a navbar with the brand “MySite” and three links. It must collapse into a toggle button on small screens.

Hint:

• Use navbar navbar-expand-md, navbar-toggler and collapse navbar-collapse.

Solution

<nav class="navbar navbar-expand-md bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

document.querySelector('.navbar-toggler').click();
await new Promise(r => setTimeout(r, 600));
console.log('menu opens on a small screen: ' + document.getElementById('menu').classList.contains('show'));
console.log('links in the menu: ' + document.querySelectorAll('#menu .nav-link').length);

How it works

• The links are hidden in the collapse part, and the toggler button opens them.
• From the md breakpoint (768px) the menu is shown in a row.

Read Navbar.

Create a card with an image, a title, a text and a button

Description: Create a card 18rem wide with an image on top, a title, a text and a button.

Hint:

• Use card, card-img-top, card-body, card-title and card-text.

Solution

<div class="card" style="width: 18rem;">
  <img src="images/photo.jpg" class="card-img-top" alt="A sample image">
  <div class="card-body">
    <h5 class="card-title">Learn Bootstrap</h5>
    <p class="card-text">A short text about the course, with some words.</p>
    <a href="#" class="btn btn-primary">Start now</a>
  </div>
</div>

How it works

• The image uses card-img-top, so it fits the top of the card with rounded corners.
• The text and the button are inside card-body, which gives the padding.

Read Cards.

Create a striped, hover and responsive table

Description: Make a table of three students with striped rows and a hover effect, which scrolls sideways on small screens.

Hint:

• Use table table-striped table-hover and wrap it in table-responsive.

Solution

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-dark"><tr><th>#</th><th>Name</th><th>City</th><th>Marks</th></tr></thead>
    <tbody>
      <tr><td>1</td><td>Anita</td><td>Delhi</td><td>88</td></tr>
      <tr><td>2</td><td>Ravi</td><td>Pune</td><td>92</td></tr>
      <tr><td>3</td><td>Maya</td><td>Kolkata</td><td>79</td></tr>
    </tbody>
  </table>
</div>

How it works

• table-striped colors every second row, table-hover highlights the row under the mouse.
• table-responsive adds a horizontal scroll when the table is wider than the screen.

Read Tables.

Create an alert which the user can close

Description: Show a warning alert with a close button. When the user clicks the button, the alert must disappear.

Hint:

• Use alert-dismissible fade show, btn-close and data-bs-dismiss="alert".

Solution

<div class="alert alert-warning alert-dismissible fade show" role="alert" id="al">
  <strong>Careful!</strong> Your session will end in 5 minutes.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

console.log('alert before: ' + document.querySelectorAll('#al').length);
document.querySelector('#al .btn-close').click();
await new Promise(r => setTimeout(r, 600));
console.log('alert after the click: ' + document.querySelectorAll('#al').length);

How it works

• data-bs-dismiss="alert" tells Bootstrap to close the alert, and fade show gives the smooth effect.

Read Alerts.

Create a progress bar at 60 percent

Description: Show a progress bar which is filled to 60% with the text “60%”.

Hint:

• Use progress, progress-bar and the width style. Add the aria attributes.

Solution

<div class="progress" role="progressbar" aria-label="Course progress" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 60%">60%</div>
</div>

How it works

• The width of .progress-bar is the percent. The role and aria values are on the wrapper for screen readers.

Read Progress Bars and Spinners.

Create a button group

Description: Make one group of three outline buttons (Left, Middle, Right), and a vertical group of two buttons.

Hint:

• Use btn-group and btn-group-vertical.

Solution

<div class="btn-group mb-3" role="group" aria-label="Alignment">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>
<br>
<div class="btn-group-vertical" role="group" aria-label="Vertical group">
  <button type="button" class="btn btn-secondary">Top</button>
  <button type="button" class="btn btn-secondary">Bottom</button>
</div>

How it works

• btn-group joins the buttons and removes the space and the inner radius.

Read Buttons.

Add a notification count badge to a button

Description: Add a red round badge with the number 5 on the top right corner of an “Inbox” button.

Hint:

• Use position-relative on the button and position-absolute top-0 start-100 translate-middle on the badge.

Solution

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    5
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

How it works

• top-0 start-100 puts the badge on the corner, and translate-middle moves it half of its size back, so it sits on the corner.
• The hidden text tells screen reader users what “5” means.

Read Badges and Utilities.

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.