Bootstrap3

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

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