Design Resources

As you go about designing and coding your application’s screens, here are a few things that you may find useful.


I’ve placed them in rough order of my opinion of their value/length ratio.


In rough order of how often I use them.

  • These folks helpfully host bootstrap.css (and Bootswatches) on their own server: BootstrapCDN
  • Bootstrap’s Javascript components (like modals, hamburger menu, carousel, etc) depend on another open-source library called jQuery; you can grab it from this CDN: jQuery CDN.
  • Ultimately, a quick and easy way to get all of Bootstrap and Font Awesome is to include the following in the <head> of your document:

     <!-- Expand the number of characters we can use in the document beyond basic ASCII 🎉 -->
     <meta charset="utf-8">
     <!-- Connect Font Awesome stylesheet -->
     <link rel="stylesheet" href="">
     <!-- Connect Bootstrap stylesheet -->
     <link rel="stylesheet" href="">
     <!-- Connect Bootstrap JavaScript and its dependencies -->
     <script src=""></script>
     <script src=""></script>
     <!-- Make it responsive to small screens -->
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

You can use a Bootswatch or your own customized bootstrap.css instead as the href, if you like.