askvity

How to Change Size of Label in Bootstrap?

Published in Bootstrap Label Size 3 mins read

To change the size of a label in Bootstrap, you typically need to apply custom CSS styles, as Bootstrap labels often inherit their size from their containing elements.

Bootstrap labels, like the older .label class or modern badge components (.badge), assume the size of their containing elements. According to the reference, if you wish to allow bigger or smaller labels, you may need to add custom CSS of .label-large or .label-small or similar custom classes.

Methods for Adjusting Bootstrap Label Size

Since Bootstrap's core utility classes don't include specific size modifiers for labels or badges (other than default or slightly larger/smaller padding adjustments on badges like .badge-pill), the most effective way to control their font size is through custom styling.

Here are the primary methods:

  1. Using Custom CSS Classes (Recommended):
    This is the most flexible and maintainable approach, aligning with the method suggested by the reference.

    • Define Custom Classes: Create CSS rules for classes like .label-large, .label-small, or more general size classes.
    • Apply Styles: Use properties like font-size to control the text size. You might also adjust padding if you're using components like badges, as their size is often dictated by font size and padding.
    /* Custom CSS file or style block */

.label-small {
  font-size: 0.8em; /* Or a specific pixel value like 12px */
  /* Adjust padding for badges if needed */
  padding: 0.15em 0.4em;
}

.label-large {
  font-size: 1.2em; /* Or a specific pixel value like 18px */
  /* Adjust padding for badges if needed */
  padding: 0.4em 0.8em;
}

/* Example for modern .badge class */
.badge-small {
  font-size: 0.8em;
  padding: 0.25em 0.5em;
}

.badge-large {
  font-size: 1.2em;
  padding: 0.6em 1em;
}
    • Implement in HTML: Add the custom class alongside the standard Bootstrap class.
    <span class="label label-default label-small">Small Label</span>
<span class="label label-primary label-large">Large Label</span>

<!-- For Bootstrap 4/5 Badges -->
<span class="badge bg-secondary badge-small">Small Badge</span>
<span class="badge bg-info badge-large">Large Badge</span>

  2. Inheriting Size from Container:
    As mentioned in the reference, labels assume the size of their containing element. If you wrap the label in an element with a specific font size, the label's text size will often follow.

    <p style="font-size: 1.5em;">
  This text is larger, and so is the
  <span class="label label-warning">Warning Label</span>
  inside it.
</p>

    Note: This affects all text within the container, not just the label.

  3. Using Inline Styles (Less Recommended):
    You can apply the font-size property directly to the label or badge element using the style attribute. While quick for testing, this is generally not recommended for maintainability or consistency across your site.

    <span class="label label-info" style="font-size: 1.5em;">Large Inline Label</span>

<!-- For Bootstrap 4/5 Badges -->
<span class="badge bg-danger" style="font-size: 1.5em;">Large Inline Badge</span>

Summary Table

Method Description Pros Cons
Custom CSS Classes Define .label-small, .label-large (or .badge-small, etc.) in CSS. Flexible, maintainable, reusable. Requires writing and linking custom CSS.
Container Inheritance Place label in an element with adjusted font size. Can be useful if container size varies. Affects all text in the container.
Inline Styles Apply style="font-size: ..." directly to the element. Quick for one-off cases or testing. Hard to manage, not reusable, less clean.

By using custom CSS classes as suggested by the Bootstrap documentation and reference, you gain granular control over label and badge sizing while maintaining a structured and scalable stylesheet.

Related Articles