CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Scrumplex
Scrumplex

Reputation: 542

Make Bootstrap input group full width

My problem is, that my input-group's width is not 100%.

This is how it looks at the moment: https://jsfiddle.net/6gmzz07b/

I just want, that the input-group's width is 100%, so that it fills the container.

Upvotes: 6

Views: 18617

Answers (3)

ozkanoner
ozkanoner

Reputation: 111

I was looking solution for newer version of Bootstrap like 4.6 but above answers not worked for me.

For Bootstrap v4.6 you need to add "flex: 1;" to your input. This makes your input expands to entire area except append or prepend.

<div class="input-group mb-3">
  <input type="text" class="form-control" style="flex: 1;" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

Upvotes: 1

Ismail Farooq
Ismail Farooq

Reputation: 6807

According to bootstrap example you need to add input-group-btn element.

For Example.

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <select class="form-control">
      <option selected="">seconds</option>
      <option>minutes</option>
      <option>hours</option>
      <option>days</option>
      <option>weeks</option>
    </select>
  </div>
</div>

Fiddle here

Upvotes: 5

Jagtar Singh
Jagtar Singh

Reputation: 21

Here is the fiddle which will take the 100% width fiddle

<div class="container">
  <div class="row">
    <div class="">
    <div class="col-xs-12">
<div class="input-group">
    <input id="ban_time" type="number" class="form-control" value="10">
    <span class="input-group-addon">
      <select class="form-control" style="width: auto">
      <option selected="">seconds</option>
      <option>minutes</option>
      <option>hours</option>
      <option>days</option>
      <option>weeks</option>
    </select>
    </span>

  </div>
    </div>
  </div>
</div>

You will have remove the input style="width:auto" and will have to add extra span and give the class input-group-addon and will have to nest the select tag inside the span tag

Upvotes: 0

Related Questions