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
Add a comment
|
8 Answers
2021 Update...
Bootstrap 5 (beta)
For aligning within a flexbox div or row...
ml-autois nowms-automr-autois nowme-auto
For text align or floats..
text-leftis nowtext-starttext-rightis nowtext-endfloat-leftis nowfloat-startfloat-rightis nowfloat-end
Bootstrap 4+
pull-rightis nowfloat-righttext-rightis the same as 3.x, and works for inline elements- both
float-*andtext-*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 class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
or, auto-margins (eg:ml-auto) in any flexbox container (row,navbar,card,d-flex,etc...)
<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
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 class="container">
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6"><span class="pull-right">$42</span></div>
</div>
</div>
You can also use the text-right class like this:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
5 Comments
Florin Vîrdol
For Bootstrap 3, for column,
text-right worked for me.
DavidFM
for bootstrap 5 Renamed .text-left and .text-right to .text-start and .text-end.
Fernando Kosh
What is the purpose of renaming classes in each version?
Grant
@FernandoKosh Changing from Left/Right to Start/End is because it adds support for Right-To-Left languages, and the padding, margins, and text justifications, and even the order of columns automatically flip when the page specifies a language that reads from the right.
Pieter De Bie
More about the RTL reasoning github.com/orgs/twbs/discussions/32402#discussioncomment-179962
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.
Comments
Bootstrap v4 introduces flexbox support
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
Learn more at https://v4-alpha.getbootstrap.com/utilities/flexbox/
answered Mar 23, 2017 at 13:38
William Entriken
39.9k23 gold badges162 silver badges213 bronze badges
Comments
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 class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Comments
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="row">
<div class="col-sm-6"><p class="float-start">left</p></div>
<div class="col-sm-6"><p class="float-end">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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> <div class="row"> <div class=col-sm-6> <p class="float-start text-center"> <!-- text-center can help you put the icon at the center --> <a class="text-decoration-none" href="https://www.google.com/" ><i class="fas fa-arrow-circle-left fa-3x"></i><br>Left </a> </p> </div> <div class=col-sm-6> <p class="float-end text-center"> <a class="text-decoration-none" href="https://www.google.com/" ><i class="fas fa-arrow-circle-right fa-3x"></i><br>Right </a> </p> </div>
We can achieve by Bootstrap 4 Flexbox:
<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>
d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%
Example: JSFiddle
Comments
<div class="row">
<div class="col-xs-6 col-sm-4">Total cost</div>
<div class="col-xs-6 col-sm-4"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">$42</div>
</div>
That should do the job just ok
2 Comments
jovialcore
Thanks. What bootstrap version is this ?
Terrymight
@jovialcore you are welcome. It is version 3
<div class="row">
<div class="col float-start">
Total Cost
</div>
<div class="col float-end">
42
</div>
</div>
This will work and is simple to understand. In the class attribute, I have used Bootstrap 5 classes.
