Setup & Dependencies

Getting Bootstrap 3 onto a page correctly comes down to three things: the CSS link, the correct script order, and a viewport meta tag. Miss any one of them and the framework either won't scale on mobile or its JS plugins simply won't fire. We'll set up the TrailMap project skeleton using the same CDN approach this whole site uses.

Loading Bootstrap 3 via CDN

The CSS goes in <head>. The scripts go right before the closing </body> tag (or in <head> if you need them earlier, as this site does) - but jQuery must always load before bootstrap.min.js, since every Bootstrap 3 plugin is written as a jQuery plugin:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery must come first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- then bootstrap.min.js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

The Viewport Meta Tag

Without this tag mobile browsers render the page at a fixed desktop-sized viewport and then scale it down, which defeats every media query in the grid. It must be present in <head> on every page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Script Order Matters

A common setup mistake is loading bootstrap.min.js before jQuery. When that happens every plugin throws a console error like Bootstrap's JavaScript requires jQuery and nothing wires up - no dropdowns, no modals, no collapsing navbar. Always double-check the two script tags are in this order: jQuery, then Bootstrap.

Installing via Bower or npm + LESS

The CDN is the fastest path, but if you want a custom-branded build - your own color palette, different spacing - Bootstrap 3 shipped its source as LESS. Historically, Bower was the recommended package manager for it:

# the historical Bower workflow
bower install bootstrap#3.4.1 --save

# or, with npm and the LESS compiler
npm install bootstrap@3 less --save-dev
lessc node_modules/bootstrap/less/bootstrap.less dist/custom-bootstrap.css

With the LESS source in hand you can override variables like @brand-primary or @grid-gutter-width in your own variables.less before compiling, giving TrailMap its own trail-green accent color instead of Bootstrap's default blue.

A Minimal TrailMap Page Skeleton

Putting it together, every TrailMap page starts from the same shell:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>TrailMap</h1>
    </div>
  </div>
</div>