To Bootstrap, or Not To.
A simple guide to getting started.







When working on any product, it is important to have a vision. If you are an architect, you make blueprints. [01] If you are a developer, you will make wireframes. These two processes represent the same idea. A wireframe can be done physically, as in pencil to paper, or digitally. I use fluidui.com to make wireframes because of the awesome templates. [02] After you have your wireframe, it is time to advance to everyone’s favorite part, reading the documentation. I know, you thought we were going to skip over that part. You thought wrong, and here is why. It is important to get a basic understanding of the documentation in order to know which elements are useful to you and which ones aren’t. For this guide, I will be showing you how to use the BoostrapCDN (more on CDN here). We will be using the BootstrapCDN because it enables us to access bootstrap using only <link> and <script> tags. Easy, yes? Since you read the docs, you know that there are templates that you can use instead of building out your html code out from scratch. If you wish to use one, follow screenshot [03] and pick out a template.
Else, skip to step [06]. Next, towards the top of the examples page, click on “download examples” towards. This will give you access to ALL of the templates. [04] After you have copied the files you need, you can delete the folder if you want to. [05] In your app’s frontend add two new files and name them index.css and index.html. Additionally, if you previously had an index.html file that you were working from, rename that to draft-index.html. Then, paste the necessary files in their respective folders. [06] To access bootstrap add the css <link> to the <head> of your app. Optionally, [07] you can also add JS script tags at the end of <body>. This will be necessary for including components that need JS to function. And finally, you have the the basics necessary for implementing bootstrap into your application. When you include <script> tags linking any existing JS files you were working on, you will most likely get a ton of errors. Fear not, young dev. Work through the errors one-by-one, and integrate your forms, cards, buttons, and id elements you used for DOM manipulation and event handling. Then you’ll reach your MVP using boostrap.
Thanks for stopping by 🙃️, BYE!