Im using chosen.js v1.0 and am using it in my project with Bootstrap 3 but the styles of my select boxes are not conforming to bootstrap 3 styles at all.
Am I doing anything wrong? I simply invoked the select boxes using
$('#select-input').chosen(); right?
Actually, there is someone who created a Bootstrap 3.0 CSS theme for Chosen.
Some screens:
Edit
I've created a Fiddle using the same HTML as the official Chosen documentation page with the Bootstrap theme applied. (added form-control to all selects and removed style="width:350px;")
And also, I'll be maintaining the theme in this gist: https://gist.github.com/koenpunt/6424137
An alternate stylesheet for Chosen 1.0. This one is supposed to integrate better with Bootstrap 3.0.
Available here http://alxlit.github.io/bootstrap-chosen/
There is also another alternate theme supports Bootstrap 3 here https://github.com/dbtek/chosen-bootstrap.
Looks like native bs inputs.
Chosen.js (chosen.css) and the bootstrap css both add CSS styles to your inputs (selects). Try to load chose.css after bootstrap.css:
<link rel="stylesheet" href="bootstrap3/bootstrap-3.0.0-wip/dist/css/bootstrap.css"> <link rel="stylesheet" href="docsupport/style.css"> <link rel="stylesheet" href="docsupport/prism.css"> <link rel="stylesheet" href="chosen.css"> <style type="text/css" media="all"> /* fix rtl for demo */ .chosen-rtl .chosen-drop { left: -9000px; } </style> After doing this see: Right border of the AddThis counter missing with Twitter's Bootstrap 3. It seems the CSS's universal selector to set box-sizing to border-box caused most of the trouble.
To fix this reset the box-sizing of the elements you apply chosen() on:
In the case of $('#select-input').chosen(); you will also set:
#select-input { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } NB by default chosen.js bundles an old version of jQuery. Twitter Bootstrap (javascript) requires the newest version (<2) of jQuery
If you want to change the select box sizes to be responsive you can use:
[class*="col-"] .chosen-container { width:98%!important; } [class*="col-"] .chosen-container .chosen-search input[type="text"] { padding:2px 4%!important; width:90%!important; margin:5px 2%; } [class*="col-"] .chosen-container .chosen-drop { width: 100%!important; } 