CODEWITHSUNDEEP
htmlcssbootstrap-4
Henry
Henry

Reputation: 1755

Bootstrap4 right-justify text in one column of a row

I am just starting to work with Bootstrap4 for the first time and am having a challenge with properly justifying text in a column of a row.

My HTML markup is as follows:

<div class="row">
  <div class="col" id="business">Acme Inc</div>
  <div class="col" id="proprietor">Wile E. Coyote</div>
  <div class="col" id="address">
  123 Canyon Drive<br>
  Roadrunner, AZ<br> 
  Phone (222) 222-2222 <br>
  Fax (222) 222-2223 <br>
  [email protected]
  </div>
</div>

I want the third column, the one containing the address, to be pushed over so that the longest line is up against the right hand end of the column (less a bit of margin), then I want to align the remaining lines of the address so that they start at the same place as the longest line. Therefore, the start of all of the address lines will be the same distance from the right or left of the header which I'm creating and the longest line of the address will end just before the right hand end of the header.

I need this to be responsive so that when its on a phone, all of the lines of all three columns start at the left hand edge of the header, like this:

Acme Inc

Wile E. Coyote

123 Canyon Drive
Roadrunner, AZ
Phone (222) 222-2222
Fax (222) 222-2223
[email protected]

I've tried umpteen times to use combinations of align-text, float, margins, etc. on the various divs to make things turn out the way I want but nothing is working.

I'm hoping someone more familiar with bootstrap can tell me what I'm missing.

Upvotes: 0

Views: 211

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362360

You can use the auto layout (col-* and col-*-auto) columns. On mobile, all 3 columns will stack vertically since col-sm-auto is only applied on the sm breakpoint and larger...

   <div class="row">
        <div class="col-sm-auto" id="business">Acme Inc</div>
        <div class="col" id="proprietor">Wile E. Coyote</div>
        <div class="col-sm-auto ml-auto" id="address"> 123 Canyon Drive<br> Roadrunner, AZ<br> Phone (222) 222-2222 <br> Fax (222) 222-2223 <br> [email protected] </div>
   </div>

https://codeply.com/p/10EYm5SDHN

  • The col-sm-auto uses flex shrink to fit the width of the column to its content
  • The ml-auto uses a left margin to push the 3rd column to the right

Upvotes: 1

Muhammad
Muhammad

Reputation: 7324

You can wrap your address in some element such as div and then add this classes to the parent column d-flex justify-content-start justify-content-sm-end 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col" id="business">Acme Inc</div>
  <div class="col" id="proprietor">Wile E. Coyote</div>
  <div class="col d-flex justify-content-start justify-content-sm-end" id="address">
    <div>
    123 Canyon Drive<br>
    Roadrunner, AZ<br> 
    Phone (222) 222-2222 <br>
    Fax (222) 222-2223 <br>
    [email protected]
    </div>
  </div>
</div>

Upvotes: 0

Related Questions