Vertically align Bootstrap badge inside heading
Solution 1
Always hated this problem.
A little hacky but this works:
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h1,h2,h3 {
vertical-align:middle;
}
h1>.badge, h2>.badge, h3>.badge {
vertical-align:middle;
margin-top: -0.5em;
}
Defined the heading font-sizes for demo purposes
Solution 2
In Bootstrap 4, the vertical alignment issue is no longer a problem since the badge will inherit the size of the containing heading..
<div class="container">
<h1><span class="badge badge-pill badge-dark">badge</span> Heading 1</h1>
<hr>
<h2><span class="badge badge-pill badge-dark">badge</span> Heading 2</h2>
<hr>
<h3><span class="badge badge-pill badge-dark">badge</span> Heading 3</h3>
</div>
However, the align-middle
class be used to vertically align badges outside of the heading.
<div class="container">
<span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h1 align-middle">Heading 1</span>
<hr>
<span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h2 align-middle">Heading 2</span>
<hr>
<span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h3 align-middle">Heading 3</span>
</div>
Demo: https://www.codeply.com/go/rE0z3665zh
Zim
Find me on Codeply (1000's of free snippets) Frontend developer, creator of custom themes. I work with JavaScript, Node.js, Vue, React, APIs, Responsive Design, CSS, Bootstrap, Airtable, Firebase, Wordpress, etc... Bootstrap Themes Themes by Tophat (free, open-source) Themes.guide (free & premium) More Tools Bootstrap 4 Starter Bootstrap Theme Builder Bootstrap Pocket Guide Bootstrap 4 Examples Tutorials Learn Bootstrap 4 Bootstrap 4: Change Primary Color Bootstrap 4: Create a Custom Theme Codementor
Updated on April 24, 2020Comments
-
Zim about 4 years
When I use a Bootstrap
badge
inside of heading such ash1
,h2
,h3
the vertical alignment is off. Thebadge
aligns towards the bottom of the heading text. I'd like the badge to align vertically centered with the heading text.HTML
<h1><span class="badge">badge</span> Heading 1</h1> <hr> <h2><span class="badge">badge</span> Heading 2</h2> <hr> <h3><span class="badge">badge</span> Heading 3</h3>
CSS
h1,h2,h3 { vertical-align:middle; } h1>.badge, h2>.badge, h3>.badge { vertical-align:middle; }
Result..
See this Bootply: http://bootply.com/88526
How can I get this to align on center vertically?