Cheat Sheet for React Bootstrap. Layout and Forms

Table of contents

Breakpoints
Grid system
Container
Row
Col
Stacks

Forms

Form props
Form.Label props
fieldset props
Form.Control props
Form.Text props
Form.Select
Form.Check
Floating labels
Form Layout
Validation

Breakpoin…


This content originally appeared on DEV Community and was authored by Julia Shlykova

Table of contents

  1. Breakpoints
  2. Grid system
  3. Container
  4. Row
  5. Col
  6. Stacks
  7. Forms
    1. Form props
    2. Form.Label props
    3. fieldset props
    4. Form.Control props
    5. Form.Text props
    6. Form.Select
    7. Form.Check
    8. Floating labels
    9. Form Layout
    10. Validation

Breakpoints

  • xs(X-Small) <576px
  • sm(Small) ≥576px
  • md(Medium) ≥768px
  • lg(Large) ≥992px
  • xl(Extra large) ≥1200px
  • xxl(Extra extra large) ≥1400px

Grid system

Container

  • element with Bootstrap's container class: 
<Container style={{border: '1px solid black'}}>
  <Row>
    <Col>1 of 1</Col>
  </Row>
</Container>

Container props

  • fluid={true/'sm'/'md'/'lg'/'xl'/'xxl'} - Container fills all available horizontal space until the specified breakpoint;

Row

Row props

  • xs={number/'auto'} - number indicates how many columns can fit in one row on extra small devices;
  • {breakpoint}={number/'auto'};

Col

Row is a flexbox with 12 template columns, so we can set how many template columns each Col occupies.

Col props

  • {breakpoint}={number/'auto'} - number indicates how many template columns Col can occupy in one row;
  • {breakpoint}={span: number, offset: number, order: {"first"/"last"/number}} - span indicates number of template columns to occupy, offset indicates how many template columns to omit before starting Col.

Stacks

Full-width flexbox with column direction by default:

<Stack direction="horizontal" gap={3}>
  <div className="p-2">First item</div>
  <div className="p-2 ms-auto">Second item</div>
  <div className="p-2">Third item</div>
</Stack>

Stack props

  • gap={1-5} - space between items;
  • direction="horizontal" - makes horizontal stacked flexbox;

Forms 

<Form>
<fieldset>
<Form.Group className="mb-3" controlId="formBasicEmail">
  <Form.Label>Email address</Form.Label>
  <Form.Control 
    type="email" 
    placeholder="Enter email" 
  />
  <Form.Text muted>
    We'll never share your email with anyone else.
  </Form.Text>
</Form.Group>
<Form.Group>
  <Form.Label htmlFor="inputPassword">Password</Form.Label>
  <Form.Control
    type="password"
    id="inputPassword"
    aria-describedby="passwordHelpBlock"
  />
  <Form.Text id="passwordHelpBlock" muted>
    Your password must be 8-20 characters long, contain letters and numbers,
    and must not contain spaces, special characters, or emoji.
  </Form.Text>
</Form.Group>
</fieldset>
<Button variant="primary" type="submit">
  Submit
</Button>
</Form>
  • Form.Group - wrapper around label and input.
  • Form.Control - renders <input> or <textarea>.
  • Form.Text - form text below inputs, it can be help text, some restrictions for inputs.

help text should be associated with the control using aria-describedby

Form props

  • validated - mark form as having been validated.

Form.Label props

  • htmlFor={controlId} - if label is not in Form.Group we should specify.
  • visuallyHidden - hides the label visually while still allowing it to be accessible.

fieldset props

  • disabled - disabling all controls which were wrapped inside.

Form.Control props

  • as={'input'|'textarea'|element} - by default it's input;
  • size={'sm'|'lg'} - input size variants;
  • htmlSize={number} - number of characters that are visible. It's size attribute of the HTML input;
  • plaintext - renders input as plain text. Usually used along side readonly;
  • readonly;
  • disabled;
  • value;
  • onChange;
  • type={string};
  • isValid;
  • isInValid.

Form.Text props

  • muted - add text-muted class.

Form.Select 

<Form.Select aria-label="Default select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</Form.Select>

Form.Select props

  • size={'sm'|'lg'};
  • htmlSize={number};
  • disabled;
  • value;
  • onChange;
  • isValid;
  • isInValid.

Form.Check 

<Form.Check
  type='radio'
  id='radio'
  label='radio'
/>

We can implement toggle switch:

<Form.Switch
  id="custom-switch"
  label="Check this switch"
/>

Form.Check with children 

<Form.Check type='radio' id='radio'>
  <Form.Check.Input type='radio' isValid />  <Form.Check.Label>radio</Form.Check.Label>
  <Form.Control.Feedback type="valid">
    You did it!
  </Form.Control.Feedback>
</Form.Check>

Form.Check props

  • inline - groups controls horizontally;
  • reverse - put checkboxes etc. on the opposite side;
  • disabled;
  • title={str};
  • type={'radio'|'checkbox'|'switch'};
  • isValid;
  • isInValid;
  • feedback - a message to display when the input is in a validation state;
  • feedbackType={'valid'|'invalid'}.

Form.Check.Input props

  • type={'radio'|'checkbox'};
  • isValid;
  • isInValid;

Floating labels

Labels floating over input fields.

<FloatingLabel controlId="formBasicPassword" label="Password">
  <Form.Control type="password" placeholder="Password" />
</FloatingLabel>

placeholder in <Form.Control> is required since react-bootstrap uses :placeholder-shown pseudo-element.

FloattingLabel props

  • controlId={string} - sets id and htmlFor;
  • label={string|node} - form control label.

Form Layout

Label and Control placed horizontally 

<Row>
<Form.Label column="lg" lg={2}>
  Large Text
</Form.Label>
<Col>
  <Form.Control size="lg" type="text" placeholder="Large text" />
</Col>
</Row>
<br />
<Row>
<Form.Label column lg={2}>
  Normal Text
</Form.Label>
<Col>
  <Form.Control type="text" placeholder="Normal text" />
</Col>
</Row>

Validation

To "turn on" react-bootstrap validation style it's better to "turn off" built-in browser validator by adding noValidate in Form:

const [validated, setValidated] = useState(false);

const handleSubmit = (e) => {
  e.preventDefault();
  const form = e.currentTarget;
  if (form.checkValidity() === true) {
    // submit logic
  } else {
    setValidated(true);
  }
}

return(
<Form 
  onSubmit={handleSubmit} 
  noValidated 
  validated={validated}
>
  // ...
</Form>
}


This content originally appeared on DEV Community and was authored by Julia Shlykova


Print Share Comment Cite Upload Translate Updates
APA

Julia Shlykova | Sciencx (2024-07-03T11:54:08+00:00) Cheat Sheet for React Bootstrap. Layout and Forms. Retrieved from https://www.scien.cx/2024/07/03/cheat-sheet-for-react-bootstrap-layout-and-forms/

MLA
" » Cheat Sheet for React Bootstrap. Layout and Forms." Julia Shlykova | Sciencx - Wednesday July 3, 2024, https://www.scien.cx/2024/07/03/cheat-sheet-for-react-bootstrap-layout-and-forms/
HARVARD
Julia Shlykova | Sciencx Wednesday July 3, 2024 » Cheat Sheet for React Bootstrap. Layout and Forms., viewed ,<https://www.scien.cx/2024/07/03/cheat-sheet-for-react-bootstrap-layout-and-forms/>
VANCOUVER
Julia Shlykova | Sciencx - » Cheat Sheet for React Bootstrap. Layout and Forms. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/03/cheat-sheet-for-react-bootstrap-layout-and-forms/
CHICAGO
" » Cheat Sheet for React Bootstrap. Layout and Forms." Julia Shlykova | Sciencx - Accessed . https://www.scien.cx/2024/07/03/cheat-sheet-for-react-bootstrap-layout-and-forms/
IEEE
" » Cheat Sheet for React Bootstrap. Layout and Forms." Julia Shlykova | Sciencx [Online]. Available: https://www.scien.cx/2024/07/03/cheat-sheet-for-react-bootstrap-layout-and-forms/. [Accessed: ]
rf:citation
» Cheat Sheet for React Bootstrap. Layout and Forms | Julia Shlykova | Sciencx | https://www.scien.cx/2024/07/03/cheat-sheet-for-react-bootstrap-layout-and-forms/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts