Bootstrap Center (Horizontal Align)

The Bootstrap framework is a powerful tool for designing websites. It offers many classes having predefined styles. More specifically, in Bootstrap, the text can be justified using the “text-justify” class, and to align the elements in the right, left, and center, “text-right”, “text-left”, and “text-center” classes are utilized. The flexible items can also be aligned left, right, or center using the specific classes.

This write-up will guide you:

How to Center the Text Horizontally Using Bootstrap?

In Bootstrap, the text can be justified using the “text-left”, “text-right”, and “text-center” classes. The “text-center” class is most commonly used to center the elements horizontally.


The below example shows how to center the text horizontally using Bootstrap:

  • Add a “<div>” element and assign it the class as “text-center”.
  • Within this class, add the “<p>” element to specify some text content.


<div class="text-center">
 <p>Welcome to Linuxhint!</p>

It can be observed that the text has now horizontal center alignment:

How to Center a Column Horizontally Using Bootstrap?

The grid in Bootstrap comprises rows and columns. The “row” class creates a row and the “col” defines the column.


For practical demonstration, check out the example mentioned below:

  • Add a “<div>” element and assign it a class “row”, “d-flex”, and “justify-content-center”.
  • d-flex” makes the element’s display flex.
  • justify-content-center” horizontally center aligns the elements.
  • col-4” class is utilized to adjust the column:
<div class="row d-flex justify-content-center">
 <div class="col-4">centered column</div>


How to Center an Image Horizontally Using Bootstrap?

The image element can be aligned center by using the “d-flex” and “justify-content-center”.


This example centers the image by following the steps:

  • First, add a “<div>” element and assign it the “d-flex” and “justify-content-center” classes.
  • Inside the created container, add another “<div>” with the class “card”.
  • Within the “card” container, specify the “card-body” as the class name.
  • Include the “<img>” tag to add an image with the “src”, “alt”, and “width” attributes to specify the source of the added image, alternative text, and the default width.



<div class="d-flex justify-content-center">
 <div class="card">
  <div class="card-body">
   <img src="/images/man-gd9032.png" alt=" businessman" width="300">


That’s all about how to horizontally center the elements in Bootstrap.


To center the elements horizontally, mainly the “text-center” class is used. The elements can be made flexible using the “d-flex” class. The flexible items can be center aligned using the “justify-content-center” class. This post has explained the methods to align several elements horizontally.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.