Input group with segmented buttons (Bs-4-alpha)

Question

In Bootstrap 4's input-group dropdown arrow is displayed under action button:

    <div class="container">
        <div class="input-group">
          <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
          <div class="input-group-btn">
            <button type="button" class="btn btn-primary">Action</button>
            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>
        </div>
    </div>
    
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

But I want it to look like this (a Bootstrap3 example):

Please post solutions as answers not updated within your code. I have rolled back but please do post your solution as an answer. Thank you. — Bugs, Jun 28 '17 at 09:56
@Bugs done. i placed original code snippet into question, and a modified one into answer — Winand, Jun 28 '17 at 10:33

score 1 · Accepted Answer · answered Jun 28 '17 at 07:06

<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<style>
.input-group-btn
{
    display: table-cell;
}
</style>
<div class="container">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
      <div class="input-group-btn">
        <button type="button" class="btn btn-primary">Action</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
    </div>
</div>

 <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>
</html>

Looks like a solution. Is it a "hack" or there's something about this in docs? — Winand, Jun 28 '17 at 07:39
Its not given in any docs. Bootstrap 4 is using flex display I just changed it to table-cell which is given in BS3 . :-) — Mayank, Jun 28 '17 at 07:48
Thanks, I'll accept your answer. Also I've found a flexbox-oriented solution: `.input-group-btn { flex-direction: row; }` (it's `column` by default) — Winand, Jun 28 '17 at 09:08

Winand · Answer 2 · 2017-06-28T10:37:12.413

A flexbox-oriented solution (as an addition to the accepted one):

.input-group-btn
{
  flex-direction: row !important;
}

Default style is flex-direction: column so buttons are stacked.

.input-group-btn
{
  flex-direction: row !important;
}

    <div class="container">
        <div class="input-group">
          <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
          <div class="input-group-btn">
            <button type="button" class="btn btn-primary">Action</button>
            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>
        </div>
    </div>
    
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

Input group with segmented buttons (Bs-4-alpha)

2 Answers2