Dev Stack Source

Answer : Sure, a div can have as many classes as you want (this is both regarding to bootstrap and HTML in general): <div class="active dropdown-toggle"></div> Just separate the classes by space. Also: Keep in mind some bootstrap classes are supposed to be used for the same stuff but in different cases (for example alignment classes, you might want something aligned left, right or center, but it has to be only one of them) and you shouldn't use them together, or you'd get an unexpected result, basically what will happen is that the class with the highest specificity will be the one applied (or if they have the same then it'll be the one that's defined last on the CSS). So you better avoid doing stuff like this: <p class="text-center text-left">Some text</p> Absolutely, divs can have more than one class and with some Bootstrap components you'll often need to have multiple classes for them to function as you w...

Answer : Assuming you want a default button checked. <div class="row"> <h1>Radio Group #2</h1> <label for="year" class="control-label input-group">Year</label> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="year" value="2011">2011 </label> <label class="btn btn-default"> <input type="radio" name="year" value="2012">2012 </label> <label class="btn btn-default active"> <input type="radio" name="year" value="2013" checked="">2013 </label> </div> </div> Add the active class to the button ( label tag) you want defaulted and checked="" to ...

Answer : You have a typo. Instead of: $('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>'); You need: $('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>'); Here is a JSFiddle demo: http://jsfiddle.net/xbr5agqt/ The "Add and select 'Soy Sauce' option" button does the following: $("#myselect").append('<option value="'+newitemnum+'">'+newitemdesc+'</option>'); $("#myselect").val(4); $("#myselect").selectpicker("refresh"); One slightly faster approach (used by the "Add and select 'Relish' option" button) is to append the new <option> element with the selected attribute already applied: $("#myselect").append('<option value="'+newitemnum+'" selected=...

Answer : This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3 and Bootstrap 4... The Bootstrap 3 "height problem" occurs because the columns use float:left . When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights , the correct behavior is to stack them to the closest side. Note : The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row . For readers that don't understand why there would ever be more than 12 cols in a row , or think the solution is to "use separate rows" should read this first There are a few ways to fix this.. (updated for 2018) 1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number...

Answer : Yes just "selected disabled" in the option. <select> <option value="" selected disabled>Please select</option> <option value="">A</option> <option value="">B</option> <option value="">C</option> </select> Link to fiddle You can also view the answer at https://stackoverflow.com/a/5859221/1225125 Use hidden: <select> <option hidden >Display but don't show in list</option> <option> text 1 </option> <option> text 2 </option> <option> text 3 </option> </select> dropdown or select doesn't have a placeholder because HTML doesn't support it but it's possible to create same effect so it looks the same as other inputs placeholder $('select').change(function() { if ($(this).children('option:first-child').is(':selected')) ...

Answer : I hope I'm not too late to post this for future programmers looking for answers. There's a question like this one. Go to this link: How do you change the width and height of Twitter Bootstrap's tooltips? One of the answers there is very useful. It was answered by @knobli. I don't know how to link the answer but I hope you can go to that page and vote it up. Anyway, I'll just copy it right here. For CSS: .tooltip-inner { max-width: 100% !important; } For HTML: <a href="#" data-toggle="tooltip" data-placement="right" data-container="body" title="" data-original-title="Insert Title">Insert Title</a> Just add data-container="body" and you're ready to go.

Answer : This is because the LESS files are not available in the CDN. Maybe other browsers manage to hide this error ? Here is the result in chrome for instance : Be sure to only use the CSS and JS files from bootstrap or host the less versions yourself. :)

Answer : You can use a button tag instead of input <button type="submit" class="btn btn-primary"> <i class="icon-user icon-white"></i> Sign in </button> I think you can use label tags for this purpose. Here is a sample of the twitter bootstrap HTML navbar: <form class="navbar-search"> <input type="text" class="search-query" placeholder="Search here" /> <label for="mySubmit" class="btn"><i class="icon-search icon-white"></i> Search me</label> <input id="mySubmit" type="submit" value="Go" class="hidden" /> </form> Basically you get a label element for the input (type=submit) and then you hide the actual input submit. Users can click on the label element and still get through with the form submission. I think you should try this FontAwesome designe...

Answer : for total compatibility with twitter bootstrap 3, I need to override some plugins methods: // override jquery validate plugin defaults $.validator.setDefaults({ highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); }, errorElement: 'span', errorClass: 'help-block', errorPlacement: function(error, element) { if(element.parent('.input-group').length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } } }); See Example: http://jsfiddle.net/mapb_1990/hTPY7/7/ For full compatibility with Bootstrap 3 I added support for input-group , radio and checkbox , that was missing in the other solutions. Update 10/20/2017 : Inspected suggestions of the other answers and added ad...

Answer : Please re-read the docs on this feature. The table-responsive class needs to be on a wrapper div, not the table itself. <div class="table-responsive"> <table class="table"> ... </table> </div>

