Align text right in-line with Bootstrap 4

Question

I'm currently using bootstrap 4. I'm trying to align text right on my card header, I tried using ml-auto but it didn't work. What could be the solution?

Here's my card header code:

<div class="card-header bg-info text-white">
  <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
  <a href="#" class="text-white ml-auto">Add Media</a>
</div>

score 13 · Accepted Answer · answered Feb 05 '18 at 05:46

13

In order for the ml-auto class to work you just need to add the d-flex class (display:flex) to the parent element like so:

<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="card-header bg-info text-white d-flex">
    <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
    <a href="#" class="text-white ml-auto">Add Media</a>
</div>

answered Feb 05 '18 at 05:46

WebDevBooster

14,674
9
66
70

This is only answer that works, thank you! – xcomsw Feb 05 '18 at 05:49
done, thanks again! – xcomsw Feb 05 '18 at 05:52

dstrants · Answer 2 · 2018-02-05T05:47:12.870

6

It depends on the version of Bootstrap you are using

Bootstrap 3

use the class text-right

Bootstrap 4

In newest version, you can use the class text-lg-right using the viewport size you prefer of course

Additionals

You check more in this question or check the official documentation v4

edited Feb 05 '18 at 05:47

answered Feb 05 '18 at 05:39

dstrants

7,423
2
19
27

score 1 · Answer 3 · answered Feb 05 '18 at 05:38

1

I don't use Bootstrap, I use the Materialize but you could add normal styling to it,
on your

 <a href="#" class="text-white" style="text-align: right;"><i class="fa-th"></i> Media Library</a>

This would align only you anchor tag to the right

answered Feb 05 '18 at 05:38

Dustbin Saves you

116
1
8

score 0 · Answer 4 · answered Feb 05 '18 at 05:36

0

Use this cord...

<div class="card-header bg-info text-white" style="text-align:right">
       <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
 </div>

answered Feb 05 '18 at 05:36

vidarshana

80
3
12

but this would align all of my text on the right side, I want only a particular text to align right, the title should remain on the left side. – xcomsw Feb 05 '18 at 05:37
ah ok... put this cord for your text line it works fine... I use this ... Do not use this for the whole row.... – vidarshana Feb 05 '18 at 05:39
Media Library – vidarshana Feb 05 '18 at 05:40

score 0 · Answer 5 · answered Feb 05 '18 at 05:40

0

Use this class text-right..

<div class="card-header bg-info text-white text-right">
   <a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
</div>

answered Feb 05 '18 at 05:40

Sarvan Kumar

926
1
11
27

Align text right in-line with Bootstrap 4

5 Answers5

Bootstrap 3

Bootstrap 4

Additionals