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
This question is related to
twitter-bootstrap
user-interface
bootstrap-4
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
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/
<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).
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> 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>
<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
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.
Source: Stackoverflow.com