Getting text in a Bootstrap 5 card header right aligned

Question

I have a card in Bootstrap 5, and I would like some of the contents of the header to be right aligned, and the other content to be left aligned. So far everything is left-aligned, no matter what I do.

Here's some sample code:

  <div class="card">
    <div class="card-header">
      <a href="/users">Users</a>
      <span class="text-end text-muted">
             48
      </span>
    </div>
    <div class="card-body">
       <p>Card content</p>
    </div>
  </div>

So far in the span I have tried text-end, float-right, and pull-right but it has no effect. Everything is left-aligned.

Thank you so much for your help everyone.

Also, there are several questions about this type of topic, but most of the examples are in Bootstrap 4. Am looking for something specific to Bootstrap 5, since the bootstrap 4 examples do not seem to work.

score 2 · Answer 1 · answered Oct 19 '21 at 05:40

This can be done with Flex.
Apply .d-flex to the .card-header then .ms-auto to the <span> you want to be on the right.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="card">
  <div class="card-header d-flex">
    <a href="/users">Users</a>
    <span class="ms-auto text-muted">48</span>
  </div>
  <div class="card-body">
    <p>Card content</p>
  </div>
</div>

score 1 · Answer 2 · answered Oct 19 '21 at 05:00

<div class="card ">
    <div class=" card-header">
        <a href="/users">Users</a>
        <span class="float-end text-muted">
            48
        </span>
    </div>
    <div class="card-body">
        <p>Card content</p>
    </div>
</div>

Yo can also move the contents of the header to be right

  <div class="card ">
        <div class=" card-header text-end">
            <a href="/users">Users</a>
            <span class="float-end text-muted">
                48
            </span>
        </div>
        <div class="card-body">
            <p>Card content</p>
        </div>
    </div>

score 1 · Accepted Answer · answered Oct 19 '21 at 12:53

There are other Bootstrap 5 answers like this. All uses of left and right have been replaced with start and end in Bootstrap 5 for RTL support...

In your case the easiest way is to use float-end...

    <div class="card">
        <div class="card-header">
            <a href="/users">Users</a>
            <span class="float-end text-muted"> 48 </span>
        </div>
        <div class="card-body">
            <p>Card content</p>
        </div>
    </div>

Or, make the card-header flexbox using d-flex and then auto margin (ms-auto)...

   <div class="card">
        <div class="card-header d-flex">
            <a href="/users">Users</a>
            <span class="ms-auto text-muted"> 48 </span>
        </div>
        <div class="card-body">
            <p>Card content</p>
        </div>
   </div>

Demo

Getting text in a Bootstrap 5 card header right aligned

3 Answers3