Bootstrap Day 3: Master Buttons, Alerts, Badges & Cards

Bootstrap Day 3: Mastering Buttons, Alerts, Badges, and Cards

Niotechone Marketing Team
November 27, 2025
11:26 am

Introduction

Welcome to another phase of your dive into Bootstrap! Today, we will be looking at some of the most fun and commonly used Bootstrap components including Buttons, Alerts, Badges and Cards. These components are some of the elements that make websites interactive, aesthetically pleasing, and easy for users to interact with.

Think about any contemporary website you visit, and you’re going to see colorful buttons that click, notification badges for unread messages, alert boxes for updates, collections of cards that display content in a cohesive way. You will learn how to build all these components using only a few lines of code!

Why is it important for students and beginners?

They are amongst the most common components used to build almost every website you will build.
They allow you to customize your projects while looking professional without writing your own custom CSS.
They allow you to work through simple logic that can help you, again secure a quick application.
They are responsive by default, meaning they work well on mobile devices.

Let’s go! Time to turn some plain old HTML into stunning interactive components!

Step-by-Step Tutorial

Step 1: Setting Up Your HTML Document

To begin, we can create the proper HTML Structure and include Bootstrap:

🌐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Components Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <!-- Our components will go here -->
</body>
</html>

What are we doing here?

The <link> tag will load the Bootstrap CSS from a CDN (Content Delivery Network) – which allows us to access all the Bootstrap styles
The <script> tag loads Bootstrap’s JavaScript – needed for interactive components like dismissible alerts
The viewport meta tag helps with mobile usability on your page

Pro Tip: If you want anything with interactivity (dropdowns, modals, dismissible alerts, etc.), you need to include the Bootstrap JavaScript file.

Step 2: Creating Bootstrap Buttons

Now, let’s add some variations on buttons:

🌐

<h1 class="text-center">Buttons</h1>
<button class="btn btn-primary">Primary</button>    
<button class="btn btn-secondary">Secondary</button>    
<button class="btn btn-success">Success</button>    
<button class="btn btn-danger">Danger</button>

Understanding Button Classes:

btn – The base button class; tells Bootstrap “this is a button”
btn-primary – The primary color (usually blue) is applied with appropriate hover effects
btn-success – A green button usually reserved for actions that bring a state of “success”, such as “Submit” or “Save”
btn-danger – A red button designated for actions that are destructive, such as “Delete”

Why not just a button? Plain HTML buttons tend to look bland and inconsistent across different browsers. Bootstrap buttons:

Look remarkably nice by default
Look consistent across browsers
Include built-in hover and active states
Are totally accessible

Step 3: More Button Variants

Let’s add more color options, in addition to contextual buttons::

🌐

<button class="btn btn-warning">Warning</button>    
<button class="btn btn-info">Info</button>    
<button class="btn btn-light">Light</button>    
<button class="btn btn-dark">Dark</button>    
<button class="btn btn-link">Link</button>

Each button color has a purpose:

Warning (yellow/orange): “Be careful” actions like editing important data
Info (light blue): Informational actions or help buttons
Light: Subtle buttons that don’t demand attention
Dark: High contrast for light backgrounds
Link: Looks like a hyperlink but acts as a button

Each button color has a purpose:

Warning (yellow/orange): means “be careful” indicated by actions that are editable or impact important data.
Info (light blue): is for informational actions or help buttons.
Light: is for subtle buttons that don’t need to be the focus of attention.
Dark: is for high contrast typically used with light backgrounds.
The link: looks like a hyperlink but functions as a button.

Note: The   entities give non-breaking spaces between buttons so they are scoped from one another. In production, you’d typically use CSS margin classes instead.

Step 4: Button Sizes

Bootstrap provides a simple way to have buttons with several sizes:

🌐

<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-secondary btn-sm">Small Button</button>

Size classes:

btn-lg – Large button (ideal for call to action buttons)
btn-sm – Small button (great for situations with small screen space)
No class = Default/Medium

When to use sizes:

Large: A primary action you want your user to be aware of (e.g., “Sign up now!”)
Small: A secondary action or buttons in tight screen spots (e.g., actions on rows in a table)
Default: Most generic button

Step 5: Full-Width and Disabled Buttons

🌐

<button class="btn btn-primary w-100">Full Width</button><br><br>
<button class="btn btn-danger" disabled>Disabled</button>

What these do:

