CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Naourass Derouichi
Naourass Derouichi

Reputation: 793

Center bootsrap 3 button toolbar inside div

How to center horizontally a bootstrap 3 btn-toolbar button inside a col-lg div?

      <div class="col-lg-6 col-sm-3 noleftpad">
          <div class="well topnestedbut">   
              <div class="btn-toolbar nested-top">
                  <button type="button" class="btn btn-default btn-sm"><strong>This must be centered</strong></button>
              </div>
          </div>
      </div>

CSS:

.btn-toolbar.nested-top{
    position:absolute;
    top:0px;
    text-align:center;
}

.well.topnestedbut{
    padding:35px 10px 10px;
}

.noleftpad{
    padding-left:0px;
}

I want that the button be attached to the top of the container div, and also centered: enter image description here

Upvotes: 0

Views: 583

Answers (1)

MarioD
MarioD

Reputation: 1703

Here's what I did:

When an element is positioned absolute it is floating above the content. In this state it will only take up as much room as the content inside of it.

If you set width 100% on that element it will take up 100% of the parent (or relative) containers width.

http://jsfiddle.net/Per3m/3/

.btn-toolbar.nested-top{
    text-align:center;
    position:absolute;
        top:0;
    width:100%;
}

Upvotes: 1

Related Questions