I'm learning react-bootstrap but I've found a pb . In fact, I'm making a responsive website and I want two designs with my form (for the sm screen and for the lg screen). I have a form with two selects . In sm mode, I want them to be one above the other (it already works) but in lg mode I want them to be side by side ... I tried with display flex but it doesn't works... Any ideas? Thank u very much
import './searchBar.scss';
import {
Form,
Button,
} from 'react-bootstrap';
const AppHeader = () => (
<div>
<Form role="form" className=" ">
<Form.Group>
<Form.Label>Select Color : </Form.Label>
<Form.Control as="select" custom>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="black">Black</option>
<option value="orange">Orange</option>
</Form.Control>
<Form.Label>Select Color : </Form.Label>
<Form.Control as="select" custom>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="black">Black</option>
<option value="orange">Orange</option>
</Form.Control>
</Form.Group>
<Button type="submit">Submit form</Button>
</Form>
</div>
);
export default AppHeader;
Wrap the Select input in Row first and then into Column,
<Row>
<Col lg={6} md={6} sm={12} xs={12}>
// Your Select Input
</Col>
</Row>
So Your code should be like :
import './searchBar.scss'
import { Row, Col, Form, Button } from 'react-bootstrap'
const AppHeader = () => (
<div>
<Form role="form" className=" ">
<Form.Group>
<Row>
<Col lg={6} md={6} sm={12} xs={12}>
<Form.Label>Select Color : </Form.Label>
<Form.Control as="select" custom>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="black">Black</option>
<option value="orange">Orange</option>
</Form.Control>
</Col>
<Col lg={6} md={6} sm={12} xs={12}>
<Form.Label>Select Color : </Form.Label>
<Form.Control as="select" custom>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="black">Black</option>
<option value="orange">Orange</option>
</Form.Control>
</Col>
</Row>
</Form.Group>
<Button type="submit">Submit form</Button>
</Form>
</div>
)
export default AppHeader
Here is an example in the CodeSandBox with a similar approach. try on the large and small screens.