Why cant i use Bootstrap Code in VS Code/React?-CodePudding

Hi im trying to use this code in my VS Studio project and i cant figure out how to display it. I know it is a Bootstrap Code which is basically a CSS Code. So can i just save this code as a Card.css class? And how do i display it then in my Code? Especially as i want to make it responsive (change border colour on click to mark as selected).

<div  style="width: 18rem;">
  <img  src="..." alt="Card image cap">
  <div >
    <h5 >Card title</h5>
    <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" >Go somewhere</a>
  </div>
</div> 
}

Im new to front end and im doing a an udemy course to learn more but would still aprecciate an explanation.

Thank you so much

CodePudding user response：

You should use className in react instead of class you can check it here https://reactjs.org/docs/faq-styling.html and also if you want to use inline style it would look like this stye={{width: '18rem'}}

CodePudding user response：

If you want to use bootstrap for styling components, you need to import bootstrap module into your project.

package.json

{
  "dependencies": {
    ...
    "bootstrap": "^4.6.0",
    ...
    "react": "^17.0.1",
    "react-body-classname": "^1.3.1",
    "react-dom": "^17.0.1",
    }
}

Then you can use bootstrap class names in your component. TestComponent.js


function TestComponent(props){
    return (
        <div className="row">
           <div className="col-lg-3 col-sm-6">
               <a
                className="btn btn-primary"
                href="https://test.com/dashboard#/signup"
               >
                  Try now
               </a>
           </div>
           <div className="col-lg-9 col-sm-6">
               <a
                className="btn btn-second"
                href="https://test.com/dashboard#/signin"
               >
                  Sign In
               </a>
           </div>
        </div>
    )

}

CodePudding user response：

In React.js, use className instead of class. But using Bootstrap.js in React is still not recommended.