When and How to Effectively Use Bootstrap

In my journey to becoming a Software Developer, I've seen so many frameworks being implemented and one of them is Bootstrap. As efficient as it is though, so many developers have a strong dislike towards it, myself included. Here's when and how to use it.

What is Bootstrap?

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development built at Twitter by @mdo and @fat. It contains CSS - and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. It uses a 12-column responsive grid system which will re-arrange depending on the screen size.

Bootstrap comes with quite a lot of CSS styles brought together into a style-sheet that can be imported to your project. They have styles for buttons, drop-down menus, carousels, forms and a lot of common CSS styles used in most applications. They also include features that you may never use like Jumbotrons, carousels etc. 

You do not need to know CSS extensively or at all to be able to use Bootstrap, all that's needed is the Framework.

When to use Bootstrap?

The answer to this question is not straight forward and depends on the circumstances surrounding your project. Here are some: 

If you are building a project to learn CSS, Bootstrap is a terrible idea as you will spend so much time trying to work around the features instead of learning how to style and design. In this case, it's better to go from scratch with your CSS styles instead of that of a CSS framework.

If you have a personal project you'll like to have in your portfolio with so many unique front-end UI and UX designs, it is advisable not to use Bootstrap as you will likely spend lots of time trying to overwrite the Bootstrap features to make it look like you want it to and also make it hard to make changes especially if it is a project that will often have updates made to it.

On the other hand, if you are building the project with the sole reason for learning how to make your web applications more interactive with a back-end programming language say with a form and have no use for how the layout appears, go for Bootstrap, it takes lesser time to apply instead of writing your CSS styles from scratch. 

The same goes for a project that doesn't rely too much on its physical appearance but mostly on its functionality, it is logical to use Bootstrap so long as you are okay with the outlook of the project.

There is a part of Bootstrap that most people don't think about or mostly ignore- the JavaScript aspect. Bootstrap requires jQuery to function. jQuery is an extremely popular and widely used JavaScript library, that both simplifies and adds cross-browser compatibility to JavaScript. Such features include toggles, carousel, pop-ups, drop-downs and a whole lot. 

Therefore, I wouldn't recommend using Bootstrap if you are building a heavy front-end design using Front-end frameworks like React, it can be a real pain trying to support them both unless your project is using a light front-end JavaScript. 

In my experience, using Bootstrap at the beginning was easy, or so I thought. It was easy to use it for the layout and its responsiveness as well, but then I had to struggle with overwriting so many styles I didn't want in my project, and that in itself was stressful and unproductive. I made the mistake of adopting Bootstrap because of its 12-grid column system, and not because of its extra features like carousels, drop-downs and the rest of them, and that proved to be more tasking than I had expected it to be, I could have saved myself the struggle and made my styles from scratch.

Summary

In the end, using Bootstrap all depends on the purpose of your project and the timeline. I wouldn't recommend using Bootstrap unless you have to, I've learnt that while Bootstrap saves time, is easy to use and has a lot of really cool features, it can be pretty hard to overwrite certain styles that you do not need, and you end up spending more time in trying to overwrite them than you would if you had just written your CSS styles from scratch.

How to use Bootstrap

Now that we are done with that, let's move on to how to incorporate Bootstrap into our projects. Bootstrap comes with a few examples to start from in its documentation.

Step one is to download Bootstrap. The zip file will come with CSS and js directories. Unzip the file and save it in the preferred directory.

 In the documentation, Bootstrap has a 'Hello World' page, so we'll use that as our index.html file. 

Hello, World!

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!--Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

In the template file, we have the basic doctype, html, head and body tags.

Bootstrap is mobile-first, which means it is responsive for all screen sizes, hence the meta="viewport" tag.

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Then we have the Bootstrap stylesheet in the <head>...

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

and we have the JQuery, Popper.js and the Bootstrap JavaScript plugins towards the end of the <body>.

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  

Note that, the Bootstrap JavaScript and the Popper.js go below the JQuery, it has to for it to function. Also, you can access them via URL to reduce the load on the live server, you can also download them if you want to work locally.

And that is all you need to do to start using Bootstrap in your projects!

This article, would not be covering how to use the Bootstrap's classes and ids, you can learn more about Bootstrap here.

Conclusion

Hopefully, you learnt a lot about Bootstrap in this article and when to use it. This article does not scratch the surface when it comes to the efficiency of Bootstrap. Remember you do not have to learn the entire framework to use it, all you need to do is to understand the concept. The documentation has everything you'll need, but if you ever get confused, a quick Google search should do the trick.