CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbuttontwitter-bootstrap-3
Lisa
Lisa

Reputation: 540

Btn-group not stretching width of table

I have a table with a table header and a table row. The header is a btn-group, with 12 buttons to resemble months of a calendar, the row is of 31 columns. I want the btn-group to distribute evenly & stretch the full width of the table row. I can add style="width:100px;" to each button, but that's not responsive, and I don't necessarily know the width of the full table.

Can anyone see what I need to add to my code?

<thead>
    <tr>
      <th colspan="31">
        <div class="btn-toolbar" role="toolbar">
          <div class="btn-group">
            <button type="button" class="btn btn-default">Jan</button>
            <button type="button" class="btn btn-default">Feb</button>
            <button type="button" class="btn btn-default">Mar</button>
            <button type="button" class="btn btn-default active">Apr</button>
            <button type="button" class="btn btn-default">May</button>
            <button type="button" class="btn btn-default">Jun</button>
            <button type="button" class="btn btn-default">Jul</button>
            <button type="button" class="btn btn-default">Aug</button>
            <button type="button" class="btn btn-default">Sep</button>
            <button type="button" class="btn btn-default">Oct</button>
            <button type="button" class="btn btn-default">Nov</button>
            <button type="button" class="btn btn-default">Dec</button>
          </div>
        </div>
      </th>
    </tr>
  </thead>

Here is the css tag I changed from the Bootstrap 3 defaults:

.btn-group { width:100%; }

.btn-toolbar { width:100%; }

Btn-group not full width

If I use btn-group-justified, it looks like this:

btn-group-justified

Upvotes: 1

Views: 2904

Answers (1)

CodeTrooper
CodeTrooper

Reputation: 1888

Add the following class to the parent container: .btn-group-justified

<thead>
<tr>
  <th colspan="31">
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group btn-group-justified">
        <button type="button" class="btn btn-default">Jan</button>
        <button type="button" class="btn btn-default">Feb</button>
        <button type="button" class="btn btn-default">Mar</button>
        <button type="button" class="btn btn-default active">Apr</button>
        <button type="button" class="btn btn-default">May</button>
        <button type="button" class="btn btn-default">Jun</button>
        <button type="button" class="btn btn-default">Jul</button>
        <button type="button" class="btn btn-default">Aug</button>
        <button type="button" class="btn btn-default">Sep</button>
        <button type="button" class="btn btn-default">Oct</button>
        <button type="button" class="btn btn-default">Nov</button>
        <button type="button" class="btn btn-default">Dec</button>
      </div>
    </div>
  </th>
</tr>

and for even more reference, read the following part of the documentation:

http://getbootstrap.com/components/#btn-groups-justified

Upvotes: 2

Related Questions