Boot Bootstrap CSS

Create responsive layouts quickly with Bootstrap grid, utilities, components, and theming.

Lessons

Sign in to save progress

1 Bootstrap Tutorial 2 Bootstrap HOME 3 Bootstrap Introduction 4 Get Started with Bootstrap 5 CDN vs Download vs npm 6 Bootstrap Versions 7 Bootstrap Starter Template 8 Containers 9 Responsive Breakpoints 10 Bootstrap Grid & Containers 11 The 12-Column Grid 12 Grid Columns 13 Auto-Layout Columns 14 Column Offsets 15 Nesting Grids 16 Column Ordering 17 Grid Gutters 18 Row Columns 19 Spacing, Display & Flex Utilities 20 Spacing Utilities 21 Sizing Utilities 22 Display Utilities 23 Flex Utilities 24 Text Utilities 25 Color Utilities 26 Background Utilities 27 Border Utilities 28 Shadow Utilities 29 Position Utilities 30 Overflow Utilities 31 Visibility Utilities 32 Typography 33 Headings & Display Headings 34 Lists 35 Images 36 Figures 37 Tables 38 Responsive Tables 39 Buttons, Cards, Navbars & Forms 40 Buttons 41 Button Groups 42 Badges 43 Alerts 44 Cards 45 Card Layouts 46 List Groups 47 Navbar 48 Responsive Navbar Toggle 49 Nav & Tabs 50 Breadcrumb 51 Pagination 52 Dropdowns 53 Button Dropdowns 54 Collapse 55 Accordion 56 Progress Bars 57 Spinners 58 Placeholders 59 Hero & Jumbotron 60 Icons, Modals & Interactive UI 61 Bootstrap Icons 62 Modals 63 Modal Forms 64 Offcanvas 65 Tooltips 66 Popovers 67 Toasts 68 Carousel 69 Scrollspy 70 Forms 71 Form Controls 72 Select Menus 73 Checkboxes & Radios 74 Range Inputs 75 Input Groups 76 Floating Labels 77 Form Layout 78 Form Validation 79 Form Help Text 80 Disabled & Readonly Fields 81 Customizing Bootstrap Theme 82 CSS Variables 83 Customizing with Sass 84 The Color System 85 Dark Mode 86 Custom Button Styles 87 Utilities API 88 Right-to-Left Support 89 Bootstrap Accessibility Patterns 90 ARIA Roles in Components 91 Keyboard Navigation 92 Screen Reader Support 93 Focus Management 94 Bootstrap JavaScript 95 JS via Data Attributes 96 Programmatic JavaScript API 97 Component Events 98 Bundle vs Separate JS 99 Bootstrap with React 100 Bootstrap with Vue 101 Build Tools & Bundling 102 Removing Unused CSS 103 Responsive Design Patterns 104 Build a Landing Page 105 Build a Dashboard Layout 106 Build a Login Page 107 Build a Pricing Page 108 Bootstrap Best Practices 109 Common Bootstrap Mistakes 110 Bootstrap Cheatsheet 111 Bootstrap Interview Questions 112 Bootstrap Quiz 113 Bootstrap Exercises 114 Bootstrap Practice Problems 115 Bootstrap Project Ideas 116 Bootstrap Syllabus 117 Bootstrap Study Plan 118 Bootstrap Bootcamp

Badges

Bootstrap CSS Lesson 42 of 118 ~1 min read

Overview

Add small count and label badges to elements.

Badges is easiest to learn by reading the example, changing it, and observing the result.

Core Ideas

Understand what Badges changes.
Run the example.
Change one value.
Explain the result.

Step by Step

Read the Badges example.
Run it.
Change it.
Explain it.

Code Example

<h4>Inbox <span class="badge text-bg-secondary">4</span></h4>

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

Checklist

Read the example and change one value.
Check the result in the browser.
Write down the rule you learned.

Common Mistakes

Skipping the example.
Changing many things at once.
Not checking the result.

Practice Challenge

Practice the Badges example in a small scratch file, then explain what changed and why.

Mastery Check

You can explain Badges.
You can change the example.
You can debug the result.

Create a free account to save which lessons you've finished. Save my progress

← Previous Next lesson →