❮ Previous Next ❯

Content Components

  • Structure and design UI content using Bootstrap components.

  • Introduction to Content Components

    Content components in Bootstrap are used to present information clearly and meaningfully.

    Unlike navigation or form components, content components focus on:

    • Displaying information

    • Highlighting important messages

    • Grouping related content

    • Improving readability and visual hierarchy

    The most commonly used content components are:

    1. Cards

    2. Alerts

    3. Badges

    Cards

    What Is a Card ? 

    A Card is a flexible content container used to group related information such as:

    • Text

    • Images

    • Buttons

    • Links

    • Lists

    Cards replace older layout patterns like panels and wells.

    Why Cards Are Important

    Cards are used because they:

    • Visually separate content

    • Improve readability

    • Work well in grid layouts

    • Are responsive by default

    Cards are widely used in:

    • Blogs

    • Product listings

    • Dashboards

    • Profile pages

Creating a Basic Card Component in Bootstrap

The .card class creates a flexible content container with a title, text, and action button. 

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is card content.</p>
    <a href="#" class="btn btn-primary">Read More</a>
  </div>
</div>

  • Explanation:

    • .card → main wrapper

    • .card-body → content area

    • .card-title → heading

    • .card-text → description

Adding an Image to a Bootstrap Card

The .card-img-top class adds an image at the top of a Bootstrap card. 

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Product</h5>
    <p class="card-text">Product description</p>
  </div>
</div>

  • Use case:

    • Product cards

    • Blog thumbnails

    • Featured content

    Card Layout with Grid

    Cards are commonly combined with the grid system.

Using Bootstrap Grid with Cards

Bootstrap grid classes like .row and .col-md-4 are used to arrange cards in responsive columns. 

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">Card 1</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">Card 2</div>
    </div>
  </div>
</div>

  • This creates responsive card layouts.

    Card Best Practices

    • Keep content concise

    • Maintain consistent card sizes

    • Use cards for grouping, not layout replacement

    • Avoid overloading cards with too much information

  • Alerts

    What Is an Alert ?

    An Alert is used to display important messages to users, such as:

    • Success messages

    • Errors

    • Warnings

    • Informational notices

    Alerts communicate system feedback clearly.

    Why Alerts Are Important

    Alerts:

    • Provide immediate feedback

    • Prevent user confusion

    • Improve trust and usability

    • Communicate system status

Displaying Alert Messages in Bootstrap

The .alert class with contextual variants like .alert-success and .alert-danger displays styled notification messages. 

<div class="alert alert-primary">
  This is a primary alert.
</div>

<div class="alert alert-success">Success message</div>
<div class="alert alert-danger">Error message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-info">Info message</div>

  • Each variant communicates a specific meaning.

Creating a Dismissible Alert

Adding .alert-dismissible and a close button allows the alert message to be removed by the user. 

<div class="alert alert-warning alert-dismissible fade show">
  Warning! Please check your input.
  <button class="btn-close" data-bs-dismiss="alert"></button>
</div>

  • This alert:

    • Can be closed by the user

    • Requires Bootstrap JavaScript

    Alert Best Practices

    • Use alerts only when necessary

    • Choose the correct alert type

    • Avoid overwhelming users with alerts

    • Keep messages short and clear

    Badges

    What Is a Badge ?

    A Badge is a small visual indicator used to:

    • Display counts

    • Highlight status

    • Label content

    Badges are supportive UI elements, not main content.

    Common Use Cases for Badges

    Badges are commonly used for:

    • Notification counts

    • Status labels

    • Categories

    • New/updated indicators

Adding and Styling Badges

The .badge class displays small count or status labels, and can be used inside buttons for notifications. 

<span class="badge bg-primary">New</span>

<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Error</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>

<button class="btn btn-primary">
  Notifications <span class="badge bg-light text-dark">5</span>
</button>

  • This is commonly used for:

    • Notification counters

    • Messages

    • Cart items

Creating Rounded Pill Badges

The .rounded-pill class makes a badge fully rounded for a pill-shaped appearance. 

<span class="badge rounded-pill bg-success">Active</span>

  • Rounded badges are often used for:

    • Status indicators

    • Modern UI design

    Badge Best Practices

    • Use badges sparingly

    • Keep text short

    • Do not overload UI with badges

    • Use badges to support, not distract

    Choosing Between Cards, Alerts, and Badges

    ComponentPurpose
    CardGroup and present content
    AlertDisplay important messages
    BadgeHighlight small status/count info

    Each component serves a different responsibility.

    Common Mistakes

    1. Using alerts as permanent content

    2. Putting too much content inside cards

    3. Using badges as buttons

    4. Overusing bright alert colors

    5. Ignoring responsiveness

      Components should be used intentionally.

    ❮ Previous Next ❯