How use bootstrap react in vs code?

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).

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card's content.
    Go somewhere
  
 
}

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

asked Jul 8 at 0:59

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'}}

answered Jul 8 at 1:48

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 (
        

           

               
                  Try now
               
           
           

               
                  Sign In
               
           
        
    )

}

answered Jul 8 at 3:29

AcodeAcode

4694 silver badges11 bronze badges

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

answered Jul 8 at 3:40

Ashutosh Singh

Front End Web Development

Introduction

While there are so many React UI libraries to choose from, React Bootstrap remains a popular choice because of its similarity with traditional Bootstrap and the availability of several Bootstrap themes. It is one of the fastest ways to build interfaces using React and Bootstrap.

Installation

To install react-bootstrap as a dependency, run the following command in your React project root directory.

1npm install react-bootstrap bootstrap

bash

Or if you prefer Yarn, use this command.

1yarn add react-bootstrap bootstrap

bash

You might ask why bootstrap is installed in addition to react-bootstrap. The reason is that react-bootstrap doesn't depend on a specific version of Bootstrap and does not include any CSS on its own, but a stylesheet is required to use react-bootstrap components.

Importing Bootstrap

To use react-bootstrap components, add the following code to src/index.js or App .js.

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

JSX

And that's it; you can now use React Bootstrap and its components in your app.

Basic Usage

Below are the five most commonly used React Bootstrap components.

Importing Components

There are two ways to import components from React Bootstrap.

1import { Button } from 'react-bootstrap';

JSX

Or by pulling specific components from the library.

1import Button from 'react-bootstrap/Button';

JSX

This import can significantly reduce the amount of code you end up sending to the client. This may be best for individual components, but not if several components are imported.

Using Components

Here is how you can use any React Bootstrap component in your React app.

1. Import the component that you want to use, for example, Button.

1import Button from 'react-bootstrap/Button';

JSX

1. Use the imported component with the props that can be found in React Bootstrap docs. For example, Button has props like variant, type, target, size, etc.

1// src/App.js
2import React from "react";
3import Button from "react-bootstrap/Button";
4
5function App() {
6  return (
7    <div>
8      <Button variant="primary">Click Me!Button>
9    div>
10  );
11}
12
13export default App;

JSX

Here is how the button will look.

Even if variant="primary" is removed, the button will still look the same since primary is the default value of variant prop.

You can experiment with different props and create new combinations.

• Here is a button with variant="danger" and disabled.

1<Button variant="danger" disabled>Click Me!Button>

JSX

• Here is a button with variant="outline-success" and size="lg".

1<Button variant="outline-success" size="lg">Click Me!Button>

JSX

Example

This example shows the step by step process of styling an app with React Bootstrap.

It will use the character endpoint of the Rick and Morty API, a free REST/GraphQL based API that provides information about characters, episodes, and locations of the Rick and Morty TV show.

1. First, request data from the /character endpoint. One way to do this is to use fetch() inside useEffect() hook and store the respose data inside the state variable. By providing an empty array as a second argument to useEffect(), you can ensure that the request is made only after the initial render.

1const [data, setData] = useState([]);
2
3  useEffect(() => {
4    fetch("https://rickandmortyapi.com/api/character/")
5      .then((res) => res.json())
6      .then((data) => setData(data.results));
7  }, []);

JSX

Next, you need to decide which data we want to show in your app; this example will show name ,image,status, and url. You can check out the Character Schema here.

1. You can show the character data in React Bootstrap's Card component. First, make empty cards based on the number of characters in the response using .map() method on the data state.

1// src/App.js
2import React, { useEffect, useState } from "react";
3
4function App() {
5 const [data, setData] = useState([]);
6
7  useEffect(() => {
8    fetch("https://rickandmortyapi.com/api/character/")
9      .then((res) => res.json())
10      .then((data) => setData(data.results));
11  }, []);
12
13  return (
14    <div>
15      {data.map((character) => (
16          <Card key={character.id} style={{ width: "18rem" }}> 
17         Card>
18      ))}
19    div>
20  );
21}
22
23export default App;

JSX

Here, id of the character is used as the value of the key prop. You will not see anything in the app, since the component is itself empty.

1. You can use Card.Img to display the image inside the component.

1<Card key={character.id} style={{ width: "18rem" }}>
2      <Card.Img variant="top" src={character.image} />
3Card>

JSX

Now your application will show different characters' images in a single line without a margin.

You can add className="m-4" to add some margin between cards.

1<Card className="m-4" key={character.id} style={{ width: "18rem" }}>
2   <Card.Img variant="top" src={character.image} />
3Card>

JSX

1. To show name and species, use Card.Title and Card.Text inside Card.Body.

1<Card className="m-4" key={character.id} style={{ width: "18rem" }}>
2  <Card.Img variant="top" src={character.image} />
3  <Card.Body>
4    <Card.Title>{character.name}Card.Title>
5    <Card.Text>{character.species}Card.Text>
6  Card.Body>
7Card>;

JSX

Here is how your card will look.

1. Finally, add a Buttonto show more information about a particular character. You will also need to import the Button component from the react-bootstrap library.

1<Card.Body>
2 <Card.Title>{character.name}Card.Title>
3 <Card.Text>{character.species}Card.Text>
4 <Button variant="primary" href={character.url} target="_blank">
5    More Info
6 Button>
7Card.Body>

JSX

Here is how your app will look.

1. All the cards in a single line don't look right. To change the layout of the component, render everything inside instead of
   , which will divide the cards into columns.

1import React, { useEffect, useState } from "react";
2import { Card, CardColumns, Button } from "react-bootstrap";
3
4function App() {
5  const [data, setData] = useState([]);
6
7  useEffect(() => {
8    fetch("https://rickandmortyapi.com/api/character/")
9      .then((res) => res.json())
10      .then((data) => setData(data.results));
11  }, []);
12  return (
13    <CardColumns>
14      {data.map((character) => (
15        <Card className="m-4" key={character.id} style={{ width: "20rem" }}>
16          <Card.Img variant="top" src={character.image} />
17
18          <Card.Body>
19            <Card.Title>{character.name}Card.Title>
20            <Card.Text>{character.species}Card.Text>
21            <Button variant="primary" href={character.url} target="_blank">
22              More Info
23            Button>
24          Card.Body>
25        Card>
26      ))}
27    CardColumns>
28  );
29}
30
31export default App;

JSX

Here is how your app will look.

You can use the example used here to experiment with different React Bootstrap components.

Here are some ideas to experiment with:

• Use Modals to show more information about a character when More Info button is clicked.

Conclusion

In this guide, we discussed how to install and use React Bootstrap in any React app, and we saw an example where styling became more straightforward and faster with React Bootstrap. Not every component was discussed here, so you should try to explore different components available in React Bootstrap.

Here are some additional resources that can be helpful.

Can we use Bootstrap in Visual Studio code?

Can I use Bootstrap With React?

How do I link Bootstrap to React?

Can you use React in Vscode?