Usage

Create your <select> with the .selectpicker and .countrypicker class. The data-api from bootstrap-select will automatically apply a basic theme to these elements. Then the data-api from bootstrap-select-country will populate the select with countries.

<select class="selectpicker countrypicker"></select>

Examples

For more options have a look in the bootstrap-select docs.

Basic Example

Simple Country-Picker

<select class="selectpicker countrypicker"></select>

Data Default

Set default country "DE"

<select class="selectpicker countrypicker" data-default="DE"></select>

Live Search

Searchable with bootstrap-select.js

<select class="selectpicker countrypicker" data-live-search="true" ></select>

With Flag

Show flags

<select class="selectpicker countrypicker" data-flag="true" ></select>

Multi-select

Multi-select enabled

<select class="selectpicker countrypicker" multiple></select>

Multible Defaults

Set multiple defaults

<select class="selectpicker countrypicker" data-default="DE,JP" multiple></select>

Multible with Flag

Multi-select with flags

<select class="selectpicker countrypicker" data-flag="true" multiple></select>

Only EU countries

Show only a selection of countries

<select class="selectpicker countrypicker" data-countries="AT,BE,BG,HR,CY,CZ,DK,EE,FI,FR,DE,GR,HU,IE,IT,LV,LT,LU,MT,NL,PL,PT,RO,SK,SI,ES,SE" ></select>

bootstrap-select-country

based on the popular bootstrap-select

Dependencies