Bootstrap Css

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

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