CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-5
Jonathan Bechtel
Jonathan Bechtel

Reputation: 3607

Getting text in a Bootstrap 5 card header right aligned

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.

Upvotes: 1

Views: 3966

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362290

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

Upvotes: 1

Arleigh Hix
Arleigh Hix

Reputation: 10857

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>

Upvotes: 2

Md.Ashraful Islam
Md.Ashraful Islam

Reputation: 83

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

Upvotes: 1

Related Questions