bootstrap-select-country

A jQuery plugin that utilizes Bootstrap's dropdown.js and bootstrap-select to provide country data and styling to standard select elements.

4.2.0
latest
Source
npm

Version published: 5 years ago

Maintainers: 1

Created: 7 years ago

Source

bootstrap-select-country

based on the popular bootstrap-select bootstrap-select-country examples

bootstrap-select-country is a jQuery plugin that utilizes Bootstrap's dropdown.js and bootstrap-select to provide country data and styling to standard select elements.

Dependencies

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 countrypicker will populate the select with countries.

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

Minimal example

Here is a minimal example:

<!DOCTYPE html>
<html>
<head>
  <title>JS Bin</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  
  <link rel="stylesheet" href="//unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="//unpkg.com/bootstrap-select@1.12.4/dist/css/bootstrap-select.min.css" type="text/css" />
  <link rel="stylesheet" href="//unpkg.com/bootstrap-select-country@4.0.0/dist/css/bootstrap-select-country.min.css" type="text/css" />

  <script src="//unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
  <script src="//unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  <script src="//unpkg.com/bootstrap-select@1.12.4/dist/js/bootstrap-select.min.js"></script>
  <script src="//unpkg.com/bootstrap-select-country@4.0.0/dist/js/bootstrap-select-country.min.js"></script>
  
</head>
<body>
  <select class="selectpicker countrypicker" data-flag="true" ></select>

  <script>
    $('.countrypicker').countrypicker();
  </script>
  
</body>
</html>

Copyright and license

Licensed under the MIT license.

FAQ

Bootstrap 4 beta-2

Bootstrap-select is still incompatible (ver. 1.12.4) with Bootstrap 4 beta-2. Include an additional CSS file, or put the following between tags on the page you're displaying the country-picker on:

/*
Make bootstrap-select work with bootstrap 4 see:
https://github.com/silviomoreto/bootstrap-select/issues/1135
*/
.dropdown-toggle.btn-default {
  color: #292b2c;
  background-color: #fff;
  border-color: #ccc;
}
.bootstrap-select.show > .dropdown-menu > .dropdown-menu {
  display: block;
}
.bootstrap-select > .dropdown-menu > .dropdown-menu li.hidden {
  display: none;
}
.bootstrap-select > .dropdown-menu > .dropdown-menu li a {
  display: block;
  width: 100%;
  padding: 3px 1.5rem;
  clear: both;
  font-weight: 400;
  color: #292b2c;
  text-align: inherit;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  text-decoration: none;
}
.bootstrap-select > .dropdown-menu > .dropdown-menu li a:hover {
  background-color: #f4f4f4;
}
.bootstrap-select > .dropdown-toggle {
  width: 100%;
}
.dropdown-menu > li.active > a {
  color: #fff !important;
  background-color: #337ab7 !important;
}
.bootstrap-select .check-mark {
  line-height: 14px;
}
.bootstrap-select .check-mark::after {
  font-family: "FontAwesome";
  content: "\f00c";
}
.bootstrap-select button {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make filled out selects be the same size as empty selects */
.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  display: inline !important;
}

Keywords

FAQs

What is bootstrap-select-country?

Is bootstrap-select-country well maintained?

Package last updated on 04 Jun 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install