What are some of the common ways to left align some text and right align some other text within a div container in bootstrap?

e.g.

Total cost $42

Above total cost should be left aligned text and $42 is right aligned text

0

7 Answers

2021 Update...

Bootstrap 5 (beta)

For aligning within a flexbox div or row...

• ml-auto is now ms-auto
• mr-auto is now me-auto

For text align or floats..

• text-left is now text-start
• text-right is now text-end
• float-left is now float-start
• float-right is now float-end

Bootstrap 4+

• pull-right is now float-right
• text-right is the same as 3.x, and works for inline elements
• both float-* and text-* are responsive for different alignment at different widths (ie: float-sm-right)

The flexbox utils (eg:justify-content-between) can also be used for alignment:

<div> <div> left </div> <div> right </div> </div>

or, auto-margins (eg:ml-auto) in any flexbox container (row,navbar,card,d-flex,etc...)

<div> <div> left </div> <div> right </div> </div>

Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples(float, flexbox, text-right, etc...)

---

Bootstrap 3

Use the pull-right class..

<div> <div> <div>Total cost</div> <div><span>$42</span></div> </div>
</div>

Bootstrap 3 Demo

You can also use the text-right class like this:

 <div> <div>Total cost</div> <div>$42</div> </div>

Bootstrap 3 Demo 2

3

Instead of using pull-right class, it is better to use text-right class in the column, because pull-right creates problems sometimes while resizing the page.

In Bootstrap 4 the correct answer is to use the text-xs-right class.

This works because xs denotes the smallest viewport size in BS. If you wanted to, you could apply the alignment only when the viewport is medium or larger by using text-md-right.

In the latest alpha, text-xs-right has been simplified to text-right.

<div> <div>Total cost</div> <div>$42</div>
</div>

Bootstrap v4 introduces flexbox support

<div> <div>Flex item</div> <div>Flex item</div> <div>Flex item</div>
</div>

Learn more at

We can achieve by Bootstrap 4 Flexbox:

<div>
<p>TotalCost</p> <p>$42</p>
</div>
d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

Example: JSFiddle

bootstrap 5.0

• float
• row

<link href="" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div> <div><p>left</p></div> <div><p>right</p></div>
</div>

A whole column can accommodate 12, 6 (col-sm-6) is exactly half, and in this half, one to the left(float-start) and one to the right(float-end).

more example

• fontawesome-button

  <link href="" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <link rel="stylesheet" href="" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
  <div> <div class=col-sm-6> <p> <!-- text-center can help you put the icon at the center --> <a href="" ><i></i><br>Left </a> </p> </div> <div class=col-sm-6> <p> <a href="" ><i></i><br>Right </a> </p> </div> 

2

<div> <div>Total cost</div> <div></div> <div></div> <div>$42</div>
</div>

That should do the job just ok

2

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy