How to fit two selects side by side in a form with react-bootstrap

user_17316868 0
Viewed 423

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;
react-bootstrap reactjs
1 Answers

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.

user_139591390
Related