Using CSS Flexbox in Reactstrap

#react #webdev

So as I was preparing my new website from a website template I found on the internet, I came across this patch of code

<Row>
    <Col lg="6" md="6">
    ...

And I was wondering that those props mean. Anyone who used HTML tables will find these similarly named components familiar, but might get lost with these numbers that are assigned to lg, md and so forth. I'm going to explain what they do here in case someone elsestumbles into this problem.

Many websites are using the CSS Flexbox layout system, which divides the webpage width into 12 equal parts. Depending on how wide the screen is, only one the props listed in <Col> will be used.

The number inside the prop indicates how wide the column should be in 1/12ths of a screen. You can put multiple Col components after each other like this:

<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>

And that will put three columns side by side. In the second snippet I posted there are even more props which you probably don't know, so let's go over those. What I found from experimenting with the Responsive Design Mode in Devtools is:

xs prop is only used on phone-sized screens.
sm prop is only used on tablet-sized screens.
md prop is only used on small PC displays such as laptop screens.
lg prop is only used on large PC displays like 1080p screens.
and finally, the xl prop, which was not used in these examples, is for very large displays like 4K screens.

I hope this helps someone else who's learning Reactstrap.