Bootstrap 3

Mimicking Bootstrap Documentation Sidebar by Eric on February 1, 2020

If you've spent any time looking at the Bootstrap docs you'll notice their nav bar on the right.  Very slick example of both Scrollspy and Affix.  I have written blog posts about both of these topics in conjunction with each other titled Bootstrap ScrollSpy Pitfalls and Fixes.  In my example I use a very simple styling for my nav using nav-pills.  This works out alright but what if we want to get exactly what Bootstrap is doing?  Well, let's figure out just how they do it. They are using very similar code to what I had in the pitfalls and tricks post so I'll bring that in here.<div id="side-nav" class="col-sm-2 hidden-xs hidden-sm hidden-print affix"> <ul class="nav"> <li><a href="#info">Info</a></li> <li><a href="#properties">Company Properties</a></li> <li><a href="#genome">Buyers/Suppliers</a></li> <li><a href="#blog">Recent Blog</a></li> <li><a href="#tests">Total Tests</a></li> <li><a href="#company-bio">Company Bio</a></li> ...

Bootstrap 3 Change Notes by Eric on February 1, 2020

![](/img/blurred-code-300x156.png) After spending the last two days working with Bootstrap 3 I wanted to jot down a few of the things I found in case I forget them tomorrow or to help anyone else running into similar issues.Forms, Grid System, and Screen Resolutions We have converted our forms from form-horizontal to the default Bootstrap form.  We think it looks better with the new update. Old code:<div class="control-group span4"> <label class="control-label"> {{ form.email.label_tag }} </label> <div class="controls"> {{ form.email }} </div> </div> New code:<div class="form-group col-4"> {{ form.email.label_tag }} {{ form.email }} </div> Cleaned up a bit as we had that extra label tag on our old code which was unnecessary as Django adds the label tag correctly on render.  One of the biggest thing to notice is that the span4 tag changed to col-4.  Bootstrap is now responsive by design and mobile first which means that the col- tags are me...

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...

Twitter Typeahead.js by Eric on February 1, 2020

![](/img/typeaheadjs-300x102.png)New Version - Twitter Typehead.js v0.10 Bootstrap dropped support for their bootstrap-typeahead.js and suggested we all use Twitter's Typeahead.js.  This was a pretty big change for us and we encountered a bit of a learning curve because the documentation wasn't exactly what we had hoped it would be.  Typeahead.js is incredible and can do some amazing things though and we are happy to be using it. The first issue is that right out of the box it will not work with Bootstrap 3.  Support is still being looked at but in the mean time there are some fixes.  Here is a thread about the issue on their GitHub page with some helpful people posting solutions for the interim.  Below is the code we are using for ours which I'm sure will change in the coming days.//Twitter Typeahead CSS //Updated 22 August 2013 .twitter-typeahead { width: 100%; position: relative; } .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint { margin-bottom: 0; wid...

How to Make Bootstrap Modals by Eric on February 1, 2020

One of the most commonly used features of Bootstrap is their Modal component.  If you don't know what a modal is it is like a pop up except it can contain HTML.  This means you can put any sort of information you'd like in it, a common example is a modal that contains a login form.  This post will show you how to create your own modals and even load in the content dynamically using AJAX.Modal Basics Let's start with the most basic modal that contains static content.  You'll need two things.  The first is a button or link to trigger the modal.  Secondly, you'll need to put the modal div somewhere on your page.  Below is some example code with the button and the modal div.<!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div clas...

Bootstrap 3 Released by Eric on February 1, 2020

Just a quick note for everyone, Bootstrap has officially released version 3.0.0 as of Monday.  If you have been following along with the blog so far you'll already be familiar with the major changes to Bootstrap.  This final release fixes a lot of those bugs that I've brought up here.  It is now stable and ready for production.  The biggest complaint I've seen from people is the move to the flat theme by default where the 2.3.2 version was polished and looked nice.  The good news is that Bootstrap allows you to use the new version with the old look, problem solved!  We are going to continue with the flat look because we like it but it's totally up to you how you use Bootstrap.  Full release notes here.  Good luck!

Bootstrap Tabs with Dynamic Content Loading by Eric on February 1, 2020

Bootstrap comes with a lot of different JavaScript tools to make your website more user friendly.  Today I'm going to cover Tabs and then give a more advanced example for making your tabs have dynamic content using AJAX.  We all know what tabs look like and in a website they can be very useful to group similar content without having to create a new page for each chunk of data.  Below is an example of the basic Bootstrap tabs.<ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li class=""><a href="#profile" data-toggle="tab">Profile</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li> <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li> </ul> </li> </ul> <div...

Take Advantage of the Bootstrap Grid by Eric on February 1, 2020

One of the biggest features of Bootstrap is their responsive grid.  It helps developers and designers easily space out content on a page without having to worry about margins and screen sizes.  I've done some posts in the past talking about the best way to use the various screen size related tags.  Today I wanted to focus on taking all of that to the next level.  The grid system works at every level as far down as you want to go.  Below is a catalog I created which quickly informs of a moisture test.  There is a lot of information to display and doing so in a clean format is hard.  Using Bootstrap's grid system at every step has helped to create what you see below. ![](/img/catalog-1024x362.png) This is the final result that we will be breaking down.  You can see that there is a test number on the left without anything underneath it, a larger section with text followed by smaller sections and even a table.  Let's break down every layer and div. ![](/img/catalog-outer-row-1024x362...

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...

Bootstrap 3 RC1 by Eric on February 1, 2020

Creating our new site required a better base.  We chose to use the popular Bootstrap CSS engine to unify our CSS and help us get things started quickly.  After using Bootstrap 2.3.2 for nearly three months Bootstrap 3 was released.  We had hoped that the update would not affect our code base but we were wrong.  Nearly everything has changed in our styling.  Bootstrap 3 has gone for a mobile-first approach making even the basic framework responsive.  This is great for most developers, and even for us, because we can make wonderful sites that look and feel great on all platforms.  Our company had talked about wanting mobile versions of applications but we had put that on the back burner as many of our applications involve data entry.  Converting our project to use Bootstrap 3 has been a headache due to changes to simple classes that were used before but we are moving forward and should have things squared away by tomorrow.  The site looks cleaner, runs faster, and works on mobile alre...

Custom Column Widths in Bootstrap Tables by Eric on February 1, 2020

One of the biggest things I've run into with Bootstrap are their tables which are dynamic and grow and shrink depending on content size.  For the most part this is completely desired.  Every now and then you want a bit more control over your table column widths.  This is a very simple trick that I wanted to document for those who have run into the problem of wanting more control than Bootstrap gives initially. Say you've created your table as shown below.<table class="table table-condensed table-striped"> <thead> <tr> <th>Number</th> <th>Standard</th> <th>Category</th> <th>Labs</th> <th>Description</th> <th>Min. Sample Size</th> </tr> </thead> <tbody> {% for test in tests %} <tr> <td>{{ test.number }}</td> <td>{{ test.name }}</td> <td>{{ test.category }}</td> <td>{{ test.labs }}</td> ...