Answer : I'm not sure that you can apply ng-class to tabs like that. After trying and failing I decided to look at the bootstrap-ui source for tabs and made an interesting discovery related to the tab heading attribute. Apparently you can put html in the heading section if you place the tab-heading as a child to a tab element. Check out the tabheading directive in here. This is the example they show: <tabset> <tab> <tab-heading><b>HTML</b> in my titles?!</tab-heading> And some content, too! </tab> <tab> <tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading> That's right. </tab> </tabset> In your case I think you might be able to do something like this to get the same effect: <tab ng-repeat="tab in tabs" active="tab.active"> <tab-heading>{{tab.title}} <span ng-show="tab.new">new<...

Answer : Add the following CSS style after loading Bootstrap: .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th { background-color: red; // Choose your own color here } .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { background-color: red; } change this line in bootstrap.css or you could use (odd) or (even) instead of (2n+1) If you are using Bootstrap 3, you can use Florin's method, or use a custom CSS file. If you use Bootstrap less source instead of processed css files, you can directly change it in bootstrap/less/variables.less . Find something like: //** Background color used for `.table-striped`. @table-bg-accent: #f9f9f9;

Answer : Without Bootstrap: We'll get to Bootstrap in a second, but here's the fundamental CSS concepts in play in order to do this yourself. As beard of prey points out, you can do this with CSS by absolutely positioning the icon inside of the input element. Then add padding to either side so the text doesn't overlap with the icon. So for the following HTML: <div class=" inner-addon left-addon "> <i class="glyphicon glyphicon-user"></i> <input type="text" class="form-control" /> </div> You can use the following CSS to left and right align glyphs: /* enable absolute positioning */ .inner-addon { position: relative; } /* style icon */ .inner-addon .glyphicon { position: absolute; padding: 10px; pointer-events: none; } /* align icon */ .left-addon .glyphicon { left: 0px;} .right-addon .glyphicon { right: 0px;} /* add padding */ .left-addon input { padding-left: 30p...

Answer : Do a row div. Like this: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <div class="grid"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-success">Under me should be a DIV</div> <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12 bg-danger">Under me should be a DIV</div> </div> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 bg-warning">I am the last DIV</div> </div> </div> If your your list is dynamically generated with unknown number and your target is to always have last div in a new line set last div class to "col-xl-12" and remove ...

Answer : In the top of the bootstrap.css you should have comments like the below: /*! * Bootstrap v2.3.1 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. */ If they are not there, then they have probably been deleted. VERSIONS: You can review version history here. Backward compatibility shouldn't be broken if the source is v2.0.0 (Jan 2012) and above. If it is prior to v2.0.0 there are details on upgrading here. You can also check the bootstrap version via the javascript console in the browser: $.fn.tooltip.Constructor.VERSION // => "3.3.7" Credit: https://stackoverflow.com/a/43233731/1608226 Posting this here because I always come across this question when I forget to include JavaScript in the search and wind up on this question instead of the one above. If this helps you, be sure to upvote that a...

Answer : It's okay to exceed 12 column units in a row. It causes the columns to wrap, but you can override the wrapping with flexbox. Bootstrap 4 uses flexbox, and the utility classes to get a horizontal scrolling layout.. <div class="container-fluid"> <div class="row flex-row flex-nowrap"> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> </div> </div> ...

Answer : the solution what I found to work in my case $('#multiselect1').multiselect({ selectAllValue: 'multiselect-all', enableCaseInsensitiveFiltering: true, enableFiltering: true, maxHeight: '300', buttonWidth: '235', onChange: function(element, checked) { var brands = $('#multiselect1 option:selected'); var selected = []; $(brands).each(function(index, brand){ selected.push([$(this).val()]); }); console.log(selected); } }); Shorter version: $('#multiselect1').multiselect({ ... onChange: function() { console.log($('#multiselect1').val()); } }); more efficient, due to less DOM lookups: $('#multiselect1').multiselect({ // ... onChange: function() { var selected = this.$select.val(); // ... } });

Answer : You need to use the various Bootstrap 4 centering methods... Use text-center for inline elements. Use justify-content-center for flexbox elements (ie; form-inline ) https://codeply.com/go/Am5LvvjTxC Also, to offset the column, the col-sm-* must be contained within a .row , and the .row must be in a container... <section id="cover"> <div id="cover-caption"> <div id="container" class="container"> <div class="row"> <div class="col-sm-10 offset-sm-1 text-center"> <h1 class="display-3">Welcome to Bootstrap 4</h1> <div class="info-form"> <form action="" class="form-inline justify-content-center"> <div class="form-group"> <label class=...

Answer : To get a search functionality you must set the data-tokens attribute for each options. Here is your code after adding it. Let me know if you need additional help. $(function() { $('.selectpicker').selectpicker(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-xs-12...

Answer : I just figured it out. For anyone who needs this in the future. I added a css override that was: .navbar.transparent.navbar-inverse .navbar-inner { background: rgba(0,0,0,0.4); } And my html syntax looks like: <div class="navbar transparent navbar-inverse navbar-fixed-top"> <nav class="navbar-inner"> ... </div> </div> You can even use like this .navbar-default { background: none; } or .navbar { background: none; } You'll get transparent background. For a transparent navbar, it's pretty easy. In the CSS document you can do one of three things. A. The easy way, but you don't learn too much with this method. You can literally type in the CSS document that the background of the navbar is transparent. Pretty simple: .navbar { background-color: transparent; } B. You can indirectly set the alpha channel for the RGBA background color to something in between 0 and 1. The R, G, and B...