CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
DGi
DGi

Reputation: 97

Bootstrap input-group-sm and input-group-append not working

i want to use a small input-group with an appended icon or button in Bootstrap 4. But when i use the example code and add the "-sm" to the input-group class the button is placed into the next row. How can i use the small input-group and append a button?

Here's the code

<div class="input-group-sm mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <div class="input-group-append">
    <button class="btn btn-success" type="submit">Go</button>  
  </div>
</div>

Upvotes: 8

Views: 6966

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362820

Read the docs: https://getbootstrap.com/docs/4.1/components/input-group/#sizing

Both input-group and input-group-sm should be used.

<div class="input-group input-group-sm mb-3">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-append">
        <button class="btn btn-success" type="submit">Go</button>
    </div>
</div>

https://codeply.com/go/xQqixpT60a

Upvotes: 17

Related Questions