Completely ignores styling inside bootstrap form

[MaxNielsen]

I've been trying to solve this for days. A simple multiselect dropdown simply ignores any attempt I make at styling it, as well as the default bootstrap styling. What is happening here?

As you can see it looks different, the padding distance is off (the button size is also tiny be default but managed to set that in JS). Also there is no indication of what is selected/not selected...

Seems to completely ignore my instantiation in JS.

I use:

• Bootstrap 3
• bootstrap-multiselect js latest
• bootstrap-multiselect css latest

<form data-bind="submit: submitform">
    <div class="form-row">
        <div class="form-group col-sm-4">
            <label for="inputFirstName">Förnamn*</label>
            <input type="text" class="form-control" id="inputFirstName" placeholder="Förnamn" required />
        </div>
        <div class="form-group col-sm-4">
            <label for="inputLastName">Efternamn*</label>
            <input type="text" class="form-control" id="inputLastName" placeholder="Efternamn" required />
        </div>
        <div class="form-group col-sm-4">
            <label for="inputPhone">Telefon</label>
            <input type="text" class="form-control" id="inputPhone" placeholder="Telefon" />
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-sm-4">
            <label for="inputMobile">Mobiltelefon</label>
            <input type="text" class="form-control" id="inputMobile" placeholder="Mobiltelefon" />
        </div>
        <div class="form-group col-sm-8">
            <label for="inputEmail">Email*</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email" required />
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-sm-6">
            <label for="inputRole">Roll/Befattning</label>
            <select id="inputRole" class="form-control">
                <option selected>Välj...</option>
            </select>
        </div>
        <div class="form-group col-sm-6"> //<------------------ HERE
            <!-- <label for="inputSubject">Ämnesansvarig</label> -->
            <select id="inputSubject" multiple="multiple" class="selectpicker">
            </select>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-sm-12">
            <label for="inputCompany">Företag*</label>
            <div class="input-group">
                <div class="input-group-addon">
                    <span class="fa fa-search"></span>
                </div>
                <input type="text" class="form-control" id="inputCompany" placeholder="Sök företag..." required />
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="form-check">
            <div class="form-group col-sm-2">
                <input class="form-check-input" type="checkbox" id="contactCheckBox">
                <label class="form-check-label" for="contactCheckBox">Kontaktlärare</label>
            </div>
            <div class="form-group col-sm-2">
                <input class="form-check-input" type="checkbox" id="specialCheckBox">
                <label class="form-check-label" for="specialCheckBox">Specialpedagog</label>
            </div>
        </div>

        <div class="col-sm-4"></div>

        <div class="form-group col-sm-4">
            <button type="submit" class="btn btn-primary pull-right">Spara och stäng</button>
        </div>
    </div>
</form>

$(document).ready(function () {
                $('.selectpicker').selectpicker({
                    buttonWidth: '300px',
                    maxOptions: 5,
                    includeSelectAllOption: true,
                    nonSelectedText: 'Välj...'
                });
            });

[tiesont]

form-row and form-check are Bootstrap 4 classes - are you sure you're using Bootstrap 3? Are you displaying this within a modal of some sort?