Вирівняйте два divs по горизонталі поруч із центром до сторінки за допомогою bootstrap css

Будь ласка, зверніться до коду, що я пробував

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

вихід:

First Div
SecondDiv

Очікуваний результат:

                      First Div        Second Div

я хочу вирівняти два divs по горизонталі до центру за допомогою bootstrap css. як я можу це зробити? я не хочу використовувати для цього просту концепцію css та плаваючу концепцію. тому що мені потрібно використовувати bootstrap css для роботи у всіх видах макетів (тобто у всіх розмірах вікон та роздільній здатності) замість використання медіа-запитів.

Це повинно зробити трюк:

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

Прочитайте розділ системи сіток у документації Bootstrap, щоб ознайомитись з тим, як працюють сітки Bootstrap:

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

Використовуйте класи завантаження col-xx-#таcol-xx-offset-#

Отже, що тут відбувається, ваш екран ділиться на 12 стовпців. У col-xx-#, #- це кількість стовпців, які ви охоплюєте, а зміщення - це кількість стовпців, які ви залишаєте.

Адже xxна загальному веб-сайті mdпереважно, а якщо ви хочете, щоб ваш макет виглядав однаково на мобільному пристрої, xsпереважно.

Те, що я можу зробити на вашу вимогу,

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

Повинен зробити трюк.

Альтернативне рішення Bootstrap 4 (таким чином, ви можете використовувати divs, які менше, ніж 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>

Більше

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

Це робить трюк.

Щоб вирівняти два divs горизонтально, вам просто потрібно поєднати два класи Bootstrap: Ось як:

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

Відповідь Ranveer (друга відповідь вище) абсолютно НЕ працює.

Він каже використовувати col-xx-offset-#, але не так використовують офсети.

Якщо ви витратили час, намагаючись використати col-xx-offset-#, як я це зробив на основі його відповіді, рішення полягає у використанні offset-xx-#.

Альтернатива, яку я займався програмуванням Angular:

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

Я рекомендую css grid over bootstrap, якщо те, що ви насправді хочете, полягає в тому, щоб мати більш структуровані дані, наприклад, сусідню таблицю з декількома рядками, оскільки вам не потрібно додавати ім'я класу для кожної дочірньої організації:

// 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-сітка