twitter bootstrap text-center when in xs mode

Question

I have html as -   lt footer gt   lt div class  container  gt       lt div class  row  gt           lt div class  col-xs-12 col-sm-6 text-left  gt               lt p gt                   amp copy  2015 example com  All rights reserved               lt  p gt           lt  div gt           lt div class  col-xs-12 col-sm-6 text-right  gt               lt p gt                   lt a href     gt  lt i class  fa fa-facebook  gt  lt  i gt  lt  a gt                    lt a href     gt  lt i class  fa fa-twitter  gt  lt  i gt  lt  a gt                    lt a href     gt  lt i class  fa fa-google-plus  gt  lt  i gt  lt  a gt               lt  p gt           lt  div gt       lt  div gt   lt  div gt   lt  footer gt    From the code you can see that the column s text are left and right aligned respectively  However in the xs mode I like them to be center aligned  How can I do this using twitter bootstrap

User · Answer

Use bs3-upgrade library for spacings and text aligment...

https://github.com/studija/bs3-upgrade

col-xs-text-center col-sm-text-left

col-xs-text-center col-sm-text-right

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-xs-text-center col-sm-text-left">
            <p>
                &copy; 2015 example.com. All rights reserved.
            </p>
        </div>
        <div class="col-xs-12 col-sm-6 col-xs-text-center col-sm-text-right">
            <p>
                <a href="#"><i class="fa fa-facebook"></i></a> 
                <a href="#"><i class="fa fa-twitter"></i></a> 
                <a href="#"><i class="fa fa-google-plus"></i></a>
            </p>
        </div>
    </div>
</div>

User · Answer

Bootstrap 4   lt div class  col-md-9 col-xs-12 text-md-left text-center  gt md left  xs center lt  div gt   lt div class  col-md-9 col-xs-12 text-md-right text-center  gt md right  xs center lt  div gt

User · Answer

Css Part is   CSS        media  max-width  767px          Align text to center     text-xs-center       text-align  center           And the HTML part will be   this text center work only below 767px width    HTML     lt div class  col-xs-12 col-sm-6 text-right text-xs-center  gt           lt p gt               lt a href     gt  lt i class  fa fa-facebook  gt  lt  i gt  lt  a gt                lt a href     gt  lt i class  fa fa-twitter  gt  lt  i gt  lt  a gt                lt a href     gt  lt i class  fa fa-google-plus  gt  lt  i gt  lt  a gt           lt  p gt    lt  div gt

User · Answer

This was tagged as a bootstrap 3  but maybe this will be helpful  In Bootstrap 4 0 0  non beta    Inside the col class  use    lt div class  col text-center text-md-left  gt     text-center  centers the text for all window sizes  then adding the  text-md-left  or  text-md-right  to change it above sm   You could make it  text-sm-left    text-lg-left  or whatever   But having it set to center always first sets up it up    lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  integrity  sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW dAiS6JXm  crossorigin  anonymous  gt   lt link href    netdna bootstrapcdn com font-awesome 4 0 3 css font-awesome css  rel  stylesheet  gt   lt body gt   lt footer gt     lt div class  container  gt       lt div class  row  gt         lt div class  col-xs-12 col-sm-6 text-center text-md-left  gt           lt p gt             amp copy  2015 example com  All rights reserved           lt  p gt         lt  div gt         lt div class  col-xs-12 col-sm-6 text-center text-md-right  gt           lt p gt             lt a href     gt  lt i class  fa fa-facebook  gt  lt  i gt  lt  a gt             lt a href     gt  lt i class  fa fa-twitter  gt  lt  i gt  lt  a gt             lt a href     gt  lt i class  fa fa-google-plus  gt  lt  i gt  lt  a gt           lt  p gt         lt  div gt       lt  div gt          lt  div gt    lt  footer gt   lt script src  https   code jquery com jquery-3 2 1 slim min js  integrity  sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr rE9 Qpg6aAZGJwFDMVNA GpGFF93hXpG5KkN  crossorigin  anonymous  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 12 9 umd popper min js  integrity  sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q  crossorigin  anonymous  gt  lt  script gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js  integrity  sha384-JZR6Spejh4U02d8jOt6vLEHfe JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl  crossorigin  anonymous  gt  lt  script gt   lt  body gt

User · Answer

There is nothing built into bootstrap for this  but some simple css could fix it  Something like this should work  Not tested though    media  max-width  768px           col-xs-12 text-right   col-xs-12 text-left                 text-align  center

User · Answer

html   lt div class  text-lg-right text-center  gt    center in xs and right in lg devices  lt  div gt

User · Answer

media  max-width  767px        footer  text-right       footer  text-left           text-align  center             I updated  loddn s answer  making two changes   max-width of xs screens in bootstrap is 767px  768px is the start of sm screens   this one is a matter of preference  I used footer instead of col-  so that if the column widths change  the CSS doesn t need to be updated

User · Answer

Responsive text alignment has been added in Bootstrap V4   https   getbootstrap com docs 4 0 utilities text  text-alignment     For left  right  and center alignment  responsive classes are available that use the same viewport width breakpoints as the grid system     lt p class  text-sm-left  gt Left aligned text on viewports sized SM  small  or wider  lt  p gt

[css] twitter bootstrap text-center when in xs mode

Examples related to css

Examples related to twitter-bootstrap-3