CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
K. Li
K. Li

Reputation: 68

Centering btn-toolbar inside panel

I have a btn-toolbar inside my panel-body, and would like to:

  1. Center the set of buttons
  2. Ensure that on mobile view, three buttons are on top, three are on the bottom.

There are a lot of similar questions out there, and I have tried various potential solutions, but nothing seems to work (text-align: center, margin: 0 auto, etc.). Any help would be appreciated.

http://codepen.io/kli96/pen/vydMgW

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="btn-toolbar">
            <button type="button" class="btn btn-primary" id="btn2016">2016</button>
            <button type="button" class="btn btn-primary" id="btn2015">2015</button>
            <button type="button" class="btn btn-primary" id="btn2014">2014</button>
            <button type="button" class="btn btn-primary" id="btn2013">2013</button>
            <button type="button" class="btn btn-primary" id="btn2012">2012</button>
            <button type="button" class="btn btn-primary" id="btn2011">2011</button>
            <button type="button" class="btn btn-primary" id="btn2010">2010</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 935

Answers (1)

Dekel
Dekel

Reputation: 62636

  1. To make sure the buttons are centers you can set the container of the buttons to display: inline-block and that container with text-align: center.
  2. You have 7 buttons, but with the above changes they look ok on mobile.

Here is the CSS you need:

.panel-body {
  text-align: center;
}
.btn-toolbar {
  display: inline-block;
}
.btn-toolbar .btn {
  margin-bottom: 5px;
}

Check the codepen:
http://codepen.io/anon/pen/MbQRrY

Upvotes: 2

Related Questions