Vertically align text inside a Bootstrap alert without using line-height

Question

I am looking to vertically align text content inside my Bootstrap 4 alerts, crucially without using line-height and ideally without absolute positioning.

My alert looks like this:

<div class="alert alert-info" role="alert">
        Your free trial will expire on <b>23-May-2022</b>. To retain your subscription after this date you can <a href="/admin/crmpicco-gvb-trial/plan">upgrade</a> to one of our paid plans.
</div>

My SCSS declaration below does work:

.alert.alert-info {
  border: 1px solid #0f6fc5;
  background: #EAF2FA;
  color: #212529;
  min-height: 64px;
  display: flex;
  align-items: center;
}

However, it removes the spacing around then <b> and <a> tags.

Is there a way to fix this to respect the spacing without a hacky margin solution to the b and a elements?

Crystal · Accepted Answer · 2022-04-13T05:34:14.813

maybe enlcosed your text to a span?? Is this what you mean?

.alert.alert-info {
  border: 1px solid #0f6fc5;
  background: #EAF2FA;
  color: #212529;
  min-height: 64px;
  display: flex;
  align-items: center;
  text-align:center;
}

<div class="alert alert-info" role="alert">
        <span>Your free trial will expire on <b>23-May-2022</b>. To retain your subscription after this date you can <a href="/admin/crmpicco-gvb-trial/plan">upgrade</a> to one of our paid plans.</span>
</div>

Vertically align text inside a Bootstrap alert without using line-height

1 Answers1