CODEWITHSUNDEEP
bootstrap-4
Steve Young
Steve Young

Reputation: 552

Sizing Bootstrap Alerts

What is the best way to change the size of Bootstrap 4 alerts to match input sizes?

I am using col-form-label-sm, form-control-sm and btn-sm for form elements but there is no equivalent alert-sm for the Alert component.

I've tried adding the utility small class to the alert div but this results in a smaller font-size than the other elements and the close button is not in the middle anymore.

Fiddle

Upvotes: 1

Views: 3688

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

It's the padding that makes the difference in height. Use the padding utility classes on the alerts and close buttons...

https://jsfiddle.net/ozuwpxux/

<div class="alert alert-warning alert-dismissible fade show p-2" role="alert">
    This is a bit large!
    <button type="button" class="close p-1" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>

  <div class="alert alert-warning alert-dismissible small fade show p-2" role="alert">
    Better, but the font-size is smaller than other elements and the close button is not correctly vertically aligned.
    <button type="button" class="close p-1" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>

Upvotes: 3

Related Questions