Выравнивание текста вправо в таблице с помощью Bootstrap

Question

В рамках моего эксперимента по обучению Bootstrap я создал таблицу, фактически не используя какие-либо теги, соответствующие созданию таблицы. Вместо этого я использовал систему сетки. Хотя это выглядит прилично, мне было интересно, есть ли способ выровнять цифры вправо? Я предоставил ссылку JSFiddle, чтобы показать вам, что я придумал. Любая помощь или ведет приветствуются.

https://jsfiddle.net/silosc/9jbd1rpw/2/

<div class="container-xl">
  <div class="report-card-weekly-report">
    <div class="CompanyName">
      <h1>Weekly Summary for John's Groceries</h1>
      <h4> Week Ending: 01/20/2010</h4>
    </div>

    <br />
    <div class="row">
      <div class="col-sm-2">
      </div>
      <div class="col-sm-2">
        <p>Number of Sales</p>
      </div>
      <div class="col-sm-2">
        <p>Total earnings</p>
      </div>
      <div class="col-sm-2">
        <p>Taxes charged</p>
      </div>
      <div class="col-sm-2">
        <p>Refunds</p>
      </div>
      <div class="col-sm-2">
        <p>Deliveries</p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <h2>Total numbers</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-2">
        <p>Numbers for the week</p>
      </div>
      <div class="col-sm-2">
        21,922
      </div>
      <div class="col-sm-2">
        $0.00
      </div>
      <div class="col-sm-2">
        $304,431.37
      </div>
      <div class="col-sm-2">
        $0.00
      </div>
      <div class="col-sm-2">
        $0.00
      </div>
    </div>
  </div>
</div>


<style>
  .CompanyName {
    text-align: center;
  }
  
  h2 {
    color: orangered;
    margin-left: 15px;
  }
  
  p {
    font-weight: bold;
    font-size: 15px;
    margin-left: 15px;
  }
  
  p1 {
    text-align: right;
  }
</style>

Answer 1

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

  <div class="col-sm-2 text-right">
       21,922
  </div>

аналогично, вы также можете выровнять текст по левому краю с помощью свойства text-left.

Answer 2

Вы можете использовать text-right класс bootstrap:

<div class="container-xl">
  <div class="report-card-weekly-report">
    <div class="CompanyName">
      <h1>Weekly Summary for John's Groceries</h1>
      <h4> Week Ending: 01/20/2010</h4>
    </div>

    <br />
    <div class="row">
      <div class="col-sm-2">
      </div>
      <div class="col-sm-2">
        <p>Number of Sales</p>
      </div>
      <div class="col-sm-2">
        <p>Total earnings</p>
      </div>
      <div class="col-sm-2">
        <p>Taxes charged</p>
      </div>
      <div class="col-sm-2">
        <p>Refunds</p>
      </div>
      <div class="col-sm-2">
        <p>Deliveries</p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <h2>Total numbers</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-2">
        <p>Numbers for the week</p>
      </div>
      <div class="col-sm-2 text-right">
        21,922
      </div>
      <div class="col-sm-2 text-right">
        $0.00
      </div>
      <div class="col-sm-2 text-right">
        $304,431.37
      </div>
      <div class="col-sm-2 text-right">
        $0.00
      </div>
      <div class="col-sm-2 text-right">
        $0.00
      </div>
    </div>
  </div>
</div>


<style>
  .CompanyName {
    text-align: center;
  }
  
  h2 {
    color: orangered;
    margin-left: 15px;
  }
  
  p {
    font-weight: bold;
    font-size: 15px;
    margin-left: 15px;
  }
  
  p1 {
    text-align: right;
  }
</style>

См. JsFiddle здесь .