Align center column using Twitter Bootstrap


Align center column using Twitter Bootstrap – Sometimes we need a column to align center in twitter bootstrap. There are many ways to align center in twitter bootstrap. In this tutorial we are going to explain the different approaches to align center column in twitter bootstrap. We will explain this with example and demo.


Align center column using Twitter Bootstrap

You can align center in bootstrap column as –

Bootstarp 3.1.1 And Above

If you are using bootstrap 3.1.1 and above version you can directly use the class class=”center-block” to align the column content. Here is an example and demo.

Align center column using Twitter Bootstrap:

<div class="container">
    <div class="row">
        <div class="col-md-12" style="border:1px solid gray;">
		  <div class="center-block">1 Column center block</div>
		</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="border:1px solid gray;">
            <div class="center-block">2 Column center block</div>
        </div>
        <div class="col-md-6" style="border:1px solid gray;">
            <div class="center-block">2 Column center block</div>
        </div>
    </div>
</div>

<style>
.center-block {text-align: center !important}
</style>

Try it »

If you run the above example it will give the following result –

Align center column using Twitter Bootstrap

More About Column Align Center

Bootstrap align center using offsets

You can also align center the columns using the offsets in bootstrap which will work with all versions-

Bootstrap align center using offsets:

<div class="row" style="border:1px solid gray;">
    <div class="col-md-2 col-md-offset-5">I m centered Aligned.</div>
</div>

Try it »

If you run the above example it will produce the following output-

Align center column using Twitter Bootstrap

Bootstrap align center using custom css

You can also create your own css to align center the column content as below –

Bootstrap align center using offsets:

.custom-center{
text-align:center;
display: inline-block
}

If you want to create your custom css you can create css as above and add this to the div to align column contents in bootstrap.

Tip : Always try to use bootstrap’s default classes to align center the contents.

Advertisements

Add Comment

📖 Read More