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>
|
If you run the above example it will give the following result –
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>
|
If you run the above example it will produce the following output-
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.
Advertisements
