Define fixed width input-group-append div in Bootstrap 4

Question

I am using the bootstrap 4 input group function to place an icon next to an input field. I want to have a fixed width of 40px for input-group-append div (that includes the icon).

The bootstrap docs say "Sizing on the individual input group elements isn’t supported." But I am sure there must be a CSS way of doing it:

<div class="form-group">
  <label>Some label</label>
  <div class="input-group">
    <input type="text" class="form-control"/>
    <div class="input-group-append">
      <i class="icon"></i>
    </div>
  </div>
</div>

Any idea how I can do it?

Not supported by **Bootstrap**...what happens if you do add a width? — Paulie_D, Aug 20 '18 at 11:23
Flexbox should still accept a width even if it's `flex: 0 0 40px;` — Paulie_D, Aug 20 '18 at 11:26
Tried that before on `.input-group-append` but it did not change the width. — nimrod, Aug 20 '18 at 11:37
It would be on the icon (.input-group-text), not the .input-group-append — Carol Skelly, Aug 20 '18 at 11:43
The icon does not have `.input-group-text` class, why should it be there? — nimrod, Aug 20 '18 at 11:56
Yes... [input-group-text](https://getbootstrap.com/docs/4.1/components/input-group/), or a button. — Carol Skelly, Aug 20 '18 at 11:58

score 1 · Answer 1 · answered Aug 20 '18 at 11:40

Try use !important to prevent override

.input-group-append{
width:40px!important;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="form-group">
  <label>Some label</label>
  <div class="input-group">
    <input type="text" class="form-control"/>
    <div class="input-group-append">
      <i class="icon">icon</i>
    </div>
  </div>
</div>

taht what you mean? – לבני מלכה Aug 20 '18 at 11:42 — לבני מלכה, Aug 20 '18 at 11:42

Define fixed width input-group-append div in Bootstrap 4

1 Answers1