twitter-bootstrap

How to make Bootstrap cards the same height in card-columns?

by

You can either put the classes on the “row” or the “column”? Won’t be visible on the cards (border) if you use it on the row. https://getbootstrap.com/docs/4.6/utilities/flex/#align-items <div class=”container”> <div class=”row”> <div class=”col-lg-4 d-flex align-items-stretch”> <!–CARD HERE–> </div> <div class=”col-lg-4 d-flex align-items-stretch”> <!–CARD HERE–> </div> <div class=”col-lg-4 d-flex align-items-stretch”> <!–CARD HERE–> </div> </div> </div> UPDATE … Read more

Bootstrap 3 – show collapsed navigation for all screen sizes

by

You can use override the default Bootstrap CSS like this… .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 { display: none!important; } .navbar-nav { float: none!important; margin: 7.5px -15px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; … Read more

Turning off Twitter Bootstrap Navbar Transition animation

by

Bootstrap accomplishes the transition animation of the responsive nav bar the same way it does any collapse, which is using a CSS3 transition. To turn off the transition for only the navbar (leaving any other transitions in place), you simply have to override the CSS. I’d suggest adding a class, such as no-transition (but the … Read more

Maintain image aspect ratio in carousel

by

The issue lays here, on bootstrap CSS: img { max-width: 100%; width: auto 9; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } Having set max-width: 100%; the image won’t be any larger than the viewport. You need to override that behavior on your CSS: .carousel img { position: absolute; top: 0; left: 0; min-width: … Read more

Twitter Bootstrap: Center Pills

by

This has gotten much simpler! You just need to use the text-center class on the container, and apply display:inline-block to the ul. Just make sure you have a line break or paragraph tag separating the nav from any other elements within the container. Done! 2 class additions, 1 line of CSS (don’t modify the bootstrap … Read more

Leaflet map not displayed properly inside tabbed panel

by

It’s a complete hack from messing with the leaflet.js source code, but it works (at least in jsFiddle) http://jsfiddle.net/C7Rp8/4/ The idea is from Google Maps, to “resize” or “redraw” the map when its container div is resized. The changes I made are: add id link3 to the small tab in HTML <a href=”#lC” data-toggle=”tab” id=”link3″>tab3</a> … Read more