Html

Bootstrap RC2 - Another Update, More Changes by Eric on February 1, 2020

As Bootstrap nears releasing their final version of Bootstrap 3 they will continue to roll out Release Candidates for bug fixing and testing.  We have elected to keep as up to date with them as we can under the assumption that release candidates are fairly stable and shouldn't change too much between now and release.  Tuesday they released their next release candidate, RC2.  You can read about the full changes at their blog but I'm going to highlight a few of the main things that changed for us.Default Col is Gone In RC1 we were using col- to be the default size for all devices.  RC2 has removed this default class.  Instead they have added a new -xs size for really small phones and a -md, though I think this was in RC1 we just never used it.  The best way to do a default size for most devices is now to use to col-sm-.  Use the small version because it works for devices with a screen resolution  of ≥768px.  This is what most modern devices are using.  Anything lower than that will de...

Clearing Float Elements by Eric on February 1, 2020

As you develop web pages you may come across moments when you need to float an element.  Using the CSS float you can make elements be pushed around to make room as more elements are added.    A nifty feature in and of itself but there is a common problem that tends to crop up. Recently I was working on a small navigation header that included two buttons and a search box.  The buttons were standard button elements and the search box had been floated to move with the varying size of the screen.  The problem that happened came when you made the screen too small and the floated box dropped to the next line.  Directly beneath this row of elements was a header row that had a background and when the search box dropped down it would be hidden by this header instead of pushing the header down as would be expected. After doing some research into float elements I came across this question on StackOverflow asking What is the best way to clear the CSS style "float"?  In it the top answer expla...

Django Messages Framework and Custom Tags by Eric on February 1, 2020

![null](/img/screenshot-from-2013-08-22-090436-300x144.png) Sometimes it's necessary to display a message to the user in a quiet and clean manner.  To do this, Django has given us the messages framework for cookie- and session-based messaging.  After a form or other input is submitted we can quickly send a short message to the user without much effort at all.  Here are all the documents related to the framework but I'm going to give you the quick version as well as some customization options and Bootstrap fixes. The messaging framework is enabled by default when you create a new Django project so good job you're half way there!  Now just add this bit of code to the top of any page you want messages to appear:{% if messages %} <ul> {% for message in messages %} <li{% if message.tags %}{% endif %}>{{ message }}</li> {% endfor %} </ul> {% endif %} We have this in our base that is inherited by every page to allow the functionality to appear on the entire site.  You need t...

Bootstrap ScrollSpy Pitfalls and Fixes by Eric on February 1, 2020

![](/img/menu-title-300x221.png) Designing our new internal marketing tools has been a pet project of mine for a couple of weeks now.  I spend a little time here and there adding information and tools for our employees to better understand our relationship with our clients.  I'm displaying basic contact information, some information on the kind of business we do with them, a log of notes we take, past business, and company information.  All of that equates to a rather long page of information.  All of the information is relevant and displayed in an attractive compact manner the problem is it is just so much information that it can be overwhelming.  I showed it to a coworker and he wanted tabs to flip between the various bits of information because he found it overwhelming.  I didn't want to go to tabs because of the increased difficulty that would be added when they wanted to print off the marketing information and I didn't feel that tabs were the right way to go here.  With that i...