Starting with the example code for a carousel with indicators we add another button to the beginning of .carousel-indicators.
<button type="button" class="btn btn-sm" id="carouselExamplePause" aria-label="Pause">⏸︎</button>Then we add JavaScript to make it functional.
Continue readingHow to turn on/off Bootstrap’s collapse function based on window.innerWidth
function toggleCollapsibility(container) {
// Default to disabled
let find = 'collapse', replace = 'collapse-disabled'
// We only want collapse on smaller devices
if (window.innerWidth < 992) {
// Flip to enabled
[find, replace] = [replace, find]
}
document.querySelectorAll(`${container} [data-bs-toggle="${find}"]`).forEach((element) => {
element.dataset.bsToggle = replace
})
}
While converting a Bootstrap 3 template design for use with Bootstrap 4, I noticed they removed stateful buttons (eg: “loading” and “reset” button states) from BS4! Granted it was mentioned in BS3, but I never noticed the deprecated warning 🙁
The deprecated code for showing a button’s loading state was $('#selector').button('loading') and to return the button to its original state you would use $('#selector').button('reset') .
I was adding mouse wheel events to a ul element with the CSS rule overflow:hidden to emulate mouse wheel scrolling when no scrollbar was present.
The links in the unordered list also trigger a Bootstrap 4.1 Modal that contains a Bootstrap Carousel. So I decided to add the same functionality to my modal carousel gallery.
Continue reading
Do you have a password field that the user wants to be able to view at the click of a button? Here is the solution I came up with to handle that need…
The field…
<div class="input-group">
<input type="password" name="password" value="P@$$w0rD" placeholder="Password" id="input-password" class="form-control" required>
<span id="view-password" class="input-group-addon"><i class="fa fa-eye" aria-hidden="true"></i></span>
</div>
The javascript… Continue reading