Alignez deux divs horizontalement côte à côte au centre de la page à l'aide de 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>

production :

First Div
SecondDiv

Production attendue :

                      First Div        Second Div

Je veux aligner les deux divs horizontalement au centre de la page en utilisant bootstrap css. Comment puis-je faire ceci ? Je ne veux pas utiliser de css simple et un concept flottant pour ce faire. parce que j'ai besoin d'utiliser le bootstrap css pour travailler dans toutes sortes de mises en page (c'est-à-dire toutes les tailles de fenêtre et toutes les résolutions) au lieu d'utiliser la requête multimédia.

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 de la documentation Bootstrap pour vous familiariser avec le fonctionnement des grilles Bootstrap:

http://getbootstrap.com/css/#grid

Utilisez les classes bootstrap col-xx-#etcol-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 le décalage est le nombre de colonnes que vous laissez.

Pour xx, dans un site Web général, il mdest préférable et si vous souhaitez que votre mise en page se ressemble sur un appareil mobile, il xsest préférable.

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.

Solution alternative Bootstrap 4 (de cette façon, vous pouvez utiliser des div 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>

Plus

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

Pour aligner deux divs horizontalement, il vous 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>

La réponse fournie par Ranveer (deuxième réponse ci-dessus) ne fonctionne absolument PAS.

Il dit d'utiliser col-xx-offset-#, mais ce n'est pas ainsi que les compensations sont utilisées.

Si vous avez perdu votre temps à essayer d'utiliser col-xx-offset-#, comme je l'ai fait sur la base de sa réponse, la solution est d'utiliser offset-xx-#.

Alternative pour laquelle j'ai programmé Angular:

    <div class="form-row">
        <div class="form-group col-md-7">
             Left
        </div>
        <div class="form-group col-md-5">
             Right
        </div>
    </div>

Je recommande la grille css plutôt que le bootstrap si ce que vous voulez vraiment, c'est avoir des données plus structurées, par exemple une table côte à côte avec plusieurs lignes, car vous n'avez pas à ajouter le nom de la classe pour chaque enfant:

// css-grid: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
// https://css-tricks.com/snippets/css/complete-guide-grid/
.grid-container {
  display: grid;
  grid-template-columns: auto auto; // 20vw 40vw for me because I have dt and dd
  padding: 10px;
  text-align: left;
  justify-content: center;
  align-items: center;
}

.grid-container > div {
  padding: 20px;
}


<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

grille css