twitter-bootstrap-3

Bootstrap dropdown sub menu missing

by

Bootstrap 5 (update 2021) Add some JavaScript to prevent the submenu from closing when the parent dropdown is open. This can be done be toggle display:block… let dropdowns = document.querySelectorAll(‘.dropdown-toggle’) dropdowns.forEach((dd)=>{ dd.addEventListener(‘click’, function (e) { var el = this.nextElementSibling el.style.display = el.style.display===’block’?’none’:’block’ }) }) Bootstrap 5 Multi-level Dropdown – click Bootstrap 5 Multi-level Dropdown – … Read more

Multiple modals overlay

by

Solution inspired by the answers of @YermoLamers & @Ketwaroo. Backdrop z-index fix This solution uses a setTimeout because the .modal-backdrop isn’t created when the event show.bs.modal is triggered. $(document).on(‘show.bs.modal’, ‘.modal’, function() { const zIndex = 1040 + 10 * $(‘.modal:visible’).length; $(this).css(‘z-index’, zIndex); setTimeout(() => $(‘.modal-backdrop’).not(‘.modal-stack’).css(‘z-index’, zIndex – 1).addClass(‘modal-stack’)); }); This works for every .modal created … Read more

Five equal columns in twitter bootstrap

by

For Bootstrap 4 Bootstrap 4 now uses flexbox by default, so you get access to its magical powers straight out of the box. Check out the auto layout columns that dynamically adjust width depending on how many columns are nested. Here’s an example: <div class=”row”> <div class=”col”> 1 of 5 </div> <div class=”col”> 2 of … Read more

IE8 issue with Twitter Bootstrap 3

by

You got your CSS from CDN (bootstrapcdn.com) respond.js only works for local files. So try your website on IE8 with a local copy of bootstrap.css. Or read: CDN/X-Domain Setup Note See also: https://github.com/scottjehl/Respond/pull/206 Update: Please read: http://getbootstrap.com/getting-started/#support In addition, Internet Explorer 8 requires the use of respond.js to enable media query support. See also: https://github.com/scottjehl/Respond … Read more

What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

by

Updated 2020… Bootstrap 5 In Bootstrap 5 (alpha) there is a new -xxl- size: col-* – 0 (xs) col-sm-* – 576px col-md-* – 768px col-lg-* – 992px col-xl-* – 1200px col-xxl-* – 1400px Bootstrap 5 Grid Demo Bootstrap 4 In Bootstrap 4 there is a new -xl- size, see this demo. Also the -xs- infix … Read more

Bootstrap 3 Navbar Collapse

by

I had the same problem today. Bootstrap 4 It’s a native functionality: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors You have to use .navbar-expand{-sm|-md|-lg|-xl} classes: <nav class=”navbar navbar-expand-md navbar-light bg-light”> Bootstrap 3 @media (max-width: 991px) { .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-collapse.collapse { … Read more

Bootstrap carousel multiple frames at once

by

Bootstrap 5 (Update 2021) While the carousel is mostly the same in Bootstrap 5, the concept of left and right have changed to start and end since Bootstrap now has RTL support. Therefore the left/right classes have changed. Here’s an example of the multi-item CSS for 4 items (25% width columns)… @media (min-width: 768px) { … Read more