Twitter Bootstrap Question posted in

Twitter Bootstrap 3 conditional .text-center

Is it possible to make a col with .text-left change to .text-center ONLY if “XS”?

<div class="row">
    <div class="col-xs-12 col-sm-4 text-left text-uppercase">Left Col</div>
    <div class="col-xs-12 col-sm-8 text-right">Right Col</div>
</div>

So, the two cols are on the same line, the one on the left with .text-left and the one on the right with .text-right. and when the screen size is XS they will become each in a line and the two with .text-center

Thanks.

Tags:

3

Answers


  1. 0

    You could hide and show alternate columns using bootstrap’s Responsive Utility Classes.

    Something like:

    <div class="row">
  <div class="col-xs-12 col-sm-4 text-left text-uppercase hidden-xs">Left Col</div>
  <div class="col-xs-12 col-sm-4 text-center text-uppercase visible-xs">Left Col</div>
  <div class="col-xs-12 col-sm-8 text-right hidden-xs">Right Col</div>
  <div class="col-xs-12 col-sm-8 text-center visible-xs">Right Col</div>
</div>

    Example in Bootply

    Login or Signup to reply.
  2. 0

    Only way I can think of is have a custom class like follows. Seems like it could be refactored somehow, but it’s what I can think of now:

    <div class="row">
    <div class="col-xs-12 col-sm-4 customTextLeft text-uppercase">Left Col</div>
    <div class="col-xs-12 col-sm-8 customTextRight">Right Col</div>
</div>
/*CSS*/
/*screen-xs*/
@media (max-width: 768px) { 
  .customTextLeft{text-align:center;}
}
/*screen-sm*/
@media (min-width: 768px) and (max-width: 992px) { 
  .customTextLeft{text-align:left;}
}
/*screen-md*/
@media (min-width: 992px) and (max-width: 1200px) { 
  .customTextLeft{text-align:left;}
}
/*screen-lg corresponds with col-lg*/
@media (min-width: 1200px) {  
  .customTextLeft{text-align:left}
}

/*screen-xs*/
@media (max-width: 768px) { 
  .customTextRight{text-align:center;}
}
/*screen-sm*/
@media (min-width: 768px) and (max-width: 992px) { 
  .customTextRight{text-align:right;}
}
/*screen-md*/
@media (min-width: 992px) and (max-width: 1200px) { 
  .customTextRight{text-align:right;}
}
/*screen-lg corresponds with col-lg*/
@media (min-width: 1200px) {  
  .customTextRight{text-align:right}
}
    Login or Signup to reply.
  3. 0

    Here’s an extension of cabey77’s solution, with support for multiple column sizes, written in less to be able to update with bootstrap’s variables. This would need to be included when compiling bootstrap from less.

    /* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

.customTextRight-xs{text-align:right;}
.customTextLeft-xs{text-align:left;}
.customTextRight-sm{text-align:center;}
.customTextLeft-sm{text-align:center;}
.customTextRight-md{text-align:center;}
.customTextLeft-md{text-align:center;}
.customTextRight-lg{text-align:center;}
.customTextLeft-lg{text-align:center;}

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
  .customTextRight-xs{text-align:right;}
  .customTextLeft-xs{text-align:left;}
  .customTextRight-sm{text-align:right;}
  .customTextLeft-sm{text-align:left;}
  .customTextRight-md{text-align:center;}
  .customTextLeft-md{text-align:center;}
  .customTextRight-lg{text-align:center;}
  .customTextLeft-lg{text-align:center;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
  .customTextRight-xs{text-align:right;}
  .customTextLeft-xs{text-align:left;}
  .customTextRight-sm{text-align:right;}
  .customTextLeft-sm{text-align:left;}
  .customTextRight-md{text-align:right;}
  .customTextLeft-md{text-align:left;}
  .customTextRight-lg{text-align:center;}
  .customTextLeft-lg{text-align:center;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
  .customTextRight-xs{text-align:right;}
  .customTextLeft-xs{text-align:left;}
  .customTextRight-sm{text-align:right;}
  .customTextLeft-sm{text-align:left;}
  .customTextRight-md{text-align:right;}
  .customTextLeft-md{text-align:left;}
  .customTextRight-lg{text-align:right;}
  .customTextLeft-lg{text-align:left;}
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search