Case Button/Icon

Bootstrap 5 Case Study: Adding Buttons and Icons

Adding a Styled Button

Bootstrap’s button classes can be applied to <a>, <button>, or <input type="button"> (and similar types) elements to quickly create styled buttons.

The Jumbotron component from Bootstrap 3 has been removed in Bootstrap 5. However, you can achieve a similar prominent call-to-action section using utility classes. Let’s create a section with a large, informational blue button.

We will use .btn for basic button styling, .btn-info for the blue color, and .btn-lg for a larger size.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Button Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="p-5 mb-4 bg-light rounded-3">
      <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">My Modern Bootstrap Page!</h1>
        <p class="col-md-8 fs-4">This page showcases Bootstrap 5 components and utilities, demonstrating modern web design practices.</p>
        <a class="btn btn-info btn-lg" href="#" role="button">Learn more</a>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Why use href="#"? When developing, if a link doesn’t yet go to a real page, href="#" is a common placeholder. It prevents page reloads or navigation errors. In a live application, replace this with a valid URL. The role="button" is added to <a> tags styled as buttons for better accessibility.

Adding an Icon to a Button

Bootstrap 5 no longer includes Glyphicons. Instead, it recommends using external icon libraries like Bootstrap Icons, Font Awesome, or custom SVGs.

Let’s add a search icon to our button using Bootstrap Icons. First, you would need to include the Bootstrap Icons CSS in your project (e.g., via CDN: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">).

To display a Bootstrap Icon, use an <i> tag with the appropriate icon class, like <i class="bi bi-search"></i> for a search icon.

Example of adding a search icon to a button:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Button with Icon</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>
  <div class="container py-4">
    <div class="p-5 mb-4 bg-light rounded-3">
      <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">My Modern Bootstrap Page!</h1>
        <p class="col-md-8 fs-4">Explore the features and learn more about what we offer.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">
          <i class="bi bi-search"></i> Search Content
        </a>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Application Scenario: A call-to-action button on a homepage, like ‘Sign Up ’, uses an icon to visually reinforce the button’s purpose and attract user attention.

Common Pitfall: Forgetting to include the icon library’s CSS. If icons don’t appear, check that the stylesheet for Bootstrap Icons (or your chosen library) is correctly linked in your HTML <head>.