CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
zomdar
zomdar

Reputation: 273

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

enter image description here

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?

Upvotes: 0

Views: 90

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362820

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

Upvotes: 1

Aryan Twanju
Aryan Twanju

Reputation: 2516

You used the offset-* class wrong way. It should not be offset-*-12. Try this code.

<div class="container"> 
    <div class="row">
        <div class="col-sm-2 text-right"><strong>Data</strong></div>
        <div class="col-sm-2">Information</div>

        <div class="col-sm-2 offset-sm-4 text-right"><strong>Date due</strong></div>
        <div class="col-sm-2 offset-sm-4">11/28/2017</div>
    </div>
</div>

Upvotes: 0

Related Questions