Bootstrap - Button toolbar width 100% - using btn-group's

3
votes

I have some problems with getting the bootstrap toolbar to fill 100% from left to right when i use btn-group's

I have tried use: btn-group-justified

Example without btn-group-justified

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Left 1</button>
    <button type="button" class="btn btn-default">Left 2</button>
    <button type="button" class="btn btn-default">Left 3</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Middle 1</button>
    <button type="button" class="btn btn-default">Middle 2</button>
    <button type="button" class="btn btn-default">Middle 3</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Right 1</button>
    <button type="button" class="btn btn-default">Right 2</button>
    <button type="button" class="btn btn-default">Right 3</button>
  </div>
</div>

Example with btn-group-justified

<div class="btn-toolbar btn-group-justified" role="toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Left 1</button>
    <button type="button" class="btn btn-default">Left 2</button>
    <button type="button" class="btn btn-default">Left 3</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Middle 1</button>
    <button type="button" class="btn btn-default">Middle 2</button>
    <button type="button" class="btn btn-default">Middle 3</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Right 1</button>
    <button type="button" class="btn btn-default">Right 2</button>
    <button type="button" class="btn btn-default">Right 3</button>
  </div>
</div>

And also the function: width="100%" does not work. any suggestions? or alternatives?

Thanky you.

2
htmlcsstwitter-bootstrap-3
Show us your code please. - Vincent Beltman
the code has been added now - Ramgaard
Possible duplicate of Bootstrap 3 btn-group width - Feeco
@Feeco no: the solution in that question was already attempted, and the issue here is with btn-toolbar not btn-group - gdvalderrama

2 Answers

2
votes

Use btn-block class and col-xx-yy class:

<div class="btn-group btn-block">
    <button class="btn btn-default col-lg-4" type="button">Left 1</button>
    <button class="btn btn-default col-lg-4" type="button">Left 2</button>
    <button class="btn btn-default col-lg-4" type="button">Left 3</button>
</div>
-1
votes

I think the solution is to add an extra btn-group div into the hierarchy and use btn-group-justified on that, i.e.

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button class="btn btn-default" type="button">Left 1</button>
      <button class="btn btn-default" type="button">Left 2</button>
      <button class="btn btn-default" type="button">Left 3</button>
    </div>
    <div class="btn-group">
      <button class="btn btn-default" type="button">Middle 1</button>
      <button class="btn btn-default" type="button">Middle 2</button>
      <button class="btn btn-default" type="button">Middle 3</button>
    </div>
    <div class="btn-group">
      <button class="btn btn-default" type="button">Right 1</button>
      <button class="btn btn-default" type="button">Right 2</button>
      <button class="btn btn-default" type="button">Right 3</button>
    </div>
  </div>
</div>