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?
- How to Center a Column Horizontally Using Bootstrap?
- How to Center an Image Horizontally Using Bootstrap?
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.
Example
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.
HTML
<p>Welcome to Linuxhint!</p>
</div>
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.
Example
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="col-4">centered column</div>
</div>
Output
How to Center an Image Horizontally Using Bootstrap?
The image element can be aligned center by using the “d-flex” and “justify-content-center”.
Example
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.
HTML
<div class="card">
<div class="card-body">
<img src="/images/man-gd9032.png" alt=" businessman" width="300">
</div>
</div>
</div>
Output
That’s all about how to horizontally center the elements in Bootstrap.
Conclusion
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.
