CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
RYDiiN
RYDiiN

Reputation: 299

Setting Bootstrap buttons to the same width

I have a bootstrap sidebar that contains a couple buttons. Unfortunately, it looks very ugly and I want each button to be the same size. These buttons are contained in a sidebar and will be stack vertically. I want to avoid setting a pixel number for each button.
Here is the jfiddle
https://jsfiddle.net/66bk2rfc/

HTML

<div id="reading-sidebar" class="col-xs-3 panel-default">
  <div id="reading-sidebar-title" class="panel-heading">Options
    <button type="button" class="btn btn-xs btn-default pull-right" id="reading-sidebar-hide-btn"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
      <div id="reading-sidebar-contents" class="panel-body">
        <ul class="sidebar-button-list">
          <button type="button" id="pre-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Pre Readings</button><br>
          <button type="button" id="passage-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Passage</button><br>
          <button type="button" id="post-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Post Readings</button><br>
          <button type="button" id="media-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Media</button><br>
          <button type="button" id="question-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i>&nbsp;Questions</button>
        </ul>
      </div>
    </div>

Upvotes: 17

Views: 69946

Answers (5)

joshb
joshb

Reputation: 5220

The "bootstrap" way to do this would be to use btn-block on your button elements. Like so:

<button type="button" class="btn btn-primary btn-lg btn-block">Full-width Button</button>

UPDATE: Since Bootstrap 5 this solution does not work anymore. This is a quote from the docs:

Breaking Dropped .btn-block for utilities. Instead of using .btn-block on the .btn, wrap your buttons with .d-grid and a .gap-* utility to space them as needed. Switch to responsive classes for even more control over them. Read the docs for some examples.

Upvotes: 34

vanburen
vanburen

Reputation: 21653

You can also just surround them with <div class="btn-group-lg btn-group-vertical">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="reading-container" class="col-xs-6">
  <div id="reading-sidebar" class="col-xs-3 panel-default"></div>
  <div id="reading-sidebar-contents" class="panel-body">
    <div class="btn-group-lg btn-group-vertical">
      <button type="button" id="pre-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Pre Readings</button>
      <button type="button" id="passage-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Passage</button>
      <button type="button" id="post-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Post Readings</button>
      <button type="button" id="media-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Media</button>
      <button type="button" id="question-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i>&nbsp;Questions</button>
    </div>
  </div>
</div>

Upvotes: 4

Esa Hannila
Esa Hannila

Reputation: 1318

I suggess You to do it like this:

.btn {
    width: 100%;
    height: 56px;
    padding-left: 2% !important;
}
.btn i {
    left: 10px;
    width: 10%;
    top: 25%;
    height: 50%;
}
.btn.pull-left {
    text-align: left;
}

Also if you just want only these affect to sidebar buttons, add

#reading-sidebar .btn { } ETC...

If you want it not 100% width and centered, You should do it like this,

.btn { width: 80%; margin-left: 10%; }

That will make it centered easily. :)

Upvotes: 0

Akul Von Itram
Akul Von Itram

Reputation: 1534

If I get your question right. Do you mean this:

#reading-sidebar-contents .btn{
    width:200px;
}

Here is fiddle: https://jsfiddle.net/66bk2rfc/6/

Upvotes: 2

Jan_dh
Jan_dh

Reputation: 771

I changed your fiddle to match a solution. You can give your sidebar a width of 100%. Then you can just make your buttons 80% with one line of css and make them stay in the middle with the margin:0 auto. If you want to adjust your size of the buttons, you can easely change it with just the one line. You could also add the text-align:left, set a font-size for all the buttons,... for better styling to the buttons.

 #reading-sidebar
{
    width:80%;
   margin:0 auto;
}

 #reading-sidebar-contents button
{
  width:100%;
   margin:0 auto;
}

Link: https://jsfiddle.net/66bk2rfc/1/

Upvotes: 0

Related Questions