CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Manuel Bernhardt
Manuel Bernhardt

Reputation: 3144

Mixing button groups and input groups on the same line

I am trying to create a toolbar that contains a number of button groups as well as one input (for a date field). I can't seem to find a way to get this to work in such a way that elements stay aligned on the same line.

Here is an extract of the toolbar I am trying to get to work:

<div class="btn-group">
  <input class="form-control" type="text" id="date" name="date" size="4" >
  <button type="button" class="btn btn-default">Now</button>
  <button type="button" class="btn btn-default">All</button>
</div>

<div class="btn-group">
  <button type="button" class="btn">Active items</button>
  <button type="button" class="btn">Archive</button>
</div>

I have created a Plunkr here: http://plnkr.co/lsvPD6yC7H8xRe4JsFdR

I tried various combinations, including cutting all button groups of the toolbar in different columns, which makes things worse and does not work either.

I'm wondering if this behaviour can be achieved at all, or if I am missing something obvious.

Upvotes: 2

Views: 3358

Answers (1)

Ted
Ted

Reputation: 14927

Like so (note the addition of the class ig-mid-btn to the 'Now' button):

<div class="form-inline">
    <div class="form-group">
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
        <div class="input-group">
            <input class="form-control" type="text" id="date" name="date" size="4">
            <span class="input-group-btn">
                <button type="button" class="btn btn-default ig-mid-btn">Now</button>
            </span>
            <span class="input-group-btn">
                <button type="button" class="btn btn-default">All</button>
            </span>
        </div><!-- /input-group -->
        <div class="btn-group">
            <button type="button" class="btn">Active items</button>
            <button type="button" class="btn">Archive</button>
        </div>
    </div>
</div>

With this CSS:

.ig-mid-btn{
    border-radius:0;
    border-left:0 none transparent;
}

See this demo bootply

Upvotes: 3

Related Questions