twitter-bootstrap-3 – Make Me Engineer

Bootstrap 3 – How to maximize input width inside navbar

For Bootstrap version 3.2 and up you should also set the display:table; for the input-group and set the width to 1% for the input-group-addon. <div style=”display:table;” class=”input-group”> <span style=”width: 1%;” class=”input-group-addon”><span class=”glyphicon glyphicon-search”></span></span> <input type=”text” autofocus=”autofocus” autocomplete=”off” placeholder=”Search Here” name=”search” style=”” class=”form-control”> </div> Demo Bootstrap version 3.2+: http://www.bootply.com/t7O3HSGlbc — If you allow changing the position … Read more

Custom CSS being overridden by Bootstrap CSS

Specificity Your issue is most likely regarding specificity. Chris Coyier has a great article on CSS specificity. I would also suggest you check out this handy specificity calculator. Using that calculator, we can see that .table-striped > tbody > tr:nth-child(odd) > td has a specificity of 23. As such, to override that, any new rule … Read more

Typeahead problems with Bootstrap 3.0 RC1

update 14 feb 2014 As mentioned by laurent-wartel try https://github.com/hyspace/typeahead.js-bootstrap3.less or https://github.com/bassjobsen/typeahead.js-bootstrap-css for additional CSS to use typeahead.js with Bootstrap 3.1.0. Or use use the “old” (TB 2) plugin with the new Bloodhound suggestion engine: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26 Twitter’s typeahead doesn’t seem ready for Twitter’s Bootstrap 3. To use Twitter’s typeahead with Twitter’s Bootstrap you will need … Read more

bootstrap 3 – how do I place the brand in the center of the navbar?

css: .navbar-header { float: left; padding: 15px; text-align: center; width: 100%; } .navbar-brand {float:none;} html: <nav class=”navbar navbar-default” role=”navigation”> <div class=”navbar-header”> <a class=”navbar-brand” href=”#”>Brand</a> </div> </nav>

Bootstrap’s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3

Currently Bootstrap 3.x does not support jQuery 3.x as reported here: https://github.com/twbs/bootstrap/issues/16834 The issue is caused by: jQuery 3 is more strict than jQuery 2. It’s like XHTML and HTML. Backward compatibility is preserved and code doesn’t look like a mess. If I’m not mistaken, all you need to do is replace show() and hide() … Read more

Bootstrap 3 Gutter Size

try: .row { margin-left: 0; margin-right: 0; } Every column have a padding of 15 px on both sides. Which makes a gutter between of 30 px. In the case of the sm-grid your container class will 970px (((940px + @grid-gutter-width))). Every column get a width of 940/12. The resulting @grid-gutter-width/2 on both sides of … Read more

Same height column bootstrap 3 row responsive

You can achieve this by using javascript. Find out the biggest height of the 4 divs and make all of them at the same height like the biggest one. Here is the code: $( document ).ready(function() { var heights = $(“.well”).map(function() { return $(this).height(); }).get(); maxHeight = Math.max.apply(null, heights); $(“.well”).height(maxHeight); }); edit history: changed the … Read more

How to use vertical align in bootstrap

.parent { display: table; table-layout: fixed; } .child { display:table-cell; vertical-align:middle; text-align:center; } table-layout: fixed prevents breaking the functionality of the col-* classes.

How to open Bootstrap dropdown programmatically

The best way is to check if the dropdown is not already open, and then to use .dropdown(‘toggle’). Couple things to be aware of: If you want to trigger it by clicking on another element, you must kill the click event on the other element– otherwise Bootstrap will treat it as a click outside of … Read more

Use Bootstrap 3 dropdown menu as context menu

I just wanted to improve on letiagoalves great answer with a couple more suggestions. Here’s a walkthrough on how to add a context menu to any html element. Let’s start off with a working demo in jsFiddle Markup: First, let’s add a menu from the bootstrap dropdown control. Add it anywhere to your HTML, preferably … Read more

+ More