Bootstrap 4 Text Align Center

Bootstrap is a popular front-end framework used by many developers to create responsive and mobile-first websites. One of the many features of Bootstrap is the ability to align text to the center of a container.

In Bootstrap 4, you can use the "text-center" class to align text to the center of a container. This class can be applied to any HTML element that contains text, such as a paragraph, a heading, or a list.

To apply the "text-center" class to an element, simply add the class to the HTML tag using either the "class" attribute or the "classList" property of the element in JavaScript.

<p class="text-center">This text is aligned to the center.</p>

const element = document.querySelector('p');
element.classList.add('text-center');

In addition to the "text-center" class, Bootstrap also provides classes to align text to the left and right of a container ("text-left" and "text-right" respectively).

It's important to note that these classes align the text within the container, not the container itself. To align a container to the center of the screen, you can use the "mx-auto" class along with a fixed width for the container.

<div class="container mx-auto" style="width: 200px;">
  <p class="text-center">This text is aligned to the center.</p>
</div>

Overall, Bootstrap provides a simple and effective way to center text within a container using the "text-center" class.