Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningBadges
Badges are small components useful for labeling and providing additional information. We will use them to finish our contact section.
Basic example
Use .badge class together with color class (for example badge-primary) to provide your visitors with highlighted, new or unread items by adding it to links, text navs, and more.
<h2>Example heading <span class="badge badge-primary">New</span></h2>
Example heading New
Sizes
Badges scale to match the size of the immediate parent element by using relative font sizing
and em units.
<h1>Example heading <span class="badge badge-primary">New</span></h1>
<h2>Example heading <span class="badge badge-primary">New</span></h2>
<h3>Example heading <span class="badge badge-primary">New</span></h3>
<h4>Example heading <span class="badge badge-primary">New</span></h4>
<h5>Example heading <span class="badge badge-primary">New</span></h5>
<h6>Example heading <span class="badge badge-primary">New</span></h6>
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Colors
Use our badge color classes to quickly change the appearance of a badge.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
Pills
Use the .rounded-pill utility class to make badges more rounded with a larger
border-radius.
<span class="badge rounded-pill badge-primary">Primary</span>
<span class="badge rounded-pill badge-secondary">Secondary</span>
<span class="badge rounded-pill badge-success">Success</span>
<span class="badge rounded-pill badge-danger">Danger</span>
<span class="badge rounded-pill badge-warning">Warning</span>
<span class="badge rounded-pill badge-info">Info</span>
<span class="badge rounded-pill badge-light">Light</span>
<span class="badge rounded-pill badge-dark">Dark</span>
Icon inside
You can place an icon inside the badge. Read icons docs to see all the available icons.
<div class="badge badge-primary p-3 rounded-4">
<i class="fas fa-chart-pie"></i>
</div>
Step 1 - add text to the badge
In our project we will use a badge with an icon inside. Put it in flexbox and add text to it.
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
Technical support
support@example.com
+1 234-567-89
Thanks to flexbox, we can define how the badge should be aligned in relation to the text.
The align-items-start class makes it top-aligned. However, if we change it to the class align-items-center or
align-items-end then we can modify the alignment.
<!-- Top-aligned -->
<div class="d-flex align-items-start mb-5">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
<!-- Center-aligned -->
<div class="d-flex align-items-center mb-5">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
<!-- Bottom-aligned -->
<div class="d-flex align-items-end mb-5">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
Technical support
support@example.com
+1 234-567-89
Technical support
support@example.com
+1 234-567-89
Technical support
support@example.com
+1 234-567-89
In addition, we use the text-muted classes to give a gray color to the secondary text, and the fa-fw (fixed width) class to make all icons in badges the same width (by default icons can be different, which would make our badges uneven)
Step 2 - create 4 badges within a grid
Let's create 4 badges for our contact form and place them in the grid, two columns in a row.
Note that you don't need to add 2 <div class="row"> elements. One is enough, and if you add 4 columns inside, each 6 grid units wide, then they will automatically stack underneath each other if they exceed 12 grid units. Here we have 24 units combined (4 columns, 6 units wide each) so they will split nicely into 2 rows.
<div class="row gx-lg-5">
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-dollar-sign fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Sales questions</p>
<p class="text-muted mb-0">sales@example.com</p>
<p class="text-muted mb-0">+1 234-567-88</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-newspaper fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Press</p>
<p class="text-muted mb-0">press@example.com</p>
<p class="text-muted mb-0">+1 234-567-87</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-bug fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Bug report</p>
<p class="text-muted mb-0">bugs@example.com</p>
<p class="text-muted mb-0">+1 234-567-86</p>
</div>
</div>
</div>
</div>
Technical support
support@example.com
+1 234-567-89
Sales questions
sales@example.com
+1 234-567-88
Press
press@example.com
+1 234-567-87
Bug report
bugs@example.com
+1 234-567-86
Step 3 - add badges to the Contact section
Now let's add our badges to the second column in the Contact Section.
<!-- Section: Contact -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Contact us</h3>
<div class="row gx-xl-5">
<div class="col-lg-5 mb-4 mb-lg-0">
<form>
<!-- Name input -->
<div class="form-outline mb-4" data-mdb-input-init>
<input type="text" id="form4Example1" class="form-control" />
<label class="form-label" for="form4Example1">Name</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4" data-mdb-input-init>
<input type="email" id="form4Example2" class="form-control" />
<label class="form-label" for="form4Example2">Email address</label>
</div>
<!-- Message input -->
<div class="form-outline mb-4" data-mdb-input-init>
<textarea class="form-control" id="form4Example3" rows="4"></textarea>
<label class="form-label" for="form4Example3">Message</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
<label class="form-check-label" for="form4Example4">
Send me a copy of this message
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>Send</button>
</form>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="row gx-lg-5">
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-dollar-sign fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Sales questions</p>
<p class="text-muted mb-0">sales@example.com</p>
<p class="text-muted mb-0">+1 234-567-88</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-newspaper fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Press</p>
<p class="text-muted mb-0">press@example.com</p>
<p class="text-muted mb-0">+1 234-567-87</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-bug fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Bug report</p>
<p class="text-muted mb-0">bugs@example.com</p>
<p class="text-muted mb-0">+1 234-567-86</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Contact -->
And this is what it should look like in the end:
About author
Michal Szymanski
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.