Clever Geek Handbook

Is React Grid System Equivalent to Bootstrap Grid System?

I want to start styling my React app. I previously used the Bootstrap grid system and am currently looking for a React grid system. What do React developers typically use for their App Grid system / layout?

+5


source to share


5 answers


If you're only targeting modern browsers (i.e. those with flexbox support ), you might want to look into react-flexbox-grid , which offers a set of React components that implement common grid concepts like Row

and Column

. I've used several projects successfully.



This option avoids having to pull in the entire UI library and only use portions of the mesh.

+3


source


I just used bootstrap, either styling directly from bootstrap css or this react-bootstrap library.



+1


source


I'm not sure what you mean by the React Grid system as it is always a CSS grid. However, in my projects I use react-bootstrap and I assume this is what you are looking for. The only caveat is that you have to include the bootstrap css file (like cdn), other than that it works very well and has excellent documentation.

PS If you only want to use the grid system, you will need to find the css with only the bootstrap grid and then import only the Grid components from the library - Grid

, Row

and Col

.

+1


source


I used the system bootstrap grid for a long time, but after a while I got tired of adding a bunch of classes and it started making my HTML unreadable. I would suggest using flexbox . It is a great replacement and is becoming the standard for flexible designs. It's also supported by all major browsers , which is nice.

+1


source


Take a look at the fluid-react I have built. It doesn't need any additional CSS.

<Container>
    <Row>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">1</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">2</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">3</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">4</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">5</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">6</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">7</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">8</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">9</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">10</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">11</Col>
        <Col xs="12" sm="6" md="4" lg="3" xl="2">12</Col>
    </Row>
</Container>
0


source






More articles:


All Articles