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.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us