CSS Flexbox Layout- Compare Flexbox layout module and Bootstrap 05th Jan 2022

In this blog, we will compare Flexbox Layout module with Bootstrap 4.Bootstrap and Flexbox Layout module are in a way trying to make websites responsive.Now if you are wondering what is a responsive website,then let's dwell into it a bit.

What is a responsive web site and the need for it

Responsive web design is all about creating web pages that look good on all devices(desktops, tablets, and phones).So what it means is that the website is "responsive" to various viewports and screen sizes and adjusts itself accordigly so that user gets the best experience. In order for website to be responsive, we need to write using HTML and CSS in a way that it automatically resize, hide, shrink, or enlarge, a website.In other words, the website should have the technology to automatically respond to the user’s preferences.

These days clients have so many choices for smartphones and with better internet connectivity, clients are demanding and needs a mobile version of their website. With so many device options and endless new resolutions,it's almost impossible to design a website to cater for each of them. It also doesnt make sense to lose visitors from one device while gaining visitors from another. I guess by now you might have understood why we need responsive design.

Now that we know what responsive website is, lets proceed with the main objective of this blog i.e comparing flexbox with Bootstrap. I had been working on Bootstrap 3 for some time before even I knew about Flexbox.Initially, I was under an impression that Bootstrap and Flexbox layout module are kind of competing with each other to solve the common issue of responsive design.I was not even sure what is Flexbox trying to solve when we have Bootstrap already, or the other way around.

But ofcourse now,since I have been using Bootstrap 4 and also Flexbox Layout module,I am in a better position and understand these concepts better.Actually,Bootstrap (v 4) revamps all its grid implementation using exactly the flexbox model,so I would say they are kind of friends and not competing

If you want to understand Flexbox Layout module better, do read my blogs starting from Basics Of Flexbox.In this blog, I will just focus on comparing Bootstrap with Flexbox module

Cateory	Bootstrap	Flexbox
Application	Is a Framework	Is a CSS concept, a technique
Application	Can build unique and complex layouts without having to build them from scratch	Need to write code,so starting to develop does take some time
Application	Need to understand it's unique syntax	Based on HTML and CSS.So nothing new to learn, ofcourse except, how these Flexbox Layout module's CSS proeprties work
Implementation	Isn’t necessarily lightweight.Need to import quite a few number of files(eg bootstrap.js,bootstrap.css,jquery.js,popper.js) to get going.	So since it's a concept and not a framework, you can start writing code right away.
Implementation	Framework provides classes like "col-sm-","col-md-" etc in order to make website responsive	Need to be clubbed with media queries to make website responsive
Implementation	CSS code may be more manageable because Bootstrap does the heavylifting in order to make website responsive	We will need to support various devices using media queries. So we will have to write more CSS code.Also, if project is big and demands too much of style, we might have to introduce CSS frameworks like LESS,SCSS etc which allows injecting one CSS into another, importing one CSS file into another etc
Implementation	Since Bootstrap provides it's own CSS and JS, we have little less control over the look and feel.	More control over look and feel
Community	Large community and support.	Comparitively smaller.
License	MIT + was developed by the Bootstrap team at Twitter in 2011	MIT

And that's it. Hope this article was helpful. .Email me at "techspacedeck@gmail.com" incase you have queries. Alternatively, you can fill the "CONTACT" form or drop a comment below