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