Save yourself time and use Bootstrap to build your site

Understanding how HTML, CSS, and JavaScript (JS) work together to create responsive designs is important. But once you have the basics down, you can shave off hours of coding time by utilizing Bootstrap.

What is Bootstrap?

Bootstrap is a popular front-end framework used in creating responsive web designs. It utilizes grid systems, JavaScript(JS) plugins, and Sass variables and mixins. You can use Bootstrap in a number of ways. You can build a website from various components and grids. Bootstrap has its own library of SVG icons that can work in any project. You can purchase a theme and customize it to your site’s needs, whether it’s a blog, a portfolio, a business, etc.

Where to start?

The best place to start learning is to jump into the documentation. Bootstrap’s documentation is comprehensive, simple to understand, and easy to implement examples and concepts into your own code. I suggest copying some examples into your preferred IDE and mess around with it. Or you can download their basic examples to understand how all the elements work together.

If you’re at a point with your development skills where you’re very comfortable with HTML, CSS, and JS, learning Bootstrap is a sensible and realistic next step.

Best way to learn Bootstrap?

Whenever I ask a more experienced developer for advice, I am almost always told the best way to learn about something new is to work on a project. Tutorials can only take you so far, and experience really is the best teacher.

I recommend finding a website you like and attempt to recreate it using Bootstrap. That’s what I did.

I found a really beautiful yoga website called Earth Soul Yoga. Shown below are side-by-side comparisons of their website and mine. My project is on the right (this is purely educational and will not be used for personal business ventures).

Earth Soul Yoga’s website and my website

Their home page features a carousel of images behind a call to action. I used Bootstrap to make my carousel and navigation bar. These features were the first things I made and I was shocked at how easy it was compared to using purely HTML and CSS.

This section of the website was fun because I got to use grids. I used to struggle with grids, but Bootstrap makes it so simple.

Snippet of code using Bootstrap

To make these grids, I added class specifications to the elements (relying heavily on Bootstrap’s documentation since I wasn’t familiar with the syntax). Here’s an example of how I structured it. You can specify columns (the default for most screens is 12) by adding “col-[number]” and that element will take up that space. Each of the icons I used from the original website take up 4 out of 12 columns, creating a nice row of three.

I applied this logic to tons of places in my code. Below is another example of where I used Bootstrap’s simple grid logic to align the images horizontally and create the black banner underneath.

Side-by-side comparison of Earth Soul Yoga and my project

I had a lot of fun diving into Bootstrap. It’s not as intimidating as I thought it would be. If you’re interested, here is my full project. I always appreciate constructive feedback.

Erin Hancock is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to the Responsive Bootstrap Website in the (DGM 2780 Course) and representative of the skills learned.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Erin Hancock

Erin Hancock

Web Developer living in SLC, UT. Let’s collab.