web-dev-qa-db-fra.com

Aligner le texte à la droite avec Bootstrap 4

J'utilise actuellement bootstrap 4. J'essaie d'aligner le texte directement sur l'en-tête de ma carte. J'ai essayé d'utiliser ml-auto mais cela n'a pas fonctionné. Quelle pourrait être la solution?

 See the red area

Voici le code d'en-tête de ma carte:

<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>
htmlcssbootstrap-4twitter-bootstrap-4
3
Root Haxx

Pour que la classe ml-auto fonctionne, il vous suffit d’ajouter la classe d-flex (display: flex) à l’élément parent de la manière suivante:

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

4
WebDevBooster

Cela dépend de la version de Bootstrap que vous utilisez

Bootstrap 3

utiliser la classe text-right 

Bootstrap 4

Dans la nouvelle version, vous pouvez utiliser la classe text-lg-right en utilisant la taille de la fenêtre de visualisation que vous préférez, bien sûr.

Suppléments

Vous vérifiez plus dans cette question ou consultez la documentation officielle v4

4
dstrants

Je n'utilise pas Bootstrap, j'utilise le Materialise mais vous pouvez lui donner un style normal
sur votre 

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

Cela aligne uniquement votre balise d'ancrage à droite

1
Dustbin Saves you

Utilisez cette classe 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>
0
Sarvan Kumar

Utilisez ce cordon ... 

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