Align text right in-line with Bootstrap 4 [duplicate]

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>

Answer 1

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>

Answer 2

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

Answer 3

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