The first time I came across bootstrap was when I was working on the front-end libraries curriculum on freeCodeCamp. I learned that it was a powerful framework that can be used to easily build responsive website designs. I didn’t understand how bootstrap worked under the hood, all I knew then was that when you do something like add a class of "
img-responsive
" to an image, it resizes itself when the screen size changes. Or that when you add a class of “btn btn-default” to a button element, it automatically styles the button and gives it color. It was not until recently, that I had to work with bootstrap that I became aware of just how powerful the framework is and also how it works under the hood.
Recently, I joined a software development training school called microverse, and for the HTML and CSS section of the technical curriculum, we had to clone a lot of websites using just basic HTML and CSS. I can recall that I and my coding partners had to write lots of lines of CSS code when designing those web-pages and also when trying to add responsiveness to them. Most times we end up getting lost in the many lines of codes as we were beginners who were just learning to code.
We got to a particular project which required us to clone the homepage of the Newsweek website using bootstrap. It was this particular project that made me realize how powerful the bootstrap framework is, as I had to go learn all I could about bootstrap, and this includes how it worked under the hood.
Cloning the Newsweek homepage was much more fun and easier compared to the other web-pages we’ve had to clone, and the reason was because of bootstrap. With bootstrap, I didn’t need to write much CSS as I would have written without the framework. Also, I didn’t need to write much media-queries as bootstrap has a very nice and easy way of adding responsiveness to your web-pages when you apply the right bootstrap classes that fit your needs.
In the end, I was able to come out with a nice and scalable clone of the Newsweek homepage that responds to different screen sizes just as the original website does (Here is a link to the project). I am not saying that one cannot build this clone using just normal CSS, but when you learn how to use bootstrap, I can assure you that building scalable web-pages will become more fun, easier and faster.
Getting Started With Bootstrap
Having a good knowledge of HTML and CSS are the basic requirements anyone needs to have to be able to work with bootstrap in any of their projects.
The bootstrap documentation, available on their official website provides a detailed guide on everything you need to know about the framework. Basically, to work with bootstrap in any of your projects, you can either link your project to the bootstrap file and the other required file by using their CDN links or you download the bootstrap files and the other required files directly from their official site.
For a detailed guide on how to set-up and start using bootstrap in your projects please click here.
The Advantages and Disadvantages of the Bootstrap Framework
Just as there are so many advantages to using the bootstrap framework, there are also a few disadvantages which you should be very much aware of to make informed decisions.
Advantages
Disadvantages
The advantages and disadvantages of bootstrap are not limited to the ones listed above. I have only listed the advantages and disadvantages I experienced working with the bootstrap framework. Nonetheless, the advantages of the framework outweigh the disadvantages.
Working with bootstrap for me has been fun so far and if you haven’t used bootstrap before, you can give it a try and you just might fall in love with it just like I did.