Bootstrap select with BS4 input-group-prepend

Question

I am using bootstrap 4 and bootstrap select version 1.13.2 (latest), which should support bootstrap 4. As mentioned in docs, i even manually specified BS verison via

$.fn.selectpicker.Constructor.BootstrapVersion = '4';

I wanted to have an icon next to the picker, i used following markup

<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <i class="fa fa-user"></i>
      </div>
    </div>
    <select id="internal-select-picker" class="form-control selectpicker" data-live-search="true" data-size="10" multiple>
      <option>option 1</option>
      <option>option 2</option>
      <option>option 3</option>
    </select>
  </div>                        
</div>

And the result is this, as you can see the icon is slightly larger than the select, i tried to apply different bs styles to both picker and icon group but nothing worked

Any suggestions how to resolve this issue will be appreciated

Rancho

Answer 1

I ended up coming up with my own fix by seeing what the Bootstrap CSS was doing to the drop down box and making my own classes to add fixes.

I added my own classes called fix-label-group and fix-label-item. See my jsfiddle below:

https://jsfiddle.net/ddschmitz/nkywb1xg/2/

Thymol

perfect fix and should be the accepted answer... if the question wasn't almost 2 years old :) – Raposa

Answer 2

The icon fits nicely when you use the latest Version (1.13.9). Bootstrap-Select has removed the border of the <select>, so it looks not exactly as your example. You can adjust the border with: .btn-light{ border: solid 1px #dde1e6; }

#border .btn-light{ border: solid 1px #dde1e6; }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/i18n/defaults-*.min.js"></script>

<div class="row">
  <div class="col-6">
    <div class="form-Group">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <i class="fa fa-user"></i>
          </div>
        </div>
        <select id="internal-select-picker" class="form-control selectpicker" data-live-search="true" data-size="10" multiple>
          <option>option 1</option>
          <option>option 2</option>
          <option>option 3</option>
        </select>
      </div>
      <div id="border" class="input-group mb-3">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <i class="fa fa-user"></i>
          </div>
        </div>
        <select id="internal-select-picker" class="form-control selectpicker" data-live-search="true" data-size="10" multiple>
          <option>option 1</option>
          <option>option 2</option>
          <option>option 3</option>
        </select>
      </div> 
    </div>
  </div>
</div>

Kinky