Sejajarkan dua div secara horizontal berdampingan di tengah halaman menggunakan bootstrap css

Question 1

Silakan lihat kode di bawah ini apa yang saya coba

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

keluaran:

First Div
SecondDiv

Output yang diharapkan:

                      First Div        Second Div

saya ingin menyelaraskan dua div secara horizontal ke tengah halaman menggunakan bootstrap css. bagaimana saya bisa melakukan ini? saya tidak ingin menggunakan css sederhana dan konsep mengambang untuk melakukan ini. karena saya perlu menggunakan bootstrap css untuk bekerja di semua jenis tata letak (yaitu, semua ukuran jendela dan resolusi) daripada menggunakan kueri media.

Question 2

Ini harus melakukan trik:

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

Bacalah bagian sistem kisi dari dokumen Bootstrap untuk membiasakan diri Anda dengan cara kerja kisi Bootstrap:

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

Question 3

Gunakan kelas bootstrap col-xx-#dancol-xx-offset-#

Jadi yang terjadi di sini adalah layar Anda terbagi menjadi 12 kolom. Di col-xx-#, #adalah jumlah kolom yang Anda tutupi dan offset adalah jumlah kolom yang Anda tinggalkan.

Karena xx, di situs web umum, mdlebih disukai dan jika Anda ingin tata letak Anda terlihat sama di perangkat seluler, xslebih disukai.

Dengan apa yang bisa saya buat dari kebutuhan Anda,

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

Harus melakukan trik.

Question 4

Solusi Bootstrap 4 alternatif (dengan cara ini Anda dapat menggunakan div yang lebih kecil dari 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>

Lebih

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>

Ini triknya.

Question 6

Untuk menyelaraskan dua div secara horizontal, Anda hanya perlu menggabungkan dua kelas Bootstrap: Begini caranya:

<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

Tanggapan yang diberikan oleh Ranveer (jawaban kedua di atas) sama sekali TIDAK berfungsi.

Dia mengatakan untuk menggunakan col-xx-offset-#, tapi itu bukan cara penggunaan offset.

Jika Anda menyia-nyiakan waktu Anda mencoba menggunakan col-xx-offset-#, seperti yang saya lakukan berdasarkan jawabannya, solusinya adalah menggunakan offset-xx-#.

Question 8

Alternatif yang saya lakukan pemrograman 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

Saya merekomendasikan css grid over bootstrap jika yang Anda inginkan, adalah memiliki data yang lebih terstruktur, misalnya tabel berdampingan dengan banyak baris, karena Anda tidak perlu menambahkan nama kelas untuk setiap anak:

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