Breaking Bootstrap and the Importance of Version Control

Aug. 30, 2017, 3:45 p.m.

My last update to this site changed the header into a nav bar and I was pretty excited about that. But it looked awful on a mobile browser.

Bootstrap offers a collapsible nav bar that will toggle to a bar icon that is a drop down for all the nav links when the window size shrinks. It's really common in phone apps and mobile accessible websites. They even have sample code in their documentation. Seems pretty simple, right? But not really.

First, Bootstrap has some built in colors and other visual details that override my theme color even though my css is listed after the bootstrap CDN link. Second, the bars icon was showing up when the page is full width, it's supposed to only show up when the page gets narrow enough to warrant the toggle. WTF?!?

I refactored my css and nav bar html over and over again trying to figure out. I read most of Bootstrap's documentation, carefully reworded my stack overflow searches, crawled all over Mozilla's Developers CSS pages, I even went back through the DjangoGirls Tutorial. All great resources by the way.

I was super frustrated. I went to bed to try again in the morning.

The next day, I finally notice that Bootstrap's site has a little banner across the top. It says "Bootstrap 4 Beta is here!" and I'm like, I want that! That's when I realized that I've been using an old version of Bootstrap, via the CDN I copied into the head of my site when I first followed the DjangoGirls tutorial more than a year ago. The toggling nav bar code I was trying to use is for a more recent version. So I updated the CDN in my page, and tada!

Now I have a super awesome toggling nav bar, just like almost all the other websites you view on your phone. :)


leave a comment

No comments yet :(