import "bootstrap/dist/css/bootstrap.min.css"; not working-CodePudding

So basically i have a react application that i am creating and in it i have a page in which i am using the react-bootstrap library to create certain compnents.

Here i have a react regigtration form with bootstrap components and i have already installed all the libraries and this code works fine but the problem lies in the fact that when i run the page the styles dont show even though i have imported:

import "bootstrap/dist/css/bootstrap.min.css";

So if there is any way this can be fixed please do let me know.

Thanks!

Here is the code for react page:

import React from 'react';
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import "bootstrap/dist/css/bootstrap.min.css";


const UploadBussiness = () => {
return (
<Form>
  <Row className="mb-3">
    <Form.Group as={Col} controlId="formGridEmail">
      <Form.Label>Email</Form.Label>
      <Form.Control type="email" placeholder="Enter email" />
    </Form.Group>

    <Form.Group as={Col} controlId="formGridPassword">
      <Form.Label>Password</Form.Label>
      <Form.Control type="password" placeholder="Password" />
    </Form.Group>
  </Row>

  <Form.Group className="mb-3" controlId="formGridAddress1">
    <Form.Label>Address</Form.Label>
    <Form.Control placeholder="1234 Main St" />
  </Form.Group>

  <Form.Group className="mb-3" controlId="formGridAddress2">
    <Form.Label>Address 2</Form.Label>
    <Form.Control placeholder="Apartment, studio, or floor" />
  </Form.Group>

  <Row className="mb-3">
    <Form.Group as={Col} controlId="formGridCity">
      <Form.Label>City</Form.Label>
      <Form.Control />
    </Form.Group>

    <Form.Group as={Col} controlId="formGridState">
      <Form.Label>State</Form.Label>
      <Form.Select defaultValue="Choose...">
        <option>Choose...</option>
        <option>...</option>
      </Form.Select>
    </Form.Group>

    <Form.Group as={Col} controlId="formGridZip">
      <Form.Label>Zip</Form.Label>
      <Form.Control />
    </Form.Group>
  </Row>

  <Form.Group className="mb-3" id="formGridCheckbox">
    <Form.Check type="checkbox" label="Check me out" />
  </Form.Group>

  <Button variant="primary" type="submit">
    Submit
  </Button>
</Form>
  )
 }

export default UploadBussiness

CodePudding user response：

There could be other issues, but according to react-bootstrap document, perhaps try include this import in App.js instead of the component file:

The following line can be included in your src/index.js or App.js file:

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

CodePudding user response：

I find the new React Docs (Beta) much more readable and helpful than the old React Docs. From the new React Docs (Beta):

React does not prescribe how you add CSS files. In the simplest case, you’ll add a <link> tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.

So what John Li says in his answer is correct; he is directly quoting the React Bootstrap docs. However, you might also try adding the CSS directly to your HTML, which the React Bootstrap docs also recommends:

How and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN. A little more information about the benefits of using a CDN can be found here.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
  crossorigin="anonymous"
/>

If this works, then you'll also have a version of Bootstrap specified, which might be helpful to you later.

EDIT: I forgot to emphasize that, as the React Docs (Beta) recommends, you should consult the docs of whatever build tool (e.g. Vite) or framework (e.g. Create React App) you are using. If you aren't using a build tool or a framework, you're sort of on your own.