D-flex makes bootsrtap grid system broke

user_10377640 0
Viewed 102

I create a dashboard with reactJs and react bootstrap. Due to the different size of the card on my dashboard, it's resulting the gap on my dashboard. This is the screenshot :

Gap on my dashboard webapp

I want to fill the gap on my dashboard. According to the bootstrap flex documentation, I used d-flex align-items-stretch to fill the gap. Like this :

      <Row>
        <Col lg="6" md="6" sm="12" className="d-flex align-items-stretch"> //I placed it on Col
            <FrequentUsers />
        </Col>
        <Col lg="6" md="6" sm="12" className="d-flex align-items-stretch">
            //Other content
        </Col>
      </Row>

Placing the d-flex align-items-stretch on the <Col> tag is the only way that I found worked in my case. If I place it in <Row> tag or in <div> tag as a container outside it, it didn't work.

The result is the y-axis stretched well as I expected, but the x-axis suddenly shrink :

the card width suddenly shrink

So I manage my grid layout to make it wider. The grid layout is still working but it didn't affecting the card, it is only affecting the gap like there is a invisible container in it. So I'm assuming that the grid system at this point is "broken"

I'm guessing that this is because the d-flex. But as I read the documentation, it should've instead make the content fully extended to the side. Please check it on the documentation here

flexbox react-bootstrap bootstrap-4 javascript
1 Answers

Based on @ChewySalmon's comment. I try to adjusting flex-basis on my card. The reason I do it directly on my card is because as I provided in a code sample in my question above, I stretched my item on a <Col> tag, which is stretch the conten vertically (as my screenshoot shown above). So I need to do it on my card (also because this is the only way that worked in my case), so it stretched horizontally. And it work perfectly. Here is the implementation code :

<Card style={{flexBasis: "100em"}}> 
    //my content
<Card>

I use 100em because it's the only way besides 100px that worked for me. I hard coded it like that because the value is the same in all card, which is 100em. But I recommend you using props in JSX attribute. Hope that help you who have a same problem with me in the future. Thanks to @ChewySalmon.

user_103776400
Related