CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
b85411
b85411

Reputation: 10000

Centre align div content in bootstrap

I want my date picker to be in the middle of the page, eg. the line where I have: <div class="center-block text-center datepicker"></div>

Obviously center-block and text-center I tried already - but neither change anything. And with the offset it just makes it close to the centre without being perfectly centre aligned.

What do I need to do?

Thanks

<div class='row'>
  <div class='col-sm-12'>
    <div class='page-header page-header-with-icon mg-t'> <i class='fa-icon-calendar'></i>

      <h2>Calendar</h2>

    </div>
    <div class="row">
      <div class="col-sm-4 col-sm-offset-4">
        <div class="center-block text-center datepicker"></div>
      </div>
    </div>
  </div>
</div>

Upvotes: 5

Views: 2556

Answers (3)

sharmaRaj411
sharmaRaj411

Reputation: 46

This is what should solve your problem. Add it somewhere in your custom stylesheet and change the width % to what suits your design.

.datepicker-inline {
 width: 20%;
 }

Upvotes: 0

Josh York
Josh York

Reputation: 411

Try something like this:

<div class="col-sm-12">
    <div class="datepicker"></div>
</div>

Then give the date picker something like:

.datepicker {
   display:inline-block;
   margin:0 auto;
}

I haven't tested this, but it would be where I would start.

Upvotes: 2

aorfevre
aorfevre

Reputation: 5064

style="text-align:center;" shall do the trick no? I tested and for me, the "CALENDAR" text is centered

<div class="col-sm-12">
   <div class="page-header page-header-with-icon mg-t" style="text-align:center;">
   <i class="fa-icon-calendar"></i>
   <h2>Calendar</h2>
    </div>
<div class="row">
   <div class="col-sm-4 col-sm-offset-4">
       <div class="center-block text-center datepicker"></div>
     </div>
</div>
  </div>
 </div>

Upvotes: 1

Related Questions