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 do:

<div class="collapse" id="my-alert-box">
    <div class="alert alert-info">My hidden alert box with some text.</div>
</div>

The collapsed div can’t have padding applied to it. By moving the alert inside of the collapsed div, we solve the problem.

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 little blessed bit of jQuery will add the active class to your menu on the fly.

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 <input type=”file”>. 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.

Our final result should look something like this!
Our final result should look something like this!

Continue reading The Ugly Bootstrap File Input Type

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 borrow or adapt any part of these methods for your own site. Continue reading Create a SpeedBump with jQuery & the Bootstrap Modal

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. Continue reading WordPress Pagination With Bootstrap