Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

twitter bootstrap text-center when in xs mode

I have html as:-

<footer> <div class="container">     <div class="row">         <div class="col-xs-12 col-sm-6 text-left">             <p>                 &copy; 2015 example.com. All rights reserved.             </p>         </div>         <div class="col-xs-12 col-sm-6 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> </footer> 

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?

like image 489
Dipendra Gurung Avatar asked Apr 10 '15 13:04

Dipendra Gurung


People also ask

How do I put text in the middle of a page using bootstrap?

Add class . text-center to the parent div to align text or any item inside to the center.

How do I keep text in the center?

Using the <center></center> tags One way to center text or put it in the middle of the page is to enclose it within <center></center> tags.

How do I center align text in SCSS?

To just center the text inside an element, use text-align: center; This text is centered.

How do I align text to the right in bootstrap?

You can simply use the class . justify-content-between in combination with the class . d-flex to left align and right align text content within a <div> container in Bootstrap 4.


2 Answers

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.

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> 
like image 88
Jarrod Avatar answered Sep 21 '22 12:09

Jarrod


<div class="text-lg-right text-center">   center in xs and right in lg devices </div> 

text-lg-right applies for large size only, so except large size text-center will be applied for the rest of the sizes.

like image 26
Prakash Avatar answered Sep 20 '22 12:09

Prakash