Bootstrap 4: Dropdown main button (input-group + btn-group) with 100% width (or auto)

Question

I have an issue with the width of a button present in an input group. I'm using Bootstrap 4.0.0-alpha.6 (Flexbox).

This is what I have.

This is what I want.

This is the code.

<div class="input-group mb-3">
    <span class="input-group-addon"><i class="fa fa-sort fa-fw"></i></span>
    <span class="input-group-btn">
        <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">Name</button>
            <div class="dropdown-menu">
                <a class="dropdown-item active" href="#">Name</a>
                <a class="dropdown-item" href="#">Author</a>
                <a class="dropdown-item" href="#">NewDark version</a>
                <a class="dropdown-item" href="#">Related game</a>
                <a class="dropdown-item" href="#">First release date</a>
                <a class="dropdown-item" href="#">Last update date</a>
            </div>
        </div>
    </span>
    <span class="input-group-btn"><button type="button" class="btn btn-secondary active"><i class="fa fa-sort-amount-asc fa-fw"></i></button></span>
    <span class="input-group-btn"><button type="button" class="btn btn-secondary"><i class="fa fa-sort-amount-desc fa-fw"></i></button></span>
</div>

Does someone have any idea how I can automatically fix the width of this button? Maybe with one specific Flexbox property?

<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">Name</button>

Bootply code: http://www.bootply.com/DRLKMrc99S

It's good idea to give it in working (with cdn jquery etc.) code snippet. — Sylogista, May 10 '17 at 20:24

score 1 · Accepted Answer · edited May 23 '17 at 12:18

I've added btn-block and text-left classes. See more at similar question.

<div class="container">
  <div class="row">
    <div class="col">
      <div class="input-group mb-3">
        <span class="input-group-addon"><i class="fa fa-search fa-fw"></i></span>
        <input class="form-control" placeholder="Just type something..." type="text">
        <span class="input-group-addon input-group-addon-clear wdh-4-rem">
          <div class="loaded">100</div>
        </span>
      </div>
      <div class="input-group mb-3">
        <span class="input-group-addon"><i class="fa fa-sort fa-fw"></i></span>
        <span class="input-group-btn btn-block">
          <div class="btn-group btn-block">
            <button type="button" class="btn btn-secondary btn-block dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">Name</button>
            <div class="dropdown-menu btn-block">
              <a class="dropdown-item active" href="#">Name</a>
              <a class="dropdown-item" href="#">Author</a>
              <a class="dropdown-item" href="#">NewDark version</a>
              <a class="dropdown-item" href="#">Related game</a>
              <a class="dropdown-item" href="#">First release date</a>
              <a class="dropdown-item" href="#">Last update date</a>
            </div>
          </div>
        </span>
        <span class="input-group-btn"><button type="button" class="btn btn-secondary active"><i class="fa fa-sort-amount-asc fa-fw"></i></button></span>
        <span class="input-group-btn"><button type="button" class="btn btn-secondary"><i class="fa fa-sort-amount-desc fa-fw"></i></button></span>
      </div>
    </div>
  </div>
</div>

http://www.bootply.com/PFOMxDHJoL

Bootstrap 4: Dropdown main button (input-group + btn-group) with 100% width (or auto)

1 Answers1