React frontend with bootstrap and css

Steps to import bootstrap

1. npm install bootstrap
2. src/index.js add the code

import ‘bootstrap/dist/css/bootstrap.css’;

• in index.js

import ‘./index.css’;

---

Inline style

<h2 style={{borderWidth:’3px’;borderColor:’#333′}}>sample</h2>

Sample index.js with bootstrap

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import 'bootstrap/dist/css/bootstrap.css';



function ServiceList(){

    return (
        <div className="row">

            <h1> Data Based Services</h1>

            <Service />

            <Service />

            <Service />

            <Service />



        </div>

    );

}
const Service=()=>{

    return (

    <div className="col-sm-3"><Image ></Image>

    <Title />

<Eb />

</div>

    );

};

const Image= ()=>{

    return <img  alt=''

    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiSEiPuY8hANyZMO0UOUWdck8v5dObYgql0dgWQdka4A&s" />

};

const Title= ()=>{

    return <h3>Data Analyst</h3>

};

const Eb = () =>{

    return <button style={{color:'pink',borderWidth:'3px'}}>Enquire </button>

};




const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<ServiceList />);

---

to install react and start :

npx create-react-app demo

cd demo

npm start