Q:

Aligning column content with Bootstrap 4

I'm trying to align some rows and columns using bootstrap to make my html display something like this....

I tried using code like this...
<div class="container"> 
<div class="row">
  <div class="col-sm-2"><span><strong>Data</strong></span></div>
  <div class="col-sm-1">Information</div>

  <div class="col-sm-2 offset-sm-12"><strong>Date due</strong></div>
  <div class="col-sm-1 offset-sm-12">11/28/2017</div>      
</div>

But i'm having trouble getting the alignment right. Can someone help me with getting the first row right with somewhat similar alignment to the image?

A:

You can align the text in the columns with text-right. Using offset will move the columns, but not align the content in the columns.
https://www.codeply.com/go/vxOqKdz0D4
<div class="container">
    <div class="row">
        <div class="col-sm-3 text-right"><span><strong>Data</strong></span></div>
        <div class="col-sm-2">Information</div>
        <div class="col-sm-3 text-right"><strong>Date due</strong></div>
        <div class="col-sm-2">11/28/2017</div>
    </div>
</div>

Read the Bootstrap text alignment docs

