Getting text in a Bootstrap 5 card header right aligned-CodePudding

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.

CodePudding user response：

<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>

CodePudding user response：

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/[email protected]/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>