CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Matthew Layton
Matthew Layton

Reputation: 42390

Bootstrap input group not grouping properly

I want to use an input group that I've modified from the bootstrap site.

This is what I have

Current design

This is what I want

Wanted design

This is my code

<div class="input-group">
    <input type="text" aria-label="Text input with segmented button dropdown" class="form-control">
    <div class="input-group-btn">
        <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider" role="separator"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
        <button class="btn btn-default" type="button">Action</button>
    </div>
</div>

What have I done wrong? Here is a fiddle https://jsfiddle.net/r7ttxr6p/3/

Upvotes: 0

Views: 261

Answers (3)

bassxzero
bassxzero

Reputation: 5041

I hope you enjoy this. It was stupidly annoying to figure out. The docs are not the best on this type of markup. https://jsbin.com/zabocusiti/edit?html,output

<div class="input-group">
  <input class="form-control" aria-label="Text input with segmented button dropdown" type="text"/>

  <div class="input-group-btn">

    <button type="button" class="btn btn-default " data-toggle="dropdown" aria-haspopup="true" >
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>

    <button type="button" class="btn btn-default">Action</button>

  </div>

</div><!-- /.input-group -->

Upvotes: 1

BastianW
BastianW

Reputation: 270

Bootstrap has no css for that. Put this in your css:

.input-group-btn:last-child > .btn:not(:last-child).dropdown-toggle {
  border-radius: 0;
}

http://jsfiddle.net/ubdoyn6z/1/

Upvotes: 4

KondukterCRO
KondukterCRO

Reputation: 543

<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-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
        <button type="button" class="btn btn-default">Action</button>
      </div>
    </div>

https://jsfiddle.net/zz1k5t3u/

Upvotes: -2

Related Questions