Bootstrap 4 Support

[mojoaxel]

bootstrap-select >= 1.13.0 has Bootstrap 4 support. We should update!

[SyedDaniyalUI]

Just Add this Additional CSS for bootstrap 4 support

/*=======================
  Country Picker Start
======================*/

.bootstrap-select.countrypicker button.btn.dropdown-toggle {
    position: absolute;
    z-index: 999;
    background: #fff;
    width: 100%;
    border: 1px solid #ced4da;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bootstrap-select.countrypicker button.btn.dropdown-toggle span.filter-option {
    width:auto;
}
.bootstrap-select.countrypicker .dropdown-menu.open.show {
    height: auto !important;
    max-height: 300px !important;
    width: 100%;
}

.bootstrap-select.countrypicker .dropdown-menu.open.show ul.dropdown-menu.inner {
    max-height: 300px !important;
    overflow: auto !important;
    position: initial;
    display: block;
}

.bootstrap-select.countrypicker .dropdown-menu.open.show ul.dropdown-menu.inner li {
    border-bottom: 1px solid #e9e9e9;
    padding: 10px;
}

.bootstrap-select.countrypicker .dropdown-menu.open.show ul.dropdown-menu.inner li a.option-with-flag {
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

/*=======================
  Country Picker End
======================*/

[dandrew10]

Hello, i've to ask something. I already used bootstrap 4 and can't downgrade it just because using this bootstrap-select-country. The dropdown is appear but can't working to display all country. Please give me a suggestion. Thank you

[mojoaxel]

@dandrew10 Sadly there is no boostrap 4 support at the moment. I also have no time at the moment to work on it.

[gubrus50]

.bootstrap-select.countrypicker button.btn.dropdown-toggle span.filter-option { height:18px; width:auto; }

I've added this to my CSS to fix the text alignment. E.g. When "Afganistan" is selected, the g character used to be displayed half-cut.