Categories
React Bootstrap

React Bootstrap — Carousels and Dropdowns

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to customize React Bootstrap carousels and dropdowns.

Carousels

Carousels are slideshow components that let us cycle through elements.

The slides can have images or text.

For example, we can use them by writing:

import React from "react";
import Card from "react-bootstrap/Card";
import Carousel from "react-bootstrap/Carousel";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Carousel>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="http://placekitten.com/500/500"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              ultrices ac dolor nec vestibulum.{" "}
            </p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="http://placekitten.com/500/500"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Second slide</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="http://placekitten.com/500/500"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide</h3>
            <p>
              Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
              porttitor,
            </p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </>
  );
}

We imported the Carousel component, which has the Carousel.Item to display the item.

Inside it, we can display an image.

Also, we can add a caption for the image with the Carousel.Caption component.

We can have anything inside the caption.

Controlled Slides

We can control the carousel state using th activeIndex and onSelect handler.

For example, we can write:

import React from "react";
import Carousel from "react-bootstrap/Carousel";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  const [index, setIndex] = React.useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

return (
    <>
      <Carousel activeIndex={index} onSelect={handleSelect}>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="http://placekitten.com/500/500"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              ultrices ac dolor nec vestibulum.{" "}
            </p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="http://placekitten.com/500/500"
            alt="Third slide"
          />

<Carousel.Caption>
            <h3>Second slide</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="http://placekitten.com/500/500"
            alt="Third slide"
          />

<Carousel.Caption>
            <h3>Third slide</h3>
            <p>
              Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
              porttitor,
            </p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
      <p>{index}</p>
    </>
  );
}

We have the index state and the setIndex function to change it.

Then we pass index as the value of the activeIndex prop to let us set the slide to go to.

onSelect has the handleSelect function as the value to let us set the index when carousel navigation is done.

We then display the index of the current slide below the carousel.

Dropdowns

We can add dropdowns to our React app with the Dropdown component.

For instance, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Dropdown>
        <Dropdown.Toggle variant="primary">Dropdown Button</Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item href="#/foo">foo</Dropdown.Item>
          <Dropdown.Item href="#/bar">bar</Dropdown.Item>
          <Dropdown.Item href="#/baz">baz</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}

We have the Dropdown component that has the Dropdown.Toggle component to show the toggle.

Dropdown.Menu shows the menu when the toggle is clicked.

href can have any URL that we want to go to.

variant is the styling variant.

To make it shorter, we can use the DropdownButton component to combine the Dropdown and Dropdown.Toggle component into one.

For example, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <DropdownButton title="Dropdown button">
        <Dropdown.Item href="#/foo">foo</Dropdown.Item>
        <Dropdown.Item href="#/bar">bar</Dropdown.Item>
        <Dropdown.Item href="#/baz">baz</Dropdown.Item>
      </DropdownButton>
    </>
  );
}

The title prop has the text content of the toggle.

The Dropdown.Toggle and the Dropdown.Menu wrapper are eliminated because we have the Dropdown.button component.

Styling Variants

We can set the variant prop to change the styles of the dropdown.

For instance, we can write:

import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      {["Primary", "Secondary", "Success", "Info", "Warning", "Danger"].map(
        variant => (
          <DropdownButton
            as={ButtonGroup}
            key={variant}
            variant={variant.toLowerCase()}
            title={variant}
          >
            <Dropdown.Item eventKey="1">foo</Dropdown.Item>
            <Dropdown.Item eventKey="2">bar</Dropdown.Item>
            <Dropdown.Item eventKey="3" active>
              Active Item
            </Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item eventKey="4">baz</Dropdown.Item>
          </DropdownButton>
        )
      )}
    </>
  );
}

to display the dropdown with all the colors.

Conclusion

Carousels are slideshows with text and images in the slides.

Dropdowns can have many varieties.

Categories
React Bootstrap

React Bootstrap — Toasts

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add toasts with React Bootstrap.

Toast

Toasts are popup notifications that are displayed to show users some information.

We can add it with the Toast component.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Toast from "react-bootstrap/Toast";

export default function App() {
  return (
    <div className="App">
      <Toast>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>
    </div>
  );
}