w-100 – width 100%. This sets the button to stretch across its container (i.e., useful for a mobile form)
disabled attribute – prevents user from pressing the button and has a faint grey appearance

Pro Tip: Full width buttons are great when designing for mobile-first and you want users to easily tap!

Step 6: Creating Bootstrap Alerts

Alerts are a way to display important information to the user:

🌐

<h1 style="text-align: center">Bootstrap Alerts</h1>
<div class="alert alert-success">This is a success alert!</div>

<div class="alert alert-primary">Primary</div>
<div class="alert alert-secondary">Secondary</div>
<div class="alert alert-danger">Danger</div>
<div class="alert alert-warning">Warning</div>
<div class="alert alert-info">Info</div>

Understanding Alerts:

alert – Base class for all alerts
alert-success – Green background, used for success messages (“Your profile was updated!”)
alert-danger – Red background, for errors (“Invalid password”)
alert-warning – Yellow/orange, for warnings (“Your session will expire soon”)
alert-info – Blue background, for general information

What you need to understand about Alerts:

alert – The base class for all alerts
alert-success – Green background, for messages about a successful action (“Your profile has been updated!”)
alert-danger – Red background, for errors (“Invalid password”)
alert-warning – Yellow/red/orange, for warning messages (“Your session will expire soon.”)
alert-info – Blue background for general information

Why use alerts? Alerts provide visual feedback to the user about their actions. Without alerts, the user would not know whether their submission was successful or not!

Step 7: Dismissible Alerts

Let’s create an alert that the user can dismiss:

🌐

<div class="alert alert-secondary alert-dismissible fade show" role="alert">
    <strong>Warning!</strong> This is a dismissible alert
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Breaking down this code:

alert-dismissible – Provides the padding required for close button
fade show – Enables the fade-out animation when prompted
role=”alert” – Provided for better accessibility when using screen readers
btn-close – The Bootstrap style close button class
data-bs-dismiss=”alert” – Enables Bootstrap to alert using the dismiss action when clicked

When to use dismissible alerts?

A non-critical message the user might want to dismiss
When associated with a promotional banner or cookie notice
When using a temporary notification

Common Mistake: Forgetting to include the required bootstrap JavaScript file to enable dismissible alerts!

Step 8: Adding Badges

Badges are a small label that draws attention to a new or important object:

🌐

<h1 style="text-align: center">Bootstrap Badges</h1>

<h6>1. Badge inside Heading</h6>
<h4>Notification <span class="badge bg-danger">5</span></h4>

<h6>2. Badge on Button</h6>
<button class="btn btn-primary">Message<span class="badge bg-light text-dark">3</span></button>

<h6>3. Badge Variants</h6>
<span class="badge bg-success">Success</span>
<span class="badge bg-info text-dark">Info</span>

Understanding Badges:

badge – Base class for badge styling
bg-danger – Background color (danger = red)
text-dark – Makes the text dark (needed for light-colored backgrounds)

Understanding Badges:

badge – The base class for badge styling
bg-danger – Background color (danger=red)
text-dark – Means dark text (this is needed for light backgrounds)

Real-world examples:

Shopping cart with the item count
Notifications with the number of unread messages
“New” “Beta”, “Sale” status labels.

Pro Tip: The text-dark class is important to badge light in color!

Step 9: Creating Basic Cards

Cards are versatile containers for showcasing information:

🌐

<h1 style="text-align: center">Bootstrap Cards</h1>

<div class="card" style="width: 18rem">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Some quick example text.</p>
        <a href="day2.html" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Card format:

card – Main container, has padding and border
card-body – Sub container for content with appropriate padding
card-title – Styled title for card
card-text – Ordinary text content with appropriate margin
width: 18rem – Use of width set to a fixed px (rem is a responsive unit)

Why use cards? Cards are the Swiss Army knife of web design. They can display:

Product listings in e-commerce sites
Blog post previews
User profiles
Pricing plans
And much more!

Why cards? Cards are the Swiss Army knife of web design. Cards can display:

Product listings on e-commerce sites
Blog post previews
User profiles
Pricing plans
and so many more!

Step 10: Cards with Images

🌐

<div class="card" style="width: 18rem">
    <img src="images/pic_trulli.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card with Image</h5>
        <p class="card-text">Some quick text about the image.</p>
    </div>
</div>

What is new here:

