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-responsiveIt 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
- Time efficiency: one of the things I love most about working with bootstrap is the fact that it takes you less time to make responsive websites compared to when you are writing the CSS yourself. Once you take your time to master the different bootstrap classes, it becomes easier and faster to design your web pages.
- Mobile friendly: bootstrap was designed as a mobile-first framework. Therefore, with bootstrap, it is relatively easy to build mobile-friendly websites.
- Consistency: this was one of the key things considered by twitter developers when developing the bootstrap framework. Bootstrap framework has been successful in removing the inconsistencies that were present among designers and developers working on a project, as the framework has become one of the most popular front-end frameworks used by a lot of developers.
- Excellent documentation: bootstrap has detailed documentation which makes it super easy for anyone to learn how to work with the framework. It also makes it super easy for anyone joining a team that makes use of the framework to adapt easily, as it is easy to learn how the framework operates from the documentation.
- Powerful grid system: bootstrap offers a powerful grid system that makes it super easy to create responsive columns on your websites.
Disadvantages
- Most websites designed using just bootstrap will look almost the same. Customizing your bootstrap is possible but the problem with it is that you will have to write lots of CSS code and then that beats the purpose of using the framework in the first place.
- Although working with bootstrap is very easy, someone who hasn’t worked with the framework before will have to invest a lot of time in getting to learn how it works and also learn the different classes in the framework. The documentation is super helpful for beginners and all they need is enough practice and they are good to go.
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.