We have the Toast component that has various components.

Toast.Header has the header.

It has an image inside.

Toast.Body has the toast body.

This will always show since we have no code to close the modal.

Dismissible

We can make a toast dismissible by setting the show state to control when it shows.

The onClose prop lets us run code to dismiss the toast.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Toast from "react-bootstrap/Toast";

export default function App() {
  const [show, setShow] = React.useState(true);
  const toggleShow = () => setShow(!show);

  return (
    <div className="App">
      <Toast show={show} onClose={toggleShow}>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>
    </div>
  );
}

to let us close the toast with the close button on the top right.

We can disable animation with the animation prop set to false .

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Toast from "react-bootstrap/Toast";

export default function App() {
  const [show, setShow] = React.useState(true);
  const toggleShow = () => setShow(!show);

  return (
    <div className="App">
      <Toast show={show} onClose={toggleShow} animation={false}>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>
    </div>
  );
}

Then we disable the animation when we open and close the toast.

Stacking

When we have multiple toasts, then they’re stacked on top of each other.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Toast from "react-bootstrap/Toast";

export default function App() {
  return (
    <div className="App">
      <Toast>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>

      <Toast>
        <Toast.Header>
          <img
            src="http://placekitten.com/49/49"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title 2</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Pellentesque tincidunt nisi quis nunc fringilla viverra.
        </Toast.Body>
      </Toast>
    </div>
  );
}

to show 2 toasts one on top of each other.

Autohide

We can add the delay prop to hide the toast after a given number of milliseconds.

We’ve to add this with the autohide property to make it hide automatically.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Toast from "react-bootstrap/Toast";

export default function App() {
  const [show, setShow] = React.useState(true);

  return (
    <div className="App">
      <Toast show={show} onClose={() => setShow(false)} delay={3000} autohide>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>
    </div>
  );
}

We have the delay prop to 3000 to close the toast after 3 seconds.

autohide lets us auto-hide the toast after the time is up.

Also, we’ve to add the close and onClose props to control the opening and closing of the toast.

Conclusion

We can add a toast easily with the Toast component.

It can contain any styles and we can change the placement.

Also, it can be auto-closed.

Categories
React Bootstrap

React Bootstrap — Media Layout

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap’s media objects to add complex and repetitive components.

Media Order

We can flip the image and the content within the Media component.

For instance, we can write:

import React from "react";
import Media from "react-bootstrap/Media";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Media>
        <Media.Body>
          <h2>Title</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>
        </Media.Body>
        <img
          width={64}
          height={64}
          className="ml-3"
          src="http://placekitten.com/200/200"
          alt="cat"
        />
      </Media>
    </>
  );
}

to place the image on the right instead of the left.

Media List

To make the Media component display as a list, we can add the as='li' prop to our Media component.

For instance, we can write:

