how to display bootstrap-alert height to smaller font, using bootstrap classes?

Question

I have set alert after clicking delete-button. but its default height is bigger and I wanted to make it smaller(height).

I tried display-4 property, but it didn't worked. I have set width to half of sceen by w-50, but half height of alert doesn't work as h-50.

<div class="offset-3 alert alert-danger display-4 w-50 ">

is there any class, like sm, xs to make alert small, like we use it in <button class="btn-sm">?

Answer 1

Add p-1 class to it, the large size is due to padding in the alert. Reduce it by using p-1 utility class of bootstrap. It will reduce the padding to 4px;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="alert alert-danger p-1">
  Small alert
</div>

<div class="alert alert-danger">
  Normal alert
</div>