Left align and right align within div in Bootstrap

Question

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

User · Accepted Answer

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  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   lt div class  quot d-flex justify-content-between quot  gt         lt div gt           left        lt  div gt         lt div gt           right        lt  div gt    lt  div gt   or  auto-margins  eg ml-auto  in any flexbox container  row navbar card d-flex etc      lt div class  quot d-flex quot  gt         lt div gt           left        lt  div gt         lt div class  quot ml-auto quot  gt           right        lt  div gt    lt  div gt   Bootstrap 4 Align Demo Bootstrap 4 Right Align Examples float  flexbox  text-right  etc      Bootstrap 3 Use the pull-right class    lt div class  quot container quot  gt     lt div class  quot row quot  gt       lt div class  quot col-md-6 quot  gt Total cost lt  div gt       lt div class  quot col-md-6 quot  gt  lt span class  quot pull-right quot  gt  42 lt  span gt  lt  div gt     lt  div gt   lt  div gt   Bootstrap 3 Demo You can also use the text-right class like this     lt div class  quot row quot  gt       lt div class  quot col-md-6 quot  gt Total cost lt  div gt       lt div class  quot col-md-6 text-right quot  gt  42 lt  div gt     lt  div gt   Bootstrap 3 Demo 2

User · Answer

We can achieve by Bootstrap 4 Flexbox    lt div class  d-flex justify-content-between w-100  gt   lt p gt TotalCost lt  p gt   lt p gt  42 lt  p gt   lt  div gt   d-flex    Display Flex justify-content-between    justify-content space-between w-100    width 100    Example  JSFiddle

User · Answer

Bootstrap v4 introduces flexbox support   lt div class  d-flex justify-content-end  gt     lt div class  mr-auto p-2  gt Flex item lt  div gt     lt div class  p-2  gt Flex item lt  div gt     lt div class  p-2  gt Flex item lt  div gt   lt  div gt    Learn more at https   v4-alpha getbootstrap com utilities flexbox

User · Answer

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    lt div class  row  gt       lt div class  col-md-6  gt Total cost lt  div gt       lt div class  col-md-6 text-right  gt  42 lt  div gt   lt  div gt

User · Answer

bootstrap 5 0  float row   x000D   x000D   lt link href  https   cdn jsdelivr net npm bootstrap 5 0 0-beta1 dist css bootstrap min css  rel  stylesheet  integrity  sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1  crossorigin  anonymous  gt    lt div class  row  gt     lt div class  col-sm-6  gt  lt p class  float-start  gt left lt  p gt  lt  div gt       lt div class  col-sm-6  gt  lt p class  float-end  gt right lt  p gt  lt  div gt     lt  div gt  x000D   x000D   x000D   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  x000D   x000D   lt link href  https   cdn jsdelivr net npm bootstrap 5 0 0-beta1 dist css bootstrap min css  rel  stylesheet  integrity  sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1  crossorigin  anonymous  gt    lt 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    gt    lt div class  row  gt     lt div class col-sm-6 gt       lt p class  float-start text-center  gt    lt  -- text-center can help you put the icon at the center -- gt         lt a class  text-decoration-none  href  https   www google com          gt  lt i class  fas fa-arrow-circle-left fa-3x  gt  lt  i gt  lt br gt Left        lt  a gt       lt  p gt     lt  div gt     lt div class col-sm-6 gt       lt p class  float-end text-center  gt         lt a class  text-decoration-none  href  https   www google com          gt  lt i class  fas fa-arrow-circle-right fa-3x  gt  lt  i gt  lt br gt Right        lt  a gt       lt  p gt     lt  div gt    x000D   x000D   x000D

User · Answer

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

User · Answer

lt div class  row  gt     lt div class  col-xs-6 col-sm-4  gt Total cost lt  div gt     lt div class  col-xs-6 col-sm-4  gt  lt  div gt     lt div class  clearfix visible-xs-block  gt  lt  div gt     lt div class  col-xs-6 col-sm-4  gt  42 lt  div gt   lt  div gt    That should do the job just ok

[twitter-bootstrap] Left align and right align within div in Bootstrap

Examples related to twitter-bootstrap

Examples related to user-interface

Examples related to bootstrap-4