Vertically align Bootstrap badge inside heading

by

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

More Related Contents:

  1. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  2. How to change the bootstrap primary color?
  3. Bootstrap 3: pull-right for col-lg only
  4. Centering the image in Bootstrap
  5. Bootstrap dropdown sub menu missing
  6. Order columns through Bootstrap4
  7. Center an element in Bootstrap Navbar
  8. Bootstrap Center Vertical and Horizontal Alignment
  9. How to use particular CSS styles based on screen size / device
  10. Remove gutter space for a specific div only
  11. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  12. How to build a 2 Column (Fixed – Fluid) Layout with Twitter Bootstrap?
  13. Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap
  14. Bootstrap icons are loaded locally but not when online
  15. Bootstrap grid with fixed wrapper – Prevent columns from stacking up
  16. Bootstrap xs columns wrap
  17. What is class=”mb-0″ in Bootstrap 4?
  18. Bootstrap 3 – desktop view on a mobile device
  19. Customize Bootstrap 4’s grid-system Breakpoints
  20. Bootstrap 4 – Navbar items outside the collapse
  21. Bootstrap change order of columns
  22. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  23. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  24. How can I change the order of Bootstrap columns?
  25. Bootstrap 4 custom build generator / download [duplicate]
  26. How do I make card-columns order horizontally?
  27. How to make a Bootstrap 4 full width dropdown in Navbar?
  28. Bootstrap Navbar list items/links not showing
  29. Centering the navbar content in Bootstrap 4 (alpha 5)
  30. Bootstrap Grid System new line does not look nice

Leave a Comment