import React from "react";
import Media from "react-bootstrap/Media";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <ul className="list-unstyled">
        <Media as="li">
          <img
            width={64}
            height={64}
            className="ml-3"
            src="http://placekitten.com/200/200"
            alt="cat"
          />
          <Media.Body>
            <h2>Title 1</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
              tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
              eget lectus a ante convallis gravida. Donec fringilla odio ut
              magna gravida aliquam. Cras molestie non ante vel dictum. Cras
              lacinia molestie lacus, in lacinia sapien imperdiet in. Sed
              eleifend laoreet finibus. Integer semper dictum eros nec eleifend.
              Nunc quam mi, finibus lacinia metus vitae, dapibus ultricies diam.
              Vivamus ante nisi, pellentesque at lacus eu, vehicula pretium
              lorem. Nunc vitae ligula laoreet, accumsan diam et, auctor mauris.
              Fusce vitae posuere nibh, vitae eleifend quam. Duis a enim lacus.
            </p>
          </Media.Body>
        </Media>

        <Media as="li">
          <img
            width={64}
            height={64}
            className="ml-3"
            src="http://placekitten.com/189/189"
            alt="cat"
          />
          <Media.Body>
            <h2>Title 2</h2>
            <p>
              Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
              porttitor, ornare ex et, finibus ante. Aenean mattis ligula
              lectus, a aliquet est pharetra et. Donec sit amet est massa.
              Maecenas dolor ante, congue sit amet mattis eu, vehicula quis
              nisl. Nulla viverra ligula vitae mollis sagittis. Fusce volutpat
              convallis purus. Vestibulum tincidunt elit id aliquam placerat.
              Vivamus vestibulum enim sed eros ullamcorper congue. Fusce nec
              tincidunt arcu. Sed sed suscipit justo, ac eleifend mauris. Morbi
              molestie turpis a accumsan mollis. Aenean vel diam vitae ante
              tincidunt varius.
            </p>
          </Media.Body>
        </Media>

        <Media as="li">
          <img
            width={64}
            height={64}
            className="ml-3"
            src="http://placekitten.com/188/188"
            alt="cat"
          />
          <Media.Body>
            <h2>Title 3</h2>
            <p>
              Ut scelerisque tellus sit amet magna venenatis, sit amet auctor
              est mollis. Nunc aliquet ipsum neque, vel tincidunt dolor vehicula
              nec. Praesent placerat mattis mi, vitae sollicitudin tortor
              viverra vel. Etiam non auctor ante, eu vehicula mi. Donec non
              imperdiet ligula. Sed quam massa, placerat quis venenatis ut,
              aliquam quis tortor. Ut vulputate nunc non enim commodo, vitae
              lobortis sapien tincidunt. Quisque imperdiet augue eu tincidunt
              venenatis. Nunc porttitor a sem quis volutpat. Integer eget
              ultrices nisi. Nunc placerat erat quis enim fermentum pharetra.
              Morbi consequat tortor eget iaculis cursus. Pellentesque vitae
              ligula non dolor porttitor rhoncus quis et erat.
            </p>
          </Media.Body>
        </Media>
      </ul>
    </>
  );
}

We added multiple Media components.

And with the as='li' prop on each, they’re rendered as li elements.

So we can put them inside a ul element.

Conclusion

We can switch the order of a media component.

Also, we can render them as li components so that they can be displayed on a list.

Categories
React Bootstrap

React Bootstrap — Media

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap’s media objects to add complex and repetitive components.

Media Objects

Media objects let us build complex and repetitive components.

It’s also based on flexbox as with the grid.

To use it we can write:

import React from "react";
import Media from "react-bootstrap/Media";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Media>
        <img
          width={64}
          height={64}
          className="mr-3"
          src="http://placekitten.com/200/200"
          alt="cat"
        />
        <Media.Body>
          <h2>Title</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>
        </Media.Body>
      </Media>
    </>
  );
}

We just use the Media component as a wrapper.

Inside it, we have the img element with the width and height of the image.

src is the URL of the image.

className has the styling class we want to apply.

alt is the text description of the image.

Media.Body has the body of the content, which is displayed to the right of the image.

Inside it, we can have anything we want.

Media Nesting

Media components can be nested.

For instance, we can write:

import React from "react";
import Media from "react-bootstrap/Media";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Media>
        <img
          width={64}
          height={64}
          className="mr-3"
          src="http://placekitten.com/200/200"
          alt="cat"
        />
        <Media.Body>
          <h2>Title</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>

<Media>
            <img
              width={64}
              height={64}
              className="mr-3"
              src="http://placekitten.com/100/100"
              alt="another cat"
            />
            <Media.Body>
              <h2>Another Heading</h2>
              <p>
                Integer non ante ut arcu imperdiet maximus. Pellentesque id
                metus porttitor, ornare ex et, finibus ante. Aenean mattis
                ligula lectus, a aliquet est pharetra et. Donec sit amet est
                massa. Maecenas dolor ante, congue sit amet mattis eu, vehicula
                quis nisl. Nulla viverra ligula vitae mollis sagittis. Fusce
                volutpat convallis purus. Vestibulum tincidunt elit id aliquam
                placerat. Vivamus vestibulum enim sed eros ullamcorper congue.
                Fusce nec tincidunt arcu. Sed sed suscipit justo, ac eleifend
                mauris. Morbi molestie turpis a accumsan mollis. Aenean vel diam
                vitae ante tincidunt varius.
              </p>
            </Media.Body>
          </Media>
        </Media.Body>
      </Media>
    </>
  );
}

