Flexbox and Bootstrap

css is a hard thing to practice. I know the old adage practice makes perfect is really what I should be saying but doing that for something as vast as css can be daunting. Most programming languages can be practiced in little chunks with coding challenges on sites such as code wars or hacker rank. For a while I thought css didn’t have an equivalent and that I’d have to brute force myself through all the attributes and things I could do. This coupled with hearing about pre-processors like Sass and maybe having trouble with cross-browser support, I put learning css on the back burner. I mean why practice when you have Bootstrap.

Then everything changed when I ran into Flexbox froggy. Flexbox froggy is a website that let’s you practice the new flex display style. This changed everything for me. After going through all the practices I realized that I could use Flexbox in tandem with or even instead of Bootstrap. Of course there are many reasons to use bootstrap and I still do when I’m not necessarily focused on front-end or just don’t need that much fine-grain controller for that project. But this is where flexbox really shines. Being a little bit like bootstrap but with more controller.

The main difference that I saw was how elements are moved in relation to each other. Flexbox tends to create a column or row (that’s right, row!) where you can move all the elements within in that space. Bootstrap let’s you wrap elements and move all the elements together in a row “above” the wrapper.

This gives an output similar to what is found below.

Now the row element that the bootstrap box is in is not required if you only need some box and don’t plan to have anything on the sides. Also notice that the Flexbox box requires margin to move. This is what I mean by Flexbox moving in relation. It is simple to tweak the Flexbox attributes to justify to the left,right or center and you can even have it use the extra space evening if you have multiple elements. On the other hand, Bootstrap is handy when you need to move the elements in a fixed way. Of course you can use Flexbox inside the bootstrap box for even more control. Using Flexbox for a little bit now I think that using it together with Bootstrap will streamline design and with a little practice it will become easy to figure out when and where to use which tool.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.