CODEWITHSUNDEEP
reactjsreact-bootstrap
Prog101
Prog101

Reputation: 109

Calling card component

I have the following code that produces a Card UX Component.:

 import React from 'react';
 import image1 from '../images/swimming_sign.jpg';

 const Card = props =>{
  return(
    <div className="card text-center">
        <div className="overflow">
            <img src="image1" alt='Image 1'/>
        </div>
    </div>
);
}

export default Card;

I would like to know how I can call it in one of my pages that simply produces an image at the top half of the page, and also what is the command for importing the "bootstrap.min.css" from "node_modules" in this page. The code for the page currently looks like this: 

import React from 'react'
import Hero from '../Components/Hero';
import Card from '../Components/ServicesUi';

export default function Services() {
return (
        <Hero hero="servicesHero"/>
);
}

Upvotes: 0

Views: 164

Answers (1)

Ram Sankhavaram
Ram Sankhavaram

Reputation: 1228

Card Import

import React from 'react';
let image1 = '../images/swimming_sign.jpg';

 const Card = props =>{
  return(
    <div className="card text-center">
        <div className="overflow">
            <img src={image1} alt='Image 1'/>
        </div>
    </div>
);
}

export default Card;

import React from 'react'
import Hero from '../Components/Hero';
import Card from '../Components/ServicesUi';

export default function Services() {
return (
        <Card/>
        <Hero hero="servicesHero"/>
);
}

To import css file from node modules, please place the link statement in your index.html file

<link rel="stylesheet" href="./node_modules/bootstrap/bootstrap.min.css">

Upvotes: 1

Related Questions