Bootstrap-select - Shim repository for Bootstrap-select that works with bootstrap 4.

Overview

bootstrap-select

Latest release Bower npm NuGet CDNJS

License Dependency Status devDependency Status

Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements.

bootstrap-select demo

Demo and Documentation

You can view a live demo and some examples of how to use the various options here.

Bootstrap-select's documentation, included in this repo in the root directory, is built with MkDocs and publicly hosted on GitHub Pages at http://silviomoreto.github.io/bootstrap-select. The documentation may also be run locally.

Running documentation locally

  1. If necessary, install MkDocs.
  2. From the /bootstrap-select/docs directory, run mkdocs serve in the command line.
  3. Open http://127.0.0.1:8000/ in your browser, and voilà.

Learn more about using MkDocs by reading its documentation.

Authors

Silvio Moreto, Ana Carolina, caseyjhol, Matt Bryson, and t0xicCode.

Usage

Create your <select> with the .selectpicker class.

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

If you use a 1.6.3 or newer, you don't need to do anything else, as the data-api automatically picks up the <select>s with the selectpicker class.

If you use an older version, you need to add the following either at the bottom of the page (after the last selectpicker), or in a $(document).ready() block.

// To style only <select>s with the selectpicker class
$('.selectpicker').selectpicker();

Or

// To style all <select>s
$('select').selectpicker();

Checkout the documentation for further information.

CDN

N.B.: The CDN is updated after the release is made public, which means that there is a delay between the publishing of a release and its availability on the CDN. Check the GitHub page for the latest release.

Bugs and feature requests

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing. Make sure you're using the latest version of bootstrap-select before submitting an issue.

Copyright and license

Copyright (C) 2013-2015 bootstrap-select

Licensed under the MIT license.

Used by

Does your organization use bootstrap-select? Open an issue, and include a link and logo, and you'll be added to the list.

Comments
  • no bower package

    no bower package

    Hi, There is no bower package available for this alternate version of silvio moreto's bootstrap-select. I had to add it manually to VS, but is there a bower package you could create?

    enhancement 
    opened by krystyna93 6
  • change style via options

    change style via options

    i try set default settings:

    $('.selectpicker').selectpicker({'container': 'body', 'size': 4, 'style':'btn-info'});

    but on my page style not change to my variant and stay btn-light.

    opened by reimax 3
  • optgroup dividers

    optgroup dividers

    The library is adding selectable dividers when using optgroup. Im guessing the problem is that its an A element that makes it selectable... just wanted to let you know. PS. the divider class in BS4 has been changed to dropdown-divider dividers

    bug 
    opened by Wuild 2
  • live search reposition

    live search reposition

    Just checking if its just me. When using a very large list and it goes into dropup mode, when searching the list the menu doesn't reposition to the toggle button untill the window is resized When using bootstrap 4 position1 position2

    bug 
    opened by Wuild 2
  • Life_search Does not work with Bootstrap 4.0.0 beta 2

    Life_search Does not work with Bootstrap 4.0.0 beta 2

    Hey,

    I tried to get the "original" Bootstrap-Select working on Bootstrap 4.0.0-beta.2 but it doesn't work. In the Issue you wrote that your repo works with Bootstrap 4, but in my Case the Live-Search does nothing.

    Example: https://plnkr.co/edit/zG5BsiiZOukH7KYWgjVZ

    Am I doing anything wrong?

    Thanks!

    opened by tobilektri 1
  • Example test.html dropdown list not render properly

    Example test.html dropdown list not render properly

    test-page-dropdown-not-render

    test-page-dropdown-not-render-2

    Hi,

    I have downloaded your example code from master and give it a try. Looks like the dropdown list is not rendered properly Please see the attached. When open the dropdown and click on any items, there is no tick to indicate which item has been clicked.

    I have tried with different browsers such as Firefox and Chrome (both with latest version), they all appear to be the same.

    Thanks.

    bug 
    opened by dwade0o 1
  • Live search doesn't hide dividers and headers in empty optgroups

    Live search doesn't hide dividers and headers in empty optgroups

    Tried to debug it, but had no luck - options get hidden, but header and divider don't get 'hidden' class. Not a critical bug, but something to review.

    bug 
    opened by Kopyov 0
  • fixed elements on header and divider

    fixed elements on header and divider

    add function generateDiv since we can't use an A element on headers and dividers since they get selectable then. Also changed the divider class to dropdown-divider since bootstrap changed it. Tried to follow the guidlines but the source files are not provided on the repository. Also sorry about all the "space" changes... stupid auto format

    opened by Wuild 0
  • Using iconify library for icons

    Using iconify library for icons

    I am trying to use iconify library with bootsrap-select. I have following code:

    <script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
    <!-- other code -->
    <div class="form-group row">
       <select class="selectpicker form-control" data-size="10">
          <option data-icon-base="iconify" data-icon="openmoji:flag-united-kingdom">English</option>
          <!-- other languages-->
       </select>
    </div> 
    

    bit I'm getting empty space insted of desired flag.

    Any suggestions?

    opened by kalatchev 0
  • does not work for dynamic generated select

    does not work for dynamic generated select

    I am using this Library but the only problem that I have is that is does not work for new elements that is generated after window is loaded. In my form user can generate new select as much as they can, but when they choose an item is does not show as a selected item. could you pleas tell me how can I do this?

    Thank you.

    opened by uthmanrahimi 0
  • data-size attrib not working properly

    data-size attrib not working properly

    if i use data-size="5" while i have 10 options available it only shows 2 and all the other 8 needs to be scrolled to be viewed... i tried data-size from 1-9 and it keeps showing 2 items but when i set it to 10 which is the total of item options i have, well it shows all 10...

    Any ideas?

    using Bootstrap-select v1.12.13

    opened by ronjb04 0
  • Bootstrap 4.0.0 compatibility

    Bootstrap 4.0.0 compatibility

    Just letting you all know that this version of heimrichhannot/Boostrap-select is still compatible with the new version of Bootstrap 4.0.0!

    Would be also great if you could update your codebase files from bootstrap 4.0.0-alpha.6 to Bootstrap 4.0.0.

    Thanks.

    opened by krystyna93 0
  • Using iconBase Option still using default 'fa' value in Dropdown

    Using iconBase Option still using default 'fa' value in Dropdown

    When using the option:

    $('select').selectpicker({ iconBase: 'fab' });

    Here's the screen capture:

    http://take.ms/8YU8c

    In the dropdown, the iconBase is still using the default 'fa' but in the selected value it is using the override iconBase 'fab'. I am using FA5 by the way.

    Update: I just went through with FA5 documentation and apparently they changed their prefix "fa" to "fas" -for solid and "fab" for brands. So I guess, this issue is still needs to be addressed by adding support for FA5.

    question 
    opened by frogydiak 1