card-img-top – Puts image to the top of the card and rounds the corners with the card
The image will automatically fit the width of the card

Note – Don’t forget to always add an alt attribute for images for accessibility for seo!

Step 11: Cards with Headers and Footers

🌐

<div class="card" style="width: 18rem">
    <div class="card-header">Featured</div>
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">With a header and footer.</p>
    </div>
    <div class="card-footer text-muted">Footer text</div>
</div>

New components

card-header – Top of card where there is some kind of background color and padding
card-footer – Bottom of the card and is often used to put metadata or actions of some sort
text-muted – Changes text color to light to represent less important information

Use cases:

Header: Category, date, or label
Footer: Last time updated, author’s name, or some sort of secondary actions

Step 12: Image Overlay Cards

This is a card with text above the image:

🌐

<div class="card text-white">
    <img src="images/paris.jpg" class="card-img" alt="...">
    <div class="card-img-overlay">
        <h5 class="card-title">Overlay Title</h5>
        <p class="card-text">This is an overlay on the image.</p>
    </div>
</div>

How it works:

card-img – Makes image span the full card (not just top)
card-img-overlay – Positions content on top of the image
text-white – Makes text white so it’s visible on the image

How it works:

card-img – Makes the image span the card (not just the top)
card-img-overlay – Allows content to appear on top
text-white – Changes the text color to white, allowing it to stand out against the image

Best Use Cases:

Hero sections
Featured content
Portfolio items
Banner images with captions

Design Tip: Ensure that your image(s) are dark enough that the white text remains legible! Use a semi-transparent overlay on a light image.

Step 13: Card Groups

Card groups are used for grouping multiple cards together:

🌐

<h1 style="text-align: center">Card Groups & Decks</h1>

<div class="card-group">
    <div class="card">
        <img src="images/nature.jpg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card 1</h5>
            <p class="card-text">Some text.</p>
        </div>
    </div>
    <div class="card">
        <img src="images/pic_trulli.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">Card 2</h5>
            <p class="card-text">Some text.</p>
        </div>
    </div>
</div>

What card-group does:

Groups cards together as a single object
Sets every card in the group to be the same height
Removes the margin space between the cards

Best for: Pricing tables, comparison charts, or feature lists where you want all the cards to be the same height.

Step 14: Responsive Card Grid

🌐

<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card">
            <img src="images/nature.jpg" class="card-img-top">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Card content...</p>
            </div>
        </div>
    </div>
</div>

Understanding the grid classes:

Row – Creates a Bootstrap grid row
row-cols-1 – 1 card per row on small screens (mobile)
row-cols-md-3 – 3 cards per row on medium+ screens (tablets/desktops)
g-4 – Adds spacing (gutter) between cards
col – Wraps each card as a grid column

Why this matters:

This creates a responsive layout – one column on phones, three columns on larger screens. Your layout automatically adapts to screen size!

Pro Tip: Bootstrap’s grid system is incredibly powerful. Master it, and you can create any layout!

Code Explanation Sections

Button System

The button system in Bootstrap uses a two-part class structure:

1. Base class (btn): Provides fundamental button styling, including padding, border, font, and interactive states

2. Variant class (btn-primary, btn-danger, etc.): Applies specific colors and semantic meaning

This modular approach allows you to easily change button appearance by simply swapping the variant class. The system also includes:

Size modifiers (btn-lg, btn-sm) for different button dimensions
Width utilities (w-100) for full-width buttons
State attributes (disabled) for inactive buttons

Alert System

Bootstrap alerts provide contextual feedback messages. The structure follows this pattern:

alert (base) + alert-{variant} (color/context) + alert-dismissible (optional)

The dismissible functionality requires:

alert-dismissible class for proper spacing
fade show classes for animation
A close button with data-bs-dismiss=”alert” attribute
Bootstrap’s JavaScript loaded on the page

Badge System

Badges are inline elements that use the <span> tag. They’re designed to be:

Flexible: Can be placed inside buttons, headings, or standalone

Semantic: Background colors convey meaning (danger, success, etc.)

Adaptable: Text color can be adjusted with utility classes like text-dark

Card System

Cards are Bootstrap’s most versatile component. The hierarchy is:

.card (container)

├── .card-header (optional)

├── .card-img-top (optional)

├── .card-body (main content)

│ ├── .card-title

│ └── .card-text

└── .card-footer (optional)

For overlay cards, the structure changes to:

.card

├── .card-img (full-size background image)

└── .card-img-overlay (content layer on top)

Layout styles:

Card Group: Use this layout style when you need cards that are the same height and are in close proximity to each other
Grid System: Use this layout style for flexible and responsive layouts that allow gaps

Tables of Key Concepts

1.Components / Keywords Used

Name	Description
btn	Base class for all Bootstrap buttons, provides fundamental styling
alert	Container for displaying contextual feedback messages to users
badge	Small inline label used for counts, status indicators, or tags
card	Flexible content container with border, padding, and optional components
card-body	Main content area inside a card with proper padding
card-header	Top section of a card, typically used for titles or categories
card-footer	Bottom section of a card, often for metadata or secondary actions
card-img-top	Image positioned at the top of a card with rounded corners
card-img-overlay	Content layer positioned on top of a card image
card-group	Container that connects multiple cards as a single attached unit
btn-close	Bootstrap’s styled close button for dismissible components
alert-dismissible	Makes an alert closeable with a dismiss button

2. Key Properties / Parameters / Features

Name	Description
btn-primary	Primary action button, typically blue, for main actions
btn-secondary	Secondary button for less important actions
btn-success	Green button indicating positive/success actions
btn-danger	Red button for destructive or dangerous actions
btn-warning	Orange/yellow button for cautionary actions
btn-info	Light blue button for informational actions
btn-lg	Large button size modifier
btn-sm	Small button size modifier
w-100	Utility class making element full width (100%)
disabled	HTML attribute preventing interaction with button
alert-{variant}	Color variants for alerts (success, danger, warning, info, etc.)
fade show	Animation classes for smooth transitions when dismissing
bg-{color}	Background color utilities (bg-danger, bg-success, etc.)
text-dark	Makes text dark colored for better contrast on light backgrounds
text-white	Makes text white for dark backgrounds or image overlays
text-muted	Lightens text color to indicate less important content
card-title	Styled heading within a card body
card-text	Regular paragraph text with appropriate card styling
row	Bootstrap grid row container
row-cols-{n}	Defines number of columns per row at different breakpoints
g-{n}	Gutter spacing between grid columns (g-4 = 1.5rem spacing)
data-bs-dismiss	Bootstrap attribute that triggers dismissal of components
role=”alert”	ARIA attribute improving accessibility for screen readers

Next Steps - Keep Practicing!

Try these experiments:

Build a complete landing page using only the components you learned today
Create a product card grid with images, titles, prices, and “Add to Cart” buttons
Design a notification dashboard with different alert types
Make a pricing table using card groups
Add badges to a navigation menu showing notification counts

Next Steps – Keep Practicing!

Try these experiments:

Create a full-fledged landing page using only what you’ve learned today
Make a product card grid that has images, title, pricing, and add to cart buttons
Build a notification dashboard that has different alert types
Design a pricing table using card groups
Add a badge to a navigation menu showing the notification count

Challenge yourself :

Can you create a dismissable alert that shows successfully submitted after a form has been submitted?
Build a responsive card layout that displays 1 card on mobile, 2 cards on tablets, and 4 cards on desktop.
Design a user profile card with an overlay image and action buttons.

Finally, the best way to learn is to build real projects. Begin small, experiment often, and don’t be afraid to break things – this is truly how you learn!

Useful References

Here are a few good resources to help you dive deeper into Bootstrap:

Official Documentation

Bootstrap 5 Documentation – The official and most comprehensive resource
Bootstrap Buttons – Complete button documentation
Bootstrap Alerts – Alert component reference
Bootstrap Badges – Badge styling guide
Bootstrap Cards – Comprehensive card documentation

Learning Platforms

W3Schools Bootstrap Tutorial – Beginner-friendly tutorials with interactive examples
MDN Bootstrap Guide – CSS layout fundamentals that work with Bootstrap
FreeCodeCamp Bootstrap Course – Free, project-based learning

Practice & Inspiration

Bootstrap Examples – Official example templates to learn from
CodePen Bootstrap Projects – Real-world examples you can fork and modify
Start Bootstrap – Free Bootstrap themes and templates

Tools

Bootstrap Icons – Official icon library to enhance your designs
Bootstrap Cheatsheet – Quick reference for all classes

Source Code – https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/99143f6051200428008cf48288fecf2e1567f072/Bootstrap-Essentials/Day%203%20-%20Bootstrap%20-%20Buttons%2C%20Alerts%2C%20Badges%2C%20Card%20Component

What You Learned

Great work! You’ve just learned some of the most important components that Bootstrap has to offer. Let’s reflect on what you’ve just learned:

The most important takeaways

Buttons: You learned how to create beautiful, autoreactive buttons in various colors, sizes, and states without writing custom CSS. You also took note of the semantic meaning of each button type.
Alerts: You’ve learned how to supply visual feedback to users with contextual alert messages. You know how to make the alert dismissable in order to help the user experience without being overly intrusive.
Badges: You’ve learned how to add a notifications count, status label, and inline indicators so that the interfaces you’ll build will be more informative and engaging.
Cards: You learned about Bootstrap’s most flexible component! You’ll know how to create simple text cards, image cards, cards with headers/footers, overlay cards, and organize them in groups or responsive grids.
Responsive Design: You learned how Bootstrap’s grid system (row-cols-1 row-cols-md-3) works to automatically adapt mobile layouts to desktop layouts.
Bootstrap Philosophy: You’ll remember that Bootstrap leverages an array of base classes and modifier classes to provide consistent, modular design and functionality for Bootstrap components.

Skills You Have Acquired:

Quickly designing UI Components in a professional-looking manner
Knowing semantic design (determining when to use danger vs warning vs success)
Designing responsive layouts that work on any device
Combining multiple Bootstrap components
Reading and understanding Bootstrap’s class naming conventions

Output

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What is the best way to learn Bootstrap components as a beginner?

The beginner's easiest learning path to the Bootstrap is to construct small daily UI parts. At first, work with buttons, alerts, badges, and cards, and afterward, combine them in small projects like product grids, notification panels, or simple dashboards. Theoretical knowledge gets absorbed during the process of working on live projects.

How do I choose the right button color in Bootstrap?

Assign colors according to the action:
Primary for the most important actions
Success for the positive outcome
Danger for risky actions
Warning for signalling caution

Coloring buttons semantically will make your UX less puzzling and more comfortable for the user.

Why are alerts important in modern web apps?

Alerts are the most accessible way to tell users the consequences of their actions—an excellent mix of submission, an error warning, or even a new update. If alerts are not used, then the users are supposed to guess what happened when they pressed a button. They are of paramount importance in furnishing clear and accessible feedback.

How are Bootstrap cards useful in real projects?

Bootstrap cards are among the most versatile components. You can use it from product listings to blog previews, pricing grids, user profiles, portfolios, or featured content. Their tidy structure allows easy layout building and makes them responsive by default.

How do badges improve user experience?

Badges turn out to be the users' attention grabbers - they can show counts, statuses, or labels. Notifications, messages, items in a cart, or "new" tags are some of the areas where badges are most applicable. A tiny badge can still give a huge boost to your interface's interactivity and informality.

Our Story

Company

Services

Trusted By

Trusted By

Expertise

Trusted By

Trusted By

Let's Discuss - Requirements

Let's Discuss - Requirements

Let's Discuss - Requirements

Technologies

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Bootstrap Day 3: Mastering Buttons, Alerts, Badges, and Cards

Table of Contents

Introduction

Step-by-Step Tutorial

Step 1: Setting Up Your HTML Document

Step 2: Creating Bootstrap Buttons

Step 3: More Button Variants

Step 4: Button Sizes

Step 5: Full-Width and Disabled Buttons

Step 6: Creating Bootstrap Alerts

Step 7: Dismissible Alerts

Step 8: Adding Badges

Step 9: Creating Basic Cards

Step 10: Cards with Images

Step 11: Cards with Headers and Footers

Step 12: Image Overlay Cards

Step 13: Card Groups

Step 14: Responsive Card Grid

Code Explanation Sections

Tables of Key Concepts

Next Steps - Keep Practicing!

Useful References

What You Learned

Output

Categories

Related Articles

Bootstrap Day 6: Flexbox Utilities, Responsive Utilities + Z-Index + Order, Tables + Lists + Spinners

Bootstrap Day 5 : Modal, Tooltip, Popover, Carousel and Progress Bar

Bootstrap Day 4: Building Smart Navigation & Interactive Forms

Follow Us

Let's Work Together

Related Tags

Frequently Asked Questions FAQs

Services

Our Expertise

Hire Developers

Technologies

Contact For Sales