Pull Your App Up by the Bootstraps

Just a navbar but it looks cool in Monokai

In this article, I want to explain step-by-step how to incorporate Bootstrap into your Javascript (JS) projects.
First, we create a new Javascript project by creating a directory and some starter files.

Create a folder, drag it into VSCode, click the button to make files. We’ll need an .html, .css and .js file.

Here’s a refresher on how to do that:

1. Create a folder in your finder/explorer and give it the name you want your app to have.
2. Drag the folder you just created into your editor. I’ll be using Visual Studio Code (VSC).
3. You’ll now be able to click on your project on the ‘explorer’ to the side of VSC. When you do you’ll see the ‘new file’ icon. We’ll click on it 3 times, each time creating another one of the files we’ll need (index.html, style.css, script.js).

From here we’ll build out, connect, and test each one of the files we created before moving on. We’ll start by adding our HTML boilerplate.

Shortcut — type ‘html’ into VSCode and before you hit enter select ‘html5-boilerplate’.

Notice we’re linking to our CSS file. We’re essentially telling our HTML to look for a file named ‘style.css’ in the same folder as this file.
Let's test to see that it’s working.

You can just drag the index.html tab into your web browser as the arrow alludes to.

You can simply drag any HTML file over your web browser and your web browser will load it. I’m using Google Chrome.
Next, we will test that our CSS file is correctly linked within our HTML file, and to do this, we'll add a background color and then reload our page in the browser to see if the change is reflected.

Standard first CSS step for me. Thanks, Colt!

Here you see that we are targeting the body tag in our index.html file and then setting the background of the body to orange. When we refresh our browser, our document should now be pretty orange.

“Welcome to my app” — My App

Now that we know our style.css is properly connected to our index.html we will now test our script.js in the same way except this time we add a button to our HTML, to make clear that when we click the button something should happen. It will be one of the things we change later when we add Bootstrap.

Line 13

Then after our button is displayed we will have to give it directions for what to do when we click it. These directions will be our JS. For this app, I will just switch between background colors of olive and orange on a button click.

Challenge -> Write this in 5 or fewer lines of code.

Alright, everything is walking and talking and ready for Bootstrap. To get started we’ll need to get the CDN link from the Bootstrap homepage.

Visit the link above, find the ‘CSS’ section, click the copy button, paste it into our html file above the CSS link.

Each time we load our HTML file it will call the CSS in that link just as it does the CSS file we linked-to in our app. We will add that bootstrap link to our index.html file just above our original CSS link because we want the Bootstrap CSS to load before any other stylings.

Scroll up to compare to what we had before we linked to Bootstrap.

After you add the Bootstrap link, you can test if you did it correctly by refreshing your app. You’ll notice that if it is properly linked, our page elements will look different, text included.

Pick a button, copy it, paste it in place of our button, refresh your app.

Let’s replace our HTML button element with a Bootstrap styled button. We’ll search the Bootstrap site for the buttons page where all their button variations are listed. We’ll copy one that we like and just paste it in place of the button we have in our index.html. After that, refresh your app and the Bootstrap button should still be there with the same functionality as before. It’s really that simple.
This process can be repeated for any of the Bootstrap elements you find and can quickly get your site up and running. I hope this is enough to allow you to experiment with adding and removing Boostrap elements on your own. Once you are comfortable with that I recommend looking through the Bootstrap docs to find how you can change the properties of all the elements you want to be included on your app. Try changing the colors of the button for example. Bootstrap is not meant to be used as it is on their site rather, they expect you to change it into something that suits your needs and the tools to do so are in their docs.
Just note that Bootstrap is utilized for broad strokes. Typically if you just need to get your site off the ground quickly. This is not the ideal tool for designers or those looking to highlight their frontend skills.
Thanks for your time and if you found this article useful stay tuned for a similar article except for this time we’ll be stepping through how to add Bootstrap to React using React-Bootstrap.