Twitter Bootstrap Question posted in

spread Bootstrap's buttons to 100% of their containing div – Twitter bootstrap

How would you let bootstrap self-spread buttons to 100% width of their parent, without adjusting each of the button’s width separately ?

for example if i have 8 buttons, 100% containers width / 8 buttons = 12% width for each button.

i would like to:

  1. avoid specifying each button’s width (today i got 8 tomorrow i’ll
    have 20).

  2. adjusting the whole .btn-group’s child buttons to the center (if you pay close attention you’ll see the buttons inside the container are left-aligned for some reason).

btn-group buttons in container

.btn-group {
  width: 100%;
}
.btn-group>input.btn {
  width: 12%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container panel panel-default">
  <div class="btn-group">
    <input type="button" class="btn btn-primary btn-responsive" value="A" />
    <input type="button" class="btn btn-primary btn-responsive" value="AB" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABC" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABCD" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABCDE" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABCD" />
    <input type="button" class="btn btn-primary btn-responsive" value="ABC" />
    <input type="button" class="btn btn-primary btn-responsive" value="AB" />
  </div>

  <br/>
  <br/>
  <br/>

  <p>the buttons above don't take full width of the container</p>
</div>

Example CSS:

.btn-group {
  width: 100%;
}

.btn-group>input.btn {
  width: 12%;
}

Codepen

Tags:

3

Answers


  1. 0

    This effect is easiest achieved with flexbox.

    .btn-group {
  display: flex;
  justify-content: center;
}

.btn-group > input.btn {
  flex-grow: 1;
}

    Depending on your what browers you target you might want to prefix

    Login or Signup to reply.
  2. 0

    HTML added .row inside grid which will allow you to reach 100%.
    no I have added .col-xs-12 inside .row which might not be necessary but i have tried to follow what bootstrap gives ie container > row > column.

    additions .. make .btn-group to be .btn-block too, it spans it 100%.

    <div class="container panel panel-default">
  <div class="row">
    <div class="col-xs-12 no-padding">


     <div class="btn-group btn-block my-btn-group">
            <input type="button" class="btn btn-primary btn-responsive" value="A"/>
            <input type="button" class="btn btn-primary btn-responsive" value="AB"/>
            <input type="button" class="btn btn-primary btn-responsive" value="ABC"/>
            <input type="button" class="btn btn-primary btn-responsive" value="ABCD"/>
            <input type="button" class="btn btn-primary btn-responsive" value="ABCDE"/>
            <input type="button" class="btn btn-primary btn-responsive" value="ABCD"/>
            <input type="button" class="btn btn-primary btn-responsive" value="ABC"/>
            <input type="button" class="btn btn-primary btn-responsive" value="AB"/>
    </div>
  </div>
        </div>
  <br/>
  <br/>
  <br/>

  <p>the buttons above don't take full width of the container</p>
</div>

    CSS : i have removed padding from ‘column’ and removed margin from buttons insided button group

    .btn-group>input.btn {
  width:12.5%;
}

.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;  
}

.my-btn-group .btn+.btn {
  margin-left: 0px;
}
    Login or Signup to reply.
  3. 0

    If using Flexbox isn’t the best option for your use case then you can use a table layout. Another advantage is the control you have with regard to responsive behavior since the default btn-group doesn’t offer much in this regard.

    These elements behave like <table> HTML elements. It defines a
    block-level box.

    Basic Example: Run with FullPage

    /*Basic Rules*/

.panel-btn {
  width: 100%;
  display: table;
}
.panel-btn div {
  display: table-cell;
}
.panel-btn div .btn {
  float: none;
  width: 100%;
  border-radius: 0;
}
/*Rounded Corner Rules*/

.panel-btn div:first-of-type .btn {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.panel-btn div:last-of-type .btn {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">

  <h2>11 Buttons</h2>

  <div class="panel panel-default panel-btn">
    <div>
      <input type="button" class="btn btn-primary" value="A" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="AB" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABC" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCD" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEF" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEFG" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEFGH" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEFGHI" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="1" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="12" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="123" />
    </div>
  </div>

</div>

    Responsive Example: Run with FullPage and reduce the browser window

    /*Basic Rules*/

.panel-btn {
  width: 100%;
  display: table;
}
.panel-btn div {
  display: table-cell;
}
.panel-btn div .btn {
  float: none;
  width: 100%;
  border-radius: 0;
}
/*Rounded Corner Rules*/

.panel-btn div:first-of-type .btn {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.panel-btn div:last-of-type .btn {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
/*Responsive CSS*/

@media screen and (max-width: 850px) {
  .panel-btn div {
    width: 50%;
  }
  .panel-btn div:nth-child(even) {
    float: right;
  }
  .panel-btn div:nth-child(odd) {
    float: left;
  }
  .panel-btn div:last-child:not(:nth-child(even)) {
    width: 100%;
    display: block;
  }
  /*Rounded Corner Rules*/
  .panel-btn div:first-of-type .btn {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 4px;
  }
  .panel-btn div:nth-child(2) .btn {
    border-top-right-radius: 4px;
  }
  .panel-btn div:last-of-type .btn {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 0px;
  }
  .panel-btn div:last-child:not(:nth-child(even)) .btn {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .panel-btn div:nth-last-child(2):not(:nth-child(even)) .btn {
    border-bottom-left-radius: 4px;
  }
}
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">

  <h2>11 Buttons</h2>

  <div class="panel panel-default panel-btn">
    <div>
      <input type="button" class="btn btn-primary" value="A" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="AB" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABC" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCD" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEF" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEFG" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEFGH" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="ABCDEFGHI" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="1" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="12" />
    </div>
    <div>
      <input type="button" class="btn btn-primary" value="123" />
    </div>
  </div>

  <br/>

  <h2>10 Buttons</h2>

  <div class="panel panel-default panel-btn">
    <div>
      <input type="button" class="btn btn-danger" value="123456789" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="12345678" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="1234567" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="123456" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="12345" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="1234" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="123" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="12" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="1" />
    </div>
    <div>
      <input type="button" class="btn btn-danger" value="A" />
    </div>
  </div>

  <br/>

  <h2>9 Buttons</h2>

  <div class="panel panel-default panel-btn">
    <div>
      <input type="button" class="btn btn-success" value="A" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="AB" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="ABC" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="ABCD" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="ABCDEF" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="ABCDEFG" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="ABCDEFGH" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="ABCDEFGHI" />
    </div>
    <div>
      <input type="button" class="btn btn-success" value="1" />
    </div>
  </div>

  <br/>

  <h2>20 Buttons</h2>

  <div class="panel panel-default panel-btn">
    <div>
      <input type="button" class="btn btn-warning" value="1" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="2" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="3" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="4" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="5" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="6" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="7" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="8" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="9" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="10" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="11" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="12" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="13" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="14" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="15" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="16" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="17" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="18" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="19" />
    </div>
    <div>
      <input type="button" class="btn btn-warning" value="20" />
    </div>
  </div>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search