React Bootstrap — Borders, and Placements of Cards

Photo by Loïc Fürhoff on Unsplash

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 cards.

Border Color

We can change the border color of the cards.

For example, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      {[
        "Primary",
        "Secondary",
        "Success",
        "Danger",
        "Warning",
        "Info",
        "Light",
        "Dark"
      ].map((variant, idx) => (
        <Card
          border={variant.toLowerCase()}
          key={idx}
          style={{ width: "18rem" }}
          className="mb-2"
        >
          <Card.Header>Header</Card.Header>
          <Card.Body>
            <Card.Title>{variant} Card Title </Card.Title>
            <Card.Text>
              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…