'Select2 with Bootstrap theme not honoring input group class

I'm trying to use the select2 with an input group, but the button is always on the next line after the select2 control. If you remove the select2 class it works as expected. Why does the select2 bootstrap not honor the standard bootstrap input group classes if it's based on the bootstrap theme? What am I missing to ensure they are both on the same line and displayed as a group?

Without select2 class (and how I would like it to look)

With Select2

With Select2 and adding style="width:75%" (off at bottom)

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" />
    <link rel="stylesheet" href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.full.js"></script>
</head>
<body class="container">
    <p></p>
    <div class="input-group">
        <select class="form-control select2" placeholder="Search"></select>
        <div class="input-group-append">
            <button class="btn btn-success" type="submit">Go</button>
        </div>
    </div>
</body>
</html>

<script>
    $(".select2").select2({
        theme: "bootstrap",
        placeholder: "Search"
} );
</script>

bootstrap-4 jquery-select2

Solution 1:^[1]

Yea the default bootstrap style from Select2 doesn't work that well with bootstrap. You need to write some custom styles to get what you want:

.input-group > .select2-container--bootstrap {
    width: auto;
    flex: 1 1 auto;
}

.input-group > .select2-container--bootstrap .select2-selection--single {
    height: 100%;
    line-height: inherit;
    padding: 0.5rem 1rem;
}

Select2 has fixed width and height for the fakery search box. You have to reset them. You also need to turn on the ability of grow and shrink for the fakery search box, with flex: 1 1 auto;.

demo: https://jsfiddle.net/davidliang2008/o0tLw56f/15/

Solution 2:^[2]

Just remove:

.select2 {
  width: 100% !important; }

From the select2 CSS. It will work.

Solution 3:^[3]

I had to do some small modifications to my stylesheet in combination with Bootstrap4.

Instead of class .select2-container--bootstrap I had to use .select2-container--bootstrap4. Additionally I marked all properties as important see as follows:

.input-group > .select2-container--bootstrap4 {
    width: auto !important;
    flex: 1 1 auto !important;
}

.input-group > .select2-container--bootstrap4 .select2-selection--single {
    height: 100% !important;
    line-height: inherit !important;
}

Solution 4:^[4]

I have updated @David's answer as it was not working perfectly for me, borders were not proper

.input-group > .select2-container--bootstrap, .input-group > .select2-container--default {
    width: auto;
    flex: 1 1 auto;
}

    .input-group > .select2-container--bootstrap .select2-selection--single,
    .input-group > .select2-container--default .select2-selection--single,
    .input-group > .select2-container--bootstrap .select2-selection--multiple,
    .input-group > .select2-container--default .select2-selection--multiple {
        height: 100%;
        line-height: inherit;
        border-radius: 4px 0 0 4px;
    }

        .input-group > .select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
        .input-group > .select2-container--default .select2-selection--single .select2-selection__rendered,
        .input-group > .select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered,
        .input-group > .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            height: inherit;
            display: -webkit-box !important;
            display: -ms-flexbox !important;
            display: flex !important;
            -webkit-box-align: center !important;
            -ms-flex-align: center !important;
            align-items: center !important;
        }

        .input-group > .select2-container--bootstrap .select2-selection--single .select2-selection__arrow,
        .input-group > .select2-container--default .select2-selection--single .select2-selection__arrow,
        .input-group > .select2-container--bootstrap .select2-selection--multiple .select2-selection__arrow,
        .input-group > .select2-container--default .select2-selection--multiple .select2-selection__arrow {
            height: inherit;
        }

Solution 5:^[5]

I have been resolved this problem well! You can rebind select2 object with ajax! follow this steps:

1- Add fake div in your html page like as this

<div id="forreload"></div>

2- Create one file with this contents EX: reloadtheme.html

<script>
$(function () {
    //Initialize Select2 Elements
    $('.select2').select2()
    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })

  })
</script>

3- Add ajax query in your page code like as this

function reloadpositions() {
        $.ajax({
            type: "GET",
            url: "reloadtheme.html" ,
            data: { temp: "0" },
            success : function(response){ //
                $("#forreload").html(response);
            }
        });
}

4- Now call reloadpositions() everywhere you want. for example in end of page or after one event that occuration this problem.

Enjoy!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	David Liang
Solution 2	ouflak
Solution 3	Sum1Unknown
Solution 4	Snziv Gupta
Solution 5	seyed hossein abtahi

'Select2 with Bootstrap theme not honoring input group class

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]