React Bootstrap Card Example

React Bootstrap Card Example

What is React Bootstrap Card

The React Bootstrap Card Example is a flexible and expandable content container. Includes head and foot options, more content, background colors for content and more powerful display options. If you are familiar with Bootstrap 3, the cards replace our old panels, sources, and icons. The same functionality in those items is available as card conversion categories.

The React Bootstrap Card  are made with as little texture and style as possible, but you still manage to bring a ton of control and customization. Built with flexbox, it offers easy alignment and blends well with other Bootstrap features. They do not have a straight line, so use spacing tools as needed.

Read Also :  How to Create Custom Hooks React Example

Below is an example of a basic React card example with mixed content and adjusted width. Cards do not have a fixed width to start with, so they will naturally fill the full width of their parent items. This is easily done with our various measurement options.

React Bootstrap Card Example

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'

function Demo(){
  return (
    <>
      <App></App>
    </>
  );
}

ReactDOM.render(<Demo></Demo>,document.getElementById("root"));

App.js

import React from 'react';
import Card from './Card';
import Sdata from './Sdata';

const APP = () =>{
    return (<>
        <div className="container">
            <div className="row">
                {Sdata.map((allcard) => {
                    return (<Card 
                    key = {allcard.id}
                    image_src = {allcard.image_src}
                    description = {allcard.description}
                    title = {allcard.title} />);
                    }
                )}
            </div>
        </div>
    </>);
}
export default APP;

Sdata.js

const Sdata = [
    {
        id : 0,
        image_src : "https://assets.nst.com.my/images/articles/10ntbahubali_1497067428.jpg",
        description : "Watch New South Movie",
        title : "BAHUBALI 1"
    },
    {
        id : 1,
        image_src : "https://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2019/05/30/Pictures/_f9a476cc-82c9-11e9-9ece-2ab1fd7d8c60.jpg",
        description : "Watch New South Movie",
        title : "KGF 1"
    },
    {
        id : 2,
        image_src : "https://cerebrohq.com/wp-content/uploads/2017/08/45fb5d48d926934477230d38161b0d72.jpg",
        description : "Watch New South Movie",
        title : "BAHUBALI 2"
    },
    {
        id : 3,
        image_src : "https://static.india.com/wp-content/uploads/2020/10/pjimage-24.jpg",
        description : "Watch New South Movie",
        title : "KGF 2" 
    },
    {
        id : 4,
        image_src : "https://assets.nst.com.my/images/articles/10ntbahubali_1497067428.jpg",
        description : "Watch New South Movie",
        title : "BAHUBALI 1"
    },
    {
        id : 5,
        image_src : "https://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2019/05/30/Pictures/_f9a476cc-82c9-11e9-9ece-2ab1fd7d8c60.jpg",
        description : "Watch New South Movie",
        title : "KGF 1"
    },
    {
        id : 6,
        image_src : "https://cerebrohq.com/wp-content/uploads/2017/08/45fb5d48d926934477230d38161b0d72.jpg",
        description : "Watch New South Movie",
        title : "BAHUBALI 2"
    },
    {
        id : 7,
        image_src : "https://static.india.com/wp-content/uploads/2020/10/pjimage-24.jpg",
        description : "Watch New South Movie",
        title : "KGF 2" 
    },
    {
        id : 8,
        image_src : "https://assets.nst.com.my/images/articles/10ntbahubali_1497067428.jpg",
        description : "Watch New South Movie",
        title : "BAHUBALI 1"
    },
    {
        id : 9,
        image_src : "https://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2019/05/30/Pictures/_f9a476cc-82c9-11e9-9ece-2ab1fd7d8c60.jpg",
        description : "Watch New South Movie",
        title : "KGF 1"
    },
    {
        id : 10,
        image_src : "https://cerebrohq.com/wp-content/uploads/2017/08/45fb5d48d926934477230d38161b0d72.jpg",
        description : "Watch New South Movie",
        title : "BAHUBALI 2"
    },
    {
        id : 11,
        image_src : "https://static.india.com/wp-content/uploads/2020/10/pjimage-24.jpg",
        description : "Watch New South Movie",
        title : "KGF 2" 
    }
];

export default Sdata;

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* background-color:  #808080; */
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
.heading{
  color: blue;
  text-align: center;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  background-color: burlywood;
  font-weight: bold;
  text-shadow: 0px 4px 4px purple;
  font-family: 'Lobster', cursive;
}

.card-header{
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 10px;
}

.card-header-img{  
  width: 248px;
  height: 170px;
  border-radius: 10px;
}

.card {
  width:100%;
  height: 350px;
  box-shadow: 10px 5px 40px 20px darken(#341cac, 5%);
  transition: .25s;
  box-sizing: border-box;
  margin: 10px;
  margin-left: 0px;
  border-radius: 10px;
  box-shadow:0px 4px 4px tomato;
}

.card-body{
  background-color: white;
  height: 100px;
  box-sizing: border-box;
  text-align: center;
}

.description{
  color: #808080;
}

.comment{
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  color: white;
  text-align: center;
  width: 200px;
  background-color: #808080;
}

.comment img{
  border-radius: 5px;
}

.comment p {
  padding: 0px;
  margin: 0px;
}

.FancyBorder{
  padding: 10px;
  margin: 20px;
  border-radius: 10px;
}

 

Read Also :  Onclick to Get Current Time in react js