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.
Bootstrap isn’t the only design framework in town. Here are a few more, just to give you an idea:
Tailwind CSS — Imagine if Bootstrap only had utility classes, like the ones for spacing and shadows, but had a lot more than it does; and no components per se.
That’s Tailwind — you’re expected to assemble your own cards, alerts, etc, out of the utility classes. Many people like it because it’s “lighter” than Bootstrap — it gives you the tools to build up your own, custom framework; but you’re still not starting from scratch.
BootstrapCDN helpfully host bootstrap.css
(and Bootswatches) on their own server.
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 Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Connect Bootstrap JavaScript and its dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<!-- Connect Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></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.
Have fun!