Creating Cards Using React-Bootstrap

In This Blog you are going to learn that How To Create Cards Using React-Bootstrap Library In Our React App. There are lots of components in React-Bootstrap Library. By using Card component we can create Cards in React App.

Things Related To Cards In React-Bootstrap

• Card
• Card Image
• Card Body
• Card Title
• Card SubTitle
• Card Text
• Card Buttons
• Card Block Level Buttons
• Card Link
• Card Header
• Card Footer
• Card background Color
• Card Border Color
• Card Image Overlay

Source Code

CardsBS.js File Code – Cards File

import React from 'react'
import { Button, Card, Col, Container, Row } from 'react-bootstrap'

function CardsBS() {
    return (
        <Container>
            <Row>
                <Col md={4}>
                    <Card border='danger'>
                        <Card.Img src='images/Koala.jpg' />
                        <Card.ImgOverlay>
                            <Card.Title>Card Title</Card.Title>
                            <Card.Subtitle>Card Sub Title</Card.Subtitle>
                            <Card.Text>
                                This is a card text This is a card text This is a card text
                                This is a card text This is a card text This is a card text
                            </Card.Text>
                            <Card.Link href='#'>Click Here..</Card.Link>
                            <div className='d-grid'>
                                <Button variant='danger'>Read More...</Button>
                            </div>
                        </Card.ImgOverlay>
                    </Card>
                </Col>
                <Col md={4}>
                    <Card bg='success'>
                        <Card.Header>
                            This is Card Header
                        </Card.Header>
                        <Card.Img src='images/Koala.jpg' />
                        <Card.Body>
                            <Card.Title>Card Title</Card.Title>
                            <Card.Subtitle>Card Sub Title</Card.Subtitle>
                            <Card.Text>
                                This is a card text This is a card text This is a card text
                                This is a card text This is a card text This is a card text
                            </Card.Text>
                            <div className='d-grid'>
                                <Button variant='primary'>Read More...</Button>
                            </div>
                        </Card.Body>
                        <Card.Footer>
                            This is Card Footer
                        </Card.Footer>
                    </Card>
                </Col>
                <Col md={4}>
                    <Card bg='secondary'>
                        <Card.Img src='images/Koala.jpg' />
                        <Card.Body>
                            <Card.Title>Card Title</Card.Title>
                            <Card.Subtitle>Card Sub Title</Card.Subtitle>
                            <Card.Text>
                                This is a card text This is a card text This is a card text
                                This is a card text This is a card text This is a card text
                            </Card.Text>
                            <div className='d-grid'>
                                <Button variant='success'>Read More...</Button>
                            </div>
                        </Card.Body>
                    </Card>
                </Col>
            </Row>
        </Container>
    )
}

export default CardsBS

app.component.html File Code

import logo from './logo.svg';
import './App.css';
import Component1 from './Component1';
import Component2 from './Component2';
import CSSstylesheet from './CSSstylesheet';
import Stylesheet1 from './Stylesheet1';
import Stylesheet2 from './Stylesheet2';
import CompA from './CompA';
import { createContext } from 'react';
import { useState } from 'react';
import ControlledForm from './ControlledForm';
import ControlledFunction from './ControlledFunction';
import MultipleInputs from './MultipleInputs';
import FunctionInputs from './FunctionInputs';
import OtherInputs from './OtherInputs';
import MultipleChecks from './MultipleChecks';
import RefComponent from './RefComponent';
import UnControlled from './UnControlled';

import ReactBS from './ReactBS';
import GridBS from './GridBS';
import ImagesDemo from './ImagesDemo';
import CardsBS from './CardsBS';


function App() {
    return (
        <div>
          <CardsBS/>
        </div>
    )
}

export default App

Download Notes Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/4m4eyqczejqh3x6/78+-+CARDS+REACT-BOOTSTRAP.pptx/file

Download Source Code Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/f73f8wz2o38gznx/Cards+React+Bootstrap.rar/file