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
bootstrap-4bootstrap-5twitter-bootstrapuser interface
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
Best Answer
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 elementsfloat-*
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:or, auto-margins (eg:
ml-auto
) in any flexbox container (row,navbar,card,d-flex,etc...)Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples(float, flexbox, text-right, etc...)
Bootstrap 3
Use the
pull-right
class..Bootstrap 3 Demo
You can also use the
text-right
class like this:Bootstrap 3 Demo 2