Alignez deux div horizontalement côte à côte au centre de la page en utilisant bootstrap css
Veuillez vous référer au code ci-dessous ce que j'ai essayé
<div class="row">
<div class="center-block">First Div</div>
<div class="center-block">Second DIV </div>
</div>
Sortie :
First Div
SecondDiv
Résultats escomptés:
First Div Second Div
Je veux aligner les deux divs horizontalement au centre de la page en utilisant bootstrap css. comment puis-je faire cela ? Je ne veux pas utiliser de CSS simple et de concept flottant pour le faire. parce que j'ai besoin d'utiliser le CSS bootstrap pour travailler dans toutes sortes de mises en page (c'est-à-dire toutes les tailles et résolutions de fenêtre ) au lieu d'utiliser la requête multimédia.
5 réponses
Cela devrait faire l'affaire:
<div class="container">
<div class="row">
<div class="col-xs-6">
ONE
</div>
<div class="col-xs-6">
TWO
</div>
</div>
</div>
Lisez la section Système de grille des documents Bootstrap pour vous familiariser avec le fonctionnement des grilles de Bootstrap:
Utilisez les classes bootstrap col-xx-# et col-xx-offset-#
Donc, ce qui se passe ici, c'est que votre écran est divisé en 12 colonnes. Dans col-xx-#, # est le nombre de colonnes que vous couvrez et offset est le nombre de colonnes que vous quittez.
Pour xx, dans un site web général, md est préféré et si vous voulez que votre mise en page soit la même dans un appareil mobile, xs est préféré.
Avec ce que je peux faire de votre exigence,
<div class="row">
<div class="col-md-4">First Div</div>
<div class="col-md-8">Second DIV </div>
</div>
Devrait faire l'affaire.
Pour aligner deux divs horizontalement, il suffit de combiner deux classes de Bootstrap: Voici comment:
<div class ="container-fluid">
<div class ="row">
<div class ="col-md-6 col-sm-6">
First Div
</div>
<div class ="col-md-6 col-sm-6">
Second Div
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
First Div
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
Second Div
</div>
</div>
Cela fait l'affaire.
Solution alternative Bootstrap 4 (de cette façon, vous pouvez utiliser des divs qui sont plus petits que col-6):
<div class="container">
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>