Text Alignment

In Bootstrap 4, text alignment can be easily controlled using a variety of utility classes. These classes help align text to the left, right, center, or justify it within a container. Here are the main text alignment classes and how to use them with examples:

Left Align

To align text to the left, use the class .text-left.

<div class="text-left">
  This text is aligned to the left.
</div>

Center Align

To center align text, use the class .text-center.

<div class="text-center">
  This text is centered.
</div>

Right Align

To align text to the right, use the class .text-right.

<div class="text-right">
  This text is aligned to the right.
</div>

Justify Align

To justify text, use the class .text-justify.

<div class="text-justify">
  This text is justified, meaning that the text is spread out so that each line has equal width, except the last line.
</div>

Responsive Text Alignment

Bootstrap 4 also provides classes for responsive text alignment. These classes adjust the text alignment based on the screen size. For example, you can left-align text on small screens and center it on larger screens.

<div class="text-sm-left text-md-center text-lg-right">
  This text will be left-aligned on small screens, centered on medium screens, and right-aligned on large screens.
</div>

Class Breakdown

text-sm-left: Left aligns the text on small devices.
text-md-center: Centers the text on medium devices.
text-lg-right: Right aligns the text on large devices.

Example: Responsive Text Alignment

Here’s a complete example illustrating how text alignment changes with screen size.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap 4 Text Alignment</title>
</head>
<body>
  <div class="container mt-5">
    <div class="text-sm-left text-md-center text-lg-right">
      This text will be left-aligned on small screens, centered on medium screens, and right-aligned on large screens.
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

In this example:

On devices smaller than 576px, the text is left-aligned.
On devices 576px and larger, but smaller than 768px, the text is centered.
On devices 768px and larger, the text is right-aligned.

These classes make it easy to manage text alignment across different screen sizes, ensuring a responsive and flexible design.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Basic Typography

Next: Text colors

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.