Make bootstrap-select responsive

css, html, jquery, twitter-bootstrap

Solution

simple solution: add class `form-control` to the select element

Problem

I have search control where i add textBox, select and button. ``` <div class="col-md-10"> <div class="row"> <div id="Search_Widget_tr3" class="input-group col-md-12"> <input type="text" class="form-control" placeholder="enter title" id="homeSearchInput"/> <div class="input-group-btn clearfix"> <select class="selectpicker" multiple title='Platforms' data-container="body" data-count-selected-text="Platforms" data-selected-text-format="count>0" data-style="btn btn-default" data-allOptionIsSelected="false"> <option value="All">All Platforms</option> <option value="Mobile Phone;Tablet;Windows Phone;PlayStation Certified Device;Windows 8 App;PlayStation Mobile">Mobile App/Tablet</option> <option value="Nintendo DS;Nintendo DSi;Nintendo 3DS">Nintendo DS/DSi/3DS</option> <option value="PlayStation 3">PlayStation 3</option> <option value="PlayStation 4">PlayStation 4</option> <option value="PSP;PS Vita">PlayStation Vita/PSP</option> <option value="Wii">Wii</option> <option value="Wii U">Wii U</option> <option value="Linux;Macintosh;PC DVD;PC DVD-ROM;Windows CE;Windows PC;Windows 8 App">Windows/Mac</option> <option value="Xbox 360">Xbox 360</option> <option value="Xbox One">Xbox One</option> <option value="3DO;Atari Jaguar;Atari Lynx;Cable Box;CDI;Dreamcast;DVD;Game Boy;Game Boy Advance;Game Boy Color;Game Gear;Game Wave(Custom DVD gaming platform);Game Cube;Gizmondo;Hyperscan;iPod;N-Gage;Neo Geo Pocket Color;Nintendo;Nintendo 64;Nintendo Game Boy;NUON;Online;Other;Palm Pilot;PDA(Palm, Win CE, etc.);PlayStation&2FPS one;PlayStation 2;Plug-and-Play;Pocket Arcade;Pocket PC;Pokemon Mini;Sega 32x;Sega CD;Sega Dreamcast;Sega Genesis;Sega Pico;Sega Pocket Arcade;Sega Saturn;Super Nintendo;VG Pocket;Virtual Boy;Web Browser;Web Site;Web TV;Xbox;Zodiac;Firefox">Other Platforms</option> </select> <button class="btn btn-default dropdown-toggle click-search" type="button" aria-expanded="false"> Search <span class="glyphicon glyphicon-search"></span> </button> </div><!-- /btn-group --> </div><!-- /input-group --> </div> </div> ``` Problem: I can't make the `<select>` responsive; it's width is fixed. When i want to wrap it in some container and set `col-md-5` to this wrapper then i lost rounded corners between input and select (I don't want to add some new styles only for make corners rounded) Here live example

Original source