I’ve been creating UI’s from last few months as part of my learning and used BootStrap in my many web pages. But realized since I came across Flexbox in CSS, I need less BootStrap for making it more responsive.
Is Flexbox really taking over BootStrap and can replace it in future or we need both of them for responsiveness.
As a matter of fact, now Flexbox and CSS grids always come first to my mind whenever I need to create responsive-design. Is it really wrong to use only one or should I use both(BootStrap and Flexbox)?
Flexbox is actually taken into account in Bootstrap 4. I think this is the start of the documentation on it, https://getbootstrap.com/docs/4.0/layout/grid/#flex-order
Basically Flexbox is not an alternative to Bootstrap. As a matter of fact, Bootstrap also uses flexbox for it’s layout in v4: https://v4-alpha.getbootstrap.com/utilities/flexbox/ .
Bootstrap is a CSS framework, as it helps you with cross-browser issues, by including Normalize CSS, and also has some extra CSS for elements in it (buttons, panels, jumbotron, etc).
The “responsive” part, is just a part of what Bootstrap does. You can handle that in 3 ways (as far as I know): floating elements (what bootstrap 3 uses), Flexbox (used in Bootstrap 4, and also flexboxgrid, or you can write your own, it’s pretty easy) and CSS Grid (not supported across all browsers, but it has a pretty good support).
1 Like
You don’t need Bootstrap (or one of the many, many, many, many, many, many, many alternatives) for responsive design, it’s just a library that helps, that provides some CSS classes/JS to help with building UIs.
Most every library now uses flexbox anyway, it’s not either-or. It’s akin to asking if styling buttons in CSS is taking over from Bootstrap, doesn’t really make much sense, though I get what you mean. Most of the older libraries (Foundation, Bootstrap etc) were originally built to deal primarily with layout problems, as CSS didn’t have any real way to lay out content (whereas now it has flex and grids).
1 Like
These are completely diffrent things. In fact bootstrap 4 is based on flexbox so I’m not sure how one could replace another.
I’m understanding a bit. So, flexbox is just a part of BootStrapv4. Thanks for clarifying.
Nope, flexbox is just a part of CSS. Bootstrap 4 happens to use it.
Think of Flexbox just like a tool used to build machines (analogous to Bootstrap). Flexbox can help you make custom components for your UI but you don’t go around making new components each and every time. This is where Bootstrap comes into picture. Flexbox is sufficient for responsive designing, so is Bootstrap, but when it comes to dropdown menus, modals and other components, it seems better to use pre-built ones instead of creating your own. In short, Flexbox provides higher degree of freedom and Bootstrap has high modularity.