Bootstrap Center Align Heading


Bootstrap Center Align Heading – Bootstrap by default keeps the heading content left aligned. There are many ways to center align Headings. You can add your own css to center align the heading content. Here in this tutorial we are going to explain how you can center align the heading. We will also cover how you can left or right align the heading content.


Bootstrap Center Align Heading

Center Align

You can center Align the Heading as Below –

Bootstrap Center Align Heading Example:

<style type="text/css">
.heading-center{
 text-align:center;
 }
</style>

Try it »

Add class .heading-center to align center the heading text. If you run the above example it will produce the output something like this –

Bootstrap Center Align Heading


Learn More

Let us have few more examples & Demo.


Left Align

You can left Align the Heading as Below –

Bootstrap left Align Heading Example:

<style type="text/css">
.heading-left{
 text-align:left;
 }
</style>

Try it »

Add class .heading-left to align left the heading text.

Right Align

You can right Align the Heading as Below –

Bootstrap right Align Heading Example:

<style type="text/css">
.heading-right{
 text-align:right;
 }
</style>

Try it »

Add class .heading-right to align right the heading text.


Advertisements

Add Comment

📖 Read More