Выравнивание влево и выравнивание вправо внутри div в Bootstrap

2018 Обновление...

Bootstrap 4.1+

• pull-right теперь float-right.
• text-right такой же, как и в 3.x, и работает для встроенных элементов
• и float-* и text-* являются отзывчивыми для разного выравнивания при разной ширине (т.е. float-sm-right)

Утилиты flexbox (например:justify-content-between) также могут быть использованы для выравнивания:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

или автоотступы (например, ml-auto) в любом контейнере flexbox (row, navbar, card, d-flex, etc...).

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

Bootstrap 4 Align Demo
Bootstrap 4 Примеры выравнивания справа(float, flexbox, text-right, etc...)

Bootstrap 3

Используйте класс pull-right...

<div class="container">
  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6"><span class="pull-right">$42</span></div>
  </div>
</div>

Bootstrap 3 Demo

Вы также можете использовать класс text-right следующим образом:

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

Bootstrap 3 Demo 2

Вместо класса pull-right лучше использовать класс text-right в колонке, потому что pull-right иногда создает проблемы при изменении размера страницы.

<удар>в Bootstrap 4 Правильный ответ-использовать текст-хз-право класса.

Это работает, потому что хз - обозначает наименьший размер окна в БС. Если вы хотели, вы могли бы применить выравнивание только тогда, когда область просмотра средних и крупных с помощью текста-МД-право`&.ЛТ;/удара>

В последний Альфа, текст-хз-правобыла упрощена, чтобытекст-право`.

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>

Загрузочный В4 введена поддержка адаптируемых блоков

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

Узнайте больше на https://v4-alpha.getbootstrap.com/utilities/flexbox/

Мы можем добиться от Bootstrap 4 элемента:

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

Пример: [JSFiddle][1]

<div class="row">
  <div class="col-xs-6 col-sm-4">Total cost</div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">$42</div>
</div>

Это должно сделать работу просто отлично