Alinee dos divs horizontalmente uno al lado del otro en el centro de la página usando bootstrap css

Consulte el siguiente código que probé

<div class="row">
  <div class="center-block">First Div</div>
  <div class="center-block">Second DIV </div>
</div>

salida:

First Div
SecondDiv

Rendimiento esperado :

                      First Div        Second Div

Quiero alinear los dos divs horizontalmente en el centro de la página usando bootstrap css. Cómo puedo hacer esto ? No quiero usar CSS simple y concepto flotante para hacer esto. porque necesito hacer uso de bootstrap css para trabajar en todo tipo de diseños (es decir, todos los tamaños de ventana y resoluciones) en lugar de usar media query.

Esto debería funcionar:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>

Lea la sección del sistema de cuadrículas de los documentos de Bootstrap para familiarizarse con el funcionamiento de las cuadrículas de Bootstrap:

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

Utilice las clases bootstrap col-xx-#ycol-xx-offset-#

Entonces, lo que está sucediendo aquí es que su pantalla se divide en 12 columnas. En col-xx-#, #es el número de columnas que cubre y el desplazamiento es el número de columnas que deja.

Porque xx, en un sitio web general, mdse prefiere y si desea que su diseño se vea igual en un dispositivo móvil, xsse prefiere.

Con lo que puedo hacer de tu requerimiento,

<div class="row">
  <div class="col-md-4">First Div</div>
  <div class="col-md-8">Second DIV </div>
</div>

Debería hacer el truco.

Solución alternativa de Bootstrap 4 (de esta manera puede usar divs que son más pequeños 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>

Más

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

Esto hace el truco.

Para alinear dos divs horizontalmente, solo tiene que combinar dos clases de Bootstrap: Así es como:

<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 respuesta proporcionada por Ranveer (segunda respuesta anterior) NO funciona en absoluto.

Él dice usar col-xx-offset-#, pero no es así como se usan las compensaciones.

Si perdió el tiempo tratando de usar col-xx-offset-#, como lo hice yo con base en su respuesta, la solución es usar offset-xx-#.

Alternativa que hice programando Angular:

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

Recomiendo css grid sobre bootstrap si lo que realmente desea es tener datos más estructurados, por ejemplo, una tabla lado a lado con varias filas, porque no tiene que agregar el nombre de la clase para cada niño:

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

css-grid