Menu
How do you increase a badge size in bootstrap 4?
I have tried to put in in heading (<h3></h3>) blocks, but that changes the display to block, which is not what I need (and I guess heading should be reserved to... headings).
693
Bootstrap 4 Default Settings Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5. The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif. In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).
To use badges just add <span class = "badge"> to links, Bootstrap navs, and more. When there are no new or unread items, badges will simply collapse via CSS's :empty selector, provided no content exists within.
Simply add a font-size: 8px; to your CSS selector. Replace 8 by any number you wish to change your font-size to. Save this answer.
Place the badge inside a heading element, inside an element with class lead, or make your own sizing class in a custom stylesheet or embedded style element:
body {
padding: 20px;
}
.badge.even-larger-badge {
font-size: 1.1em;
}<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<h2><span class="badge badge-primary">Heading 2</span></h2>
<h3><span class="badge badge-primary">Heading 3</span></h3>
<p>
<span class="badge badge-primary">Regular</span>
<span class="lead"><span class="badge badge-secondary">Lead</span></span>
<span class="badge badge-primary even-larger-badge">Custom</span>
</p>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