Owner
Heimrich & Hannot GmbH
Heimrich & Hannot GmbH
Lovefield is a relational database for web apps. Written in JavaScript, works cross-browser. Provides SQL-like APIs that are fast, safe, and easy to use.

Lovefield Lovefield is a relational database written in pure JavaScript. It provides SQL-like syntax and works cross-browser (currently supporting Chr

Google 6.8k Jan 3, 2023
Welcome to the LEGO Games Repository, where you can enjoy anytime, anywhere. This is the 2021 KNU Advanced Web Programming team project.

Welcome to LEGO git repository! Here are some useful information about LEGO service. 0. Docker image Link : https://hub.docker.com/r/leibniz21c/legoga

Heesung Yang 16 Jul 21, 2022
An example repository on how to start building graph applications on streaming data. Just clone and start building 💻 💪

Example Streaming App ?? ?? This repository serves as a point of reference when developing a streaming application with Memgraph and a message broker

Memgraph 40 Dec 20, 2022
This is a repository that contains an simple NestJS API about Movies developed at Blue EdTech.

NestJS Movies Technologies and requirements NestJS JavaScript TypeScript Prisma MySQL Project This is a repository that contains an simple NestJS API

Isabella Nunes 2 Sep 28, 2021
NestJS + MikroORM example repository for testing within transactional contexts. Achieve a much faster test suite.

Description Nest NestJS + MikroORM example repository for testing within transactional contexts. Running tests in transactions will speedup your test

Tolga Paksoy 5 Dec 20, 2022
Repository with various templates using nest ( express )

A progressive Node.js framework for building efficient and scalable server-side applications. Description Nest framework TypeScript starter repository

Douglas Ramirez 2 Nov 27, 2022
A handy-dandy JS shim to run OreUI files in your browser (to varying degrees of success.)

OreUIShim (C) Luminoso 2022 / MIT Licensed. Contributions Welcome! A small shim JS file to experiment with oreUI in the browser. How to use Prerequisi

null 12 Dec 8, 2022
Hacktoberfest is all about meeting up all brains. In this repository we are planning to come with many ideas and works. You all can share your ides/works here.

Hacktoberfest Submit your Work Hacktoberfest is all about meeting up all brains. In this repository we are planning to come with many ideas and works.

Chinmay Patil 3 Oct 5, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A good looking help command made with discord.js with select menus. Works with prefix and slash commands too!

fancy-help-command A good looking help command made with discord.js with select menus. Works with prefix and slash commands too! Dependencies: Select

LunarCodes 11 Dec 12, 2022
VanillaSelectBox - A dropdown menu with lots of features that takes a select tag and transforms it into a single or multi-select menu with 1 or 2 levels

vanillaSelectBox v1.0.0 vanillaSelectBox : v1.00 : Adding a package.json file New : Possibility to change the dropdown tree and change the remote sear

philippe MEYER 103 Dec 16, 2022
Multiple level dropdown works with Bootstrap 5, just like native support.

Bootstrap 5 Multiple Level Dropdown. For Bootstrap 4, please visit Bootstrap 4 Multiple Level Dropdown Using official HTML without adding extra CSS st

Dallas Lu 17 Dec 13, 2022
The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular

ngx-bootstrap The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular Links Documentation Release Notes Slack

Valor Software 5.4k Jan 8, 2023
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support.

bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with

SnapAppointments 9.7k Dec 30, 2022
The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support

bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with

SnapAppointments 9.7k Dec 30, 2022
Dropdown select box for bootstrap 5

dselect Dropdown select box for bootstrap 5 Demo Features Placeholder Multiple Search Creatable Clearable Sizing Validation Installation Install dsele

null 30 Dec 21, 2022