Allinea due div orizzontalmente fianco a fianco al centro della pagina usando bootstrap css

Question 1

Si prega di fare riferimento al codice sottostante quello che ho provato

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

produzione :

First Div
SecondDiv

Uscita prevista:

                      First Div        Second Div

voglio allineare i due div orizzontalmente al centro della pagina usando bootstrap css. come posso fare questo ? Non voglio usare un semplice CSS e un concetto mobile per farlo. perché ho bisogno di utilizzare il css bootstrap per lavorare in tutti i tipi di layout (cioè tutte le dimensioni e le risoluzioni della finestra) invece di utilizzare la media query.

Question 2

Questo dovrebbe fare il trucco:

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

Leggi la sezione del sistema a griglia dei documenti di Bootstrap per familiarizzare con il funzionamento delle griglie di Bootstrap:

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

Question 3

Usa le classi bootstrap col-xx-#ecol-xx-offset-#

Quindi quello che sta succedendo qui è che il tuo schermo viene diviso in 12 colonne. In col-xx-#, #è il numero di colonne che copri e offset è il numero di colonne che lasci.

Perché xx, in un sito web generale, mdè preferito e se vuoi che il tuo layout abbia lo stesso aspetto su un dispositivo mobile, xsè preferito.

Con quello che posso fare delle tue esigenze,

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

Dovrebbe fare il trucco.

Question 4

Soluzione Bootstrap 4 alternativa (in questo modo puoi usare div più piccoli di 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>

Di Più

Question 5

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

Questo fa il trucco.

Question 6

Per allineare due div in orizzontale devi solo combinare due classi di Bootstrap: Ecco come:

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

Question 7

La risposta fornita da Ranveer (seconda risposta sopra) NON funziona assolutamente.

Dice di usare col-xx-offset-#, ma non è così che vengono usati gli offset.

Se hai perso tempo cercando di usare col-xx-offset-#, come ho fatto io in base alla sua risposta, la soluzione è usare offset-xx-#.

Question 8

Alternativa che ho fatto programmando Angular:

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

Question 9

Raccomando css grid su bootstrap se quello che vuoi veramente è avere dati più strutturati, ad esempio una tabella affiancata con più righe, perché non devi aggiungere il nome della classe per ogni bambino:

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

Question 10

Make sure you wrap your "row" inside the class "container" . Also add reference to bootstrap in your html.
Something like this should work:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
 <body>
     <p>lets learn!</p>
  <div class="container">
          <div class="row">
              <div class="col-lg-6" style="background-color: red;">
                  ONE
              </div>
              <div class="col-lg-2" style="background-color: blue;">
                  TWO
              </div>
              <div class="col-lg-4" style="background-color: green;">
              THREE
           </div>
          </div>
      </div>
 </body>
 </html>