Categories
Web Development

Here’s Why Your Bootstrap Collapsed Alert Jumps When Expanded

I’ve seen this Bootstrap issue countless times. A collapsed div is collapsed and expanded with Bootstrap Collapse. When it opens up, it appears to over-expand and then jump back up. It’s super annoying. Here’s what your code might look like: <div class=”collapse alert alert-info” id=”my-alert-box”>My hidden alert box with some text.</div> Here’s what you should […]

Categories
Web Development

Adding the Bootstrap “active” class to a WordPress Menu Item

Working with WordPress and Bootstrap, you might be frustrated with the built in menu options. There isn’t an easy way to tell WordPress to swap out the  current-menu-item class with bootstrap’s active class. Fortunately for you and me, there’s jQuery for that. Just a little dab will do ya. jQuery(document).ready(function () { $(“.current-menu-item”).addClass(“active”); }); This […]

Categories
Web Development

The Ugly Bootstrap File Input Type

Bootstrap has a way making a lot of HTML elements look good, right off the bat. But the day finally came when I had to face to inevitable: The . This is the red headed stepchild of Bootstrap (and browser makers). Browsers render this element differently from each other, making it nearly impossible to look good across the board.

Categories
Web Design Web Development

Create a SpeedBump with jQuery & the Bootstrap Modal

A speedbump is a essentially a confirmation dialogue when a website visitor clicks a link to leave your site. Speedbumps are actually required by law in some countries for industries such as Credit Unions and banks. There are several ways to create a speedbump, and I’m going to show you just one way. You can […]

Categories
Web Design Web Development

WordPress Pagination With Bootstrap

I love Bootstrap. I also love WordPress. One issue I came across in my WordPress theme development using Bootstrap was the pagination styling. It wasn’t complete, and some edits needed to be made in order for it to look right.