Aspiring Software Developer at Microverse
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 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.
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.
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.
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">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://firstname.lastname@example.org/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>
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.
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.