I'm looking to start styling my React app. I have previously used Bootstrap's Grid system and am now looking for the React grid system. What do React developers commonly use for their App's Grid system / Layout?
If you are targeting only modern browsers (i.e. those with flexbox support) you may want to investigate react-flexbox-grid which offers a set of React components that implement the usual grid concepts like Row and Column. I've used in successfully in a couple of projects.
This option avoids the need to pull in a whole UI library and only use the grid portions.
I have just used bootstrap, either styling directly with bootstrap css or via this react-bootstrap library.
I'm not sure what you mean by React Grid system as it's always CSS grid system. However in my projects I am using react-bootstrap library and I'm guessing it is something you are looking for. The only caveat is that you have to include bootstrap css file (for example from c.d.n.), other than that its working really fine and has great documentation.
P.S. If you would like to only use Grid system, you would then have to find css with bootstrap Grid only, and then import only Grid components from library - Grid, Row and Col.
I used bootstraps grid system for a long time, but after a while I got tired of adding a bunch of classes and it started to make my HTML unreadable. I would suggest using flexbox. It's a great replacement and is becoming the standard for responsive designs. It's also supported by all major browsers which is nice.
Take a look at fluid-react I built. It doesn't need extra 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>
Related
I have two columns with setup like this:
<Row>
<Col xs={24} lg={12}>
<p>Column 1</p>
</Col>
<Col xs={24} lg={12}>
<p>Column 2</p>
</Col>
</Row>
How can I use push or pull from the ANT Design Doc to make Column 2 to be above Column 1 in smaller screen?
We can't push/pull on the xs column because each column takes up the full width. Instead we can put column 2 on top initially and change the order when the viewport is large. At the large breakpoint we can push Column 2 to the right and pull Column 1 to the left.
The Grid API allows us to pass objects containing props such as span, push, and pull for the breakpoint.
<Row>
<Col xs={24} lg={{span: 12, push: 12}}>
<p>Column 2</p>
</Col>
<Col xs={24} lg={{span: 12, pull: 12}}>
<p>Column 1</p>
</Col>
</Row>
I am trying to hide few columns on mobile screens but its not working for some reason. Here's my code:
<Row>
<Col className="col-md-2">Route Image</Col>
<Col className="col-md-3">
<Row>
<Col>Route Name</Col>
</Row>
<Row>
<Col>Route Location</Col>
</Row>
</Col>
<Col className="col-md-3 hidden-xs-down">Route Difficulty</Col>
<Col className="col-md-2 hidden-xs-down">Route Length</Col>
<Col className="col-md-2 hidden-xs-down">View Details</Col>
</Row>
Can someone please tell me what I am doing wrong?
Since Bootstrap v4.x, all .hidden- classes have been removed. You should use d-none .d-sm-block instead if you want to hide your element only on xs
I just found out about react suite and it's really good but I can't figure out this error that says component is not exported from rsuite per example 'Attempted import error: 'Card' is not exported from 'rsuite'.' and this is happening very often like where is the component if not from rsuite and the docs for it are really bad it doesn't help much
import "./App.css";
import "rsuite/dist/styles/rsuite-default.css";
import { Row, Col, Card } from "rsuite";
const styles = {
padding: 20,
textAlign: "center",
};
function App() {
return (
<div className='App' style={styles}>
<Row>
<Col md={6} sm={12}>
<Card />
</Col>
<Col md={6} sm={12}>
<Card />
</Col>
<Col md={6} sm={12}>
<Card />
</Col>
<Col md={6} sm={12}>
<Card />
</Col>
</Row>
</div>
);
}
export default App;
I can't find out why this is happening, tried looking up youtube, google or anything but it seems like the community for it is not that big I don't understand and I've had this with a lot of other components. Any help would be appreciated I really wanna use this library it looks really good
There is no Card component in the rsuite library, but you can implement it by combining Panel components.
https://rsuitejs.com/components/panel
In addition, the import of components is explained at the beginning of each component's documentation.
I was got a row of buttons I like to adjust to changes in screen resolution or browser window resizing. Right now, when I change the screen resolution or browser window size, the button starts to overlap to the second row. I read that bootstrap and adjust the size of the buttons or text to handle the changes.
I read another post and added the following code but its not quite working
<Grid fluid={true}>
<Row">
<Col md={3}>
<Button ...>
</Col>
<Col md={3}>
<Button ...>
</Col>
<Col md={3}>
<Button ...>
</Col> <Col md={3}>
<Button ...>
</Col>
</Row>
</Grid>
When I resize the screen View from 100% and below, the buttons are resizing in height and all buttons stays on the same row. However, when I change the view resizing with Ctrl + mouse wheel to over 100%, the buttons overlap to the next line. I also see the button row overlap when resizing the browser window size.
Is there a way to resize the buttons when over 100% and changing the browser window size?
I tried to add max-width: 90% !important in the css styling, but that did not work.
Any help is appreciated. Thanks
A solution is to use react-bootstrap Grid system like this:
This behaviour will make sure that the Columns (aka your buttons in this case) to flow automatically when there is no space left, they will start from next line and not overlap as you have now:
import { Container, Row, Col } from 'react-bootstrap'
...
<Container>
<Row>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
</Row>
</Container>
Or if you're only using css:
<div className='container'>
<div className='row'>
<div className='col'><Button ... /></div>
<div className='col'><Button ... /></div>
<div className='col'><Button ... /></div>
<div className='col'><Button ... /></div>
</div>
</div>
I'm using reactstrap components.
there is more than one input.
how do I set some fields to "required".
that is, the user cannot pass idle. how can such restrictions be made?
<Row>
<Col xs="2">customer name</Col>
<Col xs="6">
<Input
required
maxLength={"20"}
type={"text"}
placeholder={"customer name"}
name={"customerName"}
defaultValue={this.state.customerName}
onChange={this.handleChange}
/>
</Col>
</Row>
Did you try this one: https://availity.github.io/availity-reactstrap-validation/ ? Does a pretty good job.
Sorry to write here, but it seems at don't have enough reputation to answer.
availity-reactstrap-validation extends the reactstrap forms with some nice functions like validation.
In order to have labels on left and inputs on right you can mix them like this:
<AvForm onValidSubmit={handleValidSubmit} onInvalidSubmit={handleInvalidSubmit}>
<FormGroup row>
<Label for="name" sm={2}>Name</Label>
<Col sm={10}>
<AvField name="name" type="text" required />
</Col>
</FormGroup>
</AvForm>
Be sure that you have imported all the libraries.