How To Center Text On Small Screens With Bootstrap?

Ethan D. -

Problem: Centering Text on Small Screens

Centering text on small screens can be difficult when using Bootstrap. The default layout might not align text as you want, especially on mobile devices. This can make your user interface look less appealing and potentially confuse users.

Solution: Implementing Responsive Text Alignment in Bootstrap

Using Bootstrap's Text Alignment Classes

Bootstrap has text alignment utilities that let you control text alignment on different screen sizes. These classes use the same viewport width breakpoints as the grid system.

To use these classes, apply them to the element with your text. The format is text-{breakpoint}-{alignment}, where {breakpoint} is the screen size (xs, sm, md, lg, xl) and {alignment} is left, center, or right.

Tip: Responsive Text Alignment Shorthand

Remember that you don't need to specify alignment for every breakpoint. Bootstrap applies the alignment to the specified breakpoint and all larger screens until another class overrides it. For example, text-md-center centers text on medium screens and larger, unless a class for larger screens (like text-lg-left) is also applied.

Steps to Center Footer Text

To center the footer text on small screens while keeping left and right alignment on larger screens, follow these steps:

  1. Change the HTML structure: Keep the current structure, but add new classes to the <div> elements with the text.

  2. Add alignment classes to the columns: For the left column, use text-xs-center text-sm-left. For the right column, use text-xs-center text-sm-right.

  3. Align across all device sizes: The changed HTML should look like this:

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

This change centers the text on extra small screens (xs) and keeps the original left and right alignment on small screens (sm) and above.

Alternative Approaches for Text Centering

Custom CSS Media Queries

You can use custom CSS media queries to control text alignment on different screen sizes. This approach involves writing CSS rules that target specific breakpoints.

Here's an example of how to implement custom CSS media queries:

@media (max-width: 575px) {
    .footer-text {
        text-align: center;
    }
}

@media (min-width: 576px) {
    .footer-left {
        text-align: let;
    }
    .footer-right {
        text-align: right;
    }
}

Pros of using custom CSS:

  • More control over specific breakpoints
  • Can target elements more precisely

Cons of using custom CSS:

  • Requires more maintenance
  • May conflict with Bootstrap's built-in classes
  • Increases CSS file size

Tip: Customizing Breakpoints

You can fine-tune your media queries by using custom breakpoints that match your design needs. For example:

@media (min-width: 768px) and (max-width: 991px) {
    .footer-text {
        font-size: 14px;
    }
}

This allows you to apply specific styles for medium-sized screens.

Flexbox-based Solution

Flexbox offers a way to center text and other content. You can use Flexbox with Bootstrap's grid system for a flexible alignment solution.

To implement a Flexbox-based centering approach:

  1. Add a Flexbox container class to your row:
<div class="row d-flex">
  1. Use Flexbox utility classes on your columns:
<div class="col-xs-12 col-sm-6 d-flex justify-content-center justify-content-sm-start">
    <!-- Left column content -->
</div>
<div class="col-xs-12 col-sm-6 d-flex justify-content-center justify-content-sm-end">
    <!-- Right column content -->
</div>

This solution centers content on extra small screens and aligns it to the left or right on small screens and above.

When using Flexbox with Bootstrap's grid system, keep in mind:

  • Flexbox properties may affect the layout of grid columns
  • Some older browsers may not fully support Flexbox
  • Complex Flexbox layouts can be harder to maintain

Both custom CSS and Flexbox solutions offer alternatives to Bootstrap's built-in text alignment classes, allowing for more specific control over your layout.