We have another Media component nested in the Media.Body of the first Media component.

Media Alignment

The media in the Media component’s position can be changed.

For instance, we can write:

import React from "react";
import Media from "react-bootstrap/Media";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Media>
        <img
          width={64}
          height={64}
          className="align-self-end mr-3"
          src="[http://placekitten.com/200/200](http://placekitten.com/200/200)"
          alt="cat"
        />
        <Media.Body>
          <h2>Title</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>
        </Media.Body>
      </Media>
    </>
  );
}

We change the className of the img element to move the image to the bottom.

Conclusion

We can create Media components to create a layout with an image on the left and text on the right.

Categories
React Bootstrap

React Bootstrap — Grid Layout

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap’s grid system to create layouts.

Responsive Grids with Multiple Breakpoints

We can make React Bootstrap watch for multiple breakpoints and size the columns accordingly.

For instance, we can write:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col xs={12} md={8}>
            foo
          </Col>
          <Col xs={6} md={4}>
            bar
          </Col>
        </Row>

        <Row>
          <Col xs={6} md={4}>
            foo
          </Col>
          <Col xs={6} md={4}>
            bar
          </Col>
          <Col xs={6} md={4}>
            baz
          </Col>
        </Row>

        <Row>
          <Col xs={6}>foo</Col>
          <Col xs={6}>bar</Col>
        </Row>
      </Container>
    </>
  );
}

to size the columns to different sizes.

We have the xs and md breakpoints to size them the way we like.

For example, xs={12} md={8} means the column will take up all 12 columns of the grid when the xs or extra small breakpoint is hit.

If the md or medium breakpoint is hit, then the column will be 8 columns wide.

Order and Offset

In addition to the breakpoint props, we can also pass in an object with theorder and offset properties.

order specifies the visual order from left to right.

offset is the number of columns to move a column to the right.

For instance, we can write:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col xs>1</Col>
          <Col xs={{ order: 12 }}>2</Col>
          <Col xs={{ order: 1 }}>3</Col>
        </Row>
      </Container>
    </>
  );
}

to order our columns.

The ones with the lower number is to the left and the ones with higher numbers are to the right.

So the column with the 2 is to the right of the one with the 3 since the first one has a higher order number than the other one.

We can also write first for the leftmost one and the last for the rightmost one.

For example, we can write:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col xs={{ order: "last" }}>1</Col>
          <Col xs>2</Col>
          <Col xs={{ order: "first" }}>3</Col>
        </Row>
      </Container>
    </>
  );
}

We see that 3 and 1 are flipped even though the column with 1 is defined first.

This is because of the order property.

We can also add the offset property to move a column to the right by the given number of columns.

For example, we can write:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col xs={4}>foo</Col>
          <Col xs={{ span: 4, offset: 4 }}>bar</Col>
        </Row>
        <Row>
          <Col xs={{ span: 3, offset: 3 }}>foo</Col>
          <Col xs={{ span: 3, offset: 3 }}>bar</Col>
        </Row>
        <Row>
          <Col xs={{ span: 6, offset: 3 }}>foo</Col>
        </Row>
      </Container>
    </>
  );
}

Then move the columns around according to the span and offset .

span is the number of columns that are spanned from 1 to 12.

offset is the number of columns to move to the right relative to the neighboring column.

Setting Column Widths in Row

We can set the width of all the columns inside it within the Row component.

For instance, we can write:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Container>
        <Row xs={2} md={4} lg={6}>
          <Col>foo</Col>
          <Col>bar</Col>
        </Row>
        <Row xs={1} md={2}>
          <Col>foo</Col>
          <Col>bar</Col>
          <Col>baz</Col>
        </Row>
      </Container>
    </>
  );
}

And we set the sizes for all the columns in the row.

So in the first row, if the screen is extra small, then the size is 2.

If the size is medium, then the size is 4.

And if the size is large, then the size is 6.

Conclusion

We can size columns and move with various props and values.

They can be ordered and spaced out according to offsets.