Left align and right align within div in Bootstrap
Twitter BootstrapUser InterfaceBootstrap 4Bootstrap 5Twitter Bootstrap Problem Overview
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
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
2021 Update...
Bootstrap 5 (beta)
For aligning within a flexbox div or row
...
ml-auto
is nowms-auto
mr-auto
is nowme-auto
For text align or floats..
text-left
is nowtext-start
text-right
is nowtext-end
float-left
is nowfloat-start
float-right
is nowfloat-end
Bootstrap 4+
pull-right
is nowfloat-right
text-right
is 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>
Solution 2 - Twitter Bootstrap
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.
Solution 3 - Twitter Bootstrap
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>
Solution 4 - Twitter Bootstrap
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/
Solution 5 - Twitter Bootstrap
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
Solution 6 - Twitter Bootstrap
<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>
Solution 7 - Twitter Bootstrap
<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