Course Content
Bootstrap 5 Tutorial
Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites. Bootstrap 5 is completely free to download and use!
0/32
Bootstrap 5 Get Started
Bootstrap 5 Containers
Bootstrap 5 Grids
Bootstrap 5 Text/Typography
Bootstrap 5 Colors
Bootstrap 5 Background Colors
Bootstrap 5 Tables
Bootstrap 5 Images
Bootstrap 5 Jumbotron
Bootstrap 5 Alerts
Bootstrap 5 Buttons
Bootstrap 5 Button Groups
Bootstrap 5 Badges
Bootstrap 5 Progress Bars
Bootstrap 5 Spinners
Bootstrap 5 Pagination
Bootstrap 5 List Groups
Bootstrap 5 Cards
Bootstrap 5 Dropdowns
Bootstrap 5 Collapse
Bootstrap 5 Navs
Bootstrap 5 Navbars
Bootstrap 5 Carousel
Bootstrap 5 Modal
Bootstrap 5 Tooltip
Bootstrap 5 Popover
Bootstrap 5 Toasts
Bootstrap 5 Scrollspy
Bootstrap 5 Offcanvas
Bootstrap 5 Utilities
Bootstrap 5 Dark Mode
Bootstrap 5 Flex
Bootstrap 5 Forms
Bootstrap 5 provides a comprehensive set of CSS classes and components to style and enhance forms.
0/7
Bootstrap 5 Forms
Bootstrap 5 Select
Bootstrap 5 Checkboxes and Radio buttons
Bootstrap 5 Range
Bootstrap 5 Input Groups
Bootstrap 5 Form Floating Labels
Bootstrap 5 Form Validation
Bootstrap 5 Grid
In Bootstrap 5, the grid system is a powerful and flexible feature that allows you to create responsive layouts for your web pages. The grid system is based on a 12-column layout, which helps you organize and align content effectively.
0/9
Bootstrap 5 Grid System
Bootstrap 5 Grid Stacked to horizontal
Bootstrap 5 Grid Extra Small
Bootstrap 5 Grid Small
Bootstrap 5 Grid Medium
Bootstrap 5 Grid Large
Bootstrap 5 Grid Extra Large
Bootstrap 5 Grid XXL
Bootstrap 5 Grid Examples
Bootstrap 5 Other
Bootstrap 5 offers many other features and components in addition to the ones mentioned earlier
0/4
Bootstrap 5 Templates
Bootstrap 5 Editor
Bootstrap 5 Exercises
Bootstrap 5 Quiz
Bootstrap 5 – A Comprehensive Guide to Modern Web Development
About Lesson

In Bootstrap 5, badges are used to highlight and display additional information alongside content, such as notifications, counts, or status indicators. Here’s how you can create badges in Bootstrap 5:

  1. Basic Badge:
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge bg-dark">Dark</span>
  1. Pill-style Badge:
<span class="badge bg-primary rounded-pill">Primary</span>
<span class="badge bg-secondary rounded-pill">Secondary</span>
<span class="badge bg-success rounded-pill">Success</span>
<span class="badge bg-danger rounded-pill">Danger</span>
<span class="badge bg-warning rounded-pill text-dark">Warning</span>
<span class="badge bg-info rounded-pill">Info</span>
<span class="badge bg-light rounded-pill">Light</span>
<span class="badge bg-dark rounded-pill">Dark</span>
  1. Badge with Text:
<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">5</span>
</button>
  1. Badge in Button Group:
<div class="btn-group">
  <button type="button" class="btn btn-primary">Button 1</button>
  <button type="button" class="btn btn-primary">Button 2</button>
  <button type="button" class="btn btn-primary">
    Notifications <span class="badge bg-secondary">3</span>
  </button>
</div>
  1. Contextual Badges:
<span class="badge bg-primary">New</span>
<span class="badge bg-success">Approved</span>
<span class="badge bg-warning text-dark">Pending</span>
<span class="badge bg-danger">Rejected</span>

You can customize the appearance of badges by combining different classes, such as background colors (bg-*), text colors (text-*), and border-radius (rounded-pill). Additionally, you can use badges in various contexts, such as within buttons, button groups, or alongside text.

Feel free to adjust the content and styling of the badges according to your specific needs. For more details and additional options related to badges in Bootstrap 5, refer to the official Bootstrap documentation.

Join the conversation
Previous
Next