Unable to override $theme-color in bootstrap

Update 2021 for Bootstrap 5 Per the guidance in the docs… “Variable overrides must come after our functions are imported, but before the rest of the imports.” Therefore, overriding the theme-colors in Bootstrap 5 works the same way as 4.x. In order to override the theme-colors, simply change appropriate theme color variable before importing bootstrap.scss … Read more

Bootstrap 4 responsive navbar vertical

For Bootstrap 4, the breakpoints have changed. You should override the navbar CSS like this if you want it to be vertical on small screens: @media(max-width: 544px) { .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem; } .navbar .navbar-nav { float:none !important; } .navbar .collapse.in, .navbar .collapsing { clear:both; } } Demo http://codeply.com/go/Ar1H2G4JVH Note: The @media … Read more

keep the current tab active with twitter bootstrap after a page reload?

As Tommi Komulainen wrote: e.target contains the full url including the hash. You only need the hash. So use e.target.toString().split(‘#’)[1]); or even better $(this).attr(‘href’) $(‘#’+lastTab).tab(‘show’); applies the .tab() on the div with id = #{lastTab} while you need to apply on the link (a tag) with data-toggle. So use: $(‘a[href=#”https://stackoverflow.com/questions/16808205/+ lastTab +”]’).tab(‘show’); here. The complete … Read more

Fluid input-append in Bootstrap Responsive

Since your input is a .span10, the button should be a .span2. <div class=”input-append”> <input class=”span10″ id=”msisdn” size=”” type=”text” name=”msisdn”><button class=”btn btn-primary span2″ type=”submit”><i class=”icon-plus icon-white”></i></button> </div> But the behavior of the button radically changes. You can fix it with this css : .input-append .btn { float: none!important; margin-left: 0!important; } And to be even … Read more

What is the difference between Bootstrap data-toggle vs data-bs-toggle attributes?

This comes fro PR 31827 and commit 418f17e (Nov. 2020, bootstrap v5.0.0-beta1) It fixes issue 29479 “Add a namespace for data-* attribute?” As explained in “What’s New in Bootstrap 5 / Change in data attributes” from Shahed Nasser: Bootstrap 5 has changed the naming of the data attributes that are generally used by its components … Read more

How can I change the speed of the fade for alert messages in Twitter Bootstrap?

Dan Herman, If you’re not using less and you feel like editing the bootstrap.css you may try and edit this one and not to mess around with the .js file. Edit .fade { opacity: 0; -webkit-transition: opacity 0.25s linear; -moz-transition: opacity 0.25s linear; -ms-transition: opacity 0.25s linear; -o-transition: opacity 0.25s linear; transition: opacity 0.25s linear; … Read more

Disable Bootstrap 3 navbar going 2 rows in medium viewport size

For what it is worth, here is an idea that makes the navbar items morph from text to an icon based on the current responsive size. <li><a href=”#contact”><div class=”hidden-sm”>Contact<b class=”caret”></b></div><span class=”glyphicon glyphicon-plus visible-sm”></span></a></li> The result is the ‘Contact’ text converts into a plus icon at small size. Here’s a bootply example