Bootstrap → Lesson 3.3 — Content Components (Cards, Badges, Alerts, List Groups, Pagination)

About Us
Courses
Getting started

Home

See what fits your budget

Become an Instructor

Blog

Contact

Community

Testimonials

Instructors

Events

FAQs

From the blog

The Future of Navigation: Beyond the Top Nav + Hero Pattern

Why standard layouts are losing effectiveness The classic top nav + hero works for simple marketing pages, but it struggles […]

Read More

Building a Content-Driven Site That Scales: Headless CMS, MDX, or Static?

Your decision is mostly about workflow All three approaches can be fast and SEO-friendly. The real question is: who publishes content, […]

Read More
Blog

Home
Courses
Blog
Getting started

Home

See what fits your budget

Blog

Contact

Community

Testimonials

Instructors

Events

FAQs

From the blog

The Future of Navigation: Beyond the Top Nav + Hero Pattern

Why standard layouts are losing effectiveness The classic top nav + hero works for simple marketing pages, but it struggles […]

Read More

Building a Content-Driven Site That Scales: Headless CMS, MDX, or Static?

Your decision is mostly about workflow All three approaches can be fast and SEO-friendly. The real question is: who publishes content, […]

Read More

Lesson 3.3 — Content Components (Cards, Badges, Alerts, List Groups, Pagination)

Lesson overview
Content components help you present information consistently: cards for grouping, badges for labels, alerts for messages, list groups for lists, and pagination for multi-page navigation.

Learning outcomes

Create flexible card layouts
Use badges for status labels
Build structured lists and pagination UI

Cards

<h5 class=“card-title mb-1“>Card title</h5>

<p class=“card-text text-secondary mb-3“>Supporting text goes here.</p>

<a class=“btn btn-primary“ href=“#“>Action</a>

</div>

Badges

<span class=“badge text-bg-success“>Active</span>

<span class=“badge text-bg-warning“>Pending</span>

Alerts

This is an informational message.

</div>

List group

Inbox <span class=“badge text-bg-primary rounded-pill“>3</span>

</li>

<li class=“list-group-item“>Starred</li>

</ul>

Pagination

</ul>

</nav>

Practice tasks

Create a 3-card row using the grid (col-md-4) and make them equal height (hint: use h-100 on cards inside columns).
Add badges for “New”, “Pro”, “Sale” labels.

Quick check

When should you use an alert vs a badge?
What does rounded-pill change visually?

Lesson summary

Content components standardize how you display information and status.

The Future of Navigation: Beyond the Top Nav + Hero Pattern

Building a Content-Driven Site That Scales: Headless CMS, MDX, or Static?

The Future of Navigation: Beyond the Top Nav + Hero Pattern

Building a Content-Driven Site That Scales: Headless CMS, MDX, or Static?

About us

Blog posts

Bootstrap

Curriculum

Lesson 3.3 — Content Components (Cards, Badges, Alerts, List Groups, Pagination)

Leave a Reply Cancel reply

Explore courses

About us

Blog posts

Subscribe

Modal title