2021年更新...
Bootstrap 5测试版

用于在flexbox div或row内对齐...

• ml-auto现在是ms-auto
• mr-auto现在是me-auto

对于文本对齐或浮动..

• text-left现在是text-start
• text-right现在是text-end
• float-left现在是float-start
• float-right现在是float-end
  Bootstrap 4+
• 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 Right Align Examples（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中，正确的答案是使用text-xs-right类。
这是因为xs表示BS中的最小视口大小。如果需要，您可以使用text-md-right仅在视口为中等或更大时应用对齐。
在最新的alpha中，text-xs-right被简化为text-right。

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

Bootstrap v4引入了flexbox支持

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

• float
• 行

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6"><p class="float-start">left</p></div>  
  <div class="col-sm-6"><p class="float-end">right</p></div>  
</div>

一整列可以容纳12，6（col-sm-6）正好是一半，在这一半中，一个在左边（float-start），一个在右边（float-end）。

更多示例

• 字体按钮

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

<div class="row">
  <div class=col-sm-6>
    <p class="float-start text-center">  <!-- text-center can help you put the icon at the center -->
      <a class="text-decoration-none" href="https://www.google.com/"
      ><i class="fas fa-arrow-circle-left fa-3x"></i><br>Left
      </a>
    </p>
  </div>
  <div class=col-sm-6>
    <p class="float-end text-center">
      <a class="text-decoration-none" href="https://www.google.com/"
      ><i class="fas fa-arrow-circle-right fa-3x"></i><br>Right
      </a>
    </p>
  </div>

我们可以通过Bootstrap 4 Flexbox实现：

<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

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

那应该可以了

<div class="row">
    <div class="col float-start">
        Total Cost
    </div>
    <div class="col float-end">
        42
    </div>
</div>

这将工作，并且很容易理解。在class属性中，我使用了Bootstrap 5类。