Bootstrap not applying even when imported

November 19, 2021

I am starting to use react bootstrap however the classNames are not applying in my Confirmation.jsx component? I have installed bootstrap and react-bootstrap using yarn. I have tried putting the bootstrap import in my index.js and my app.js — didn’t work, I have tried also using both

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

and

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import React from 'react';
import './App.css';
import { Container, Row, Col } from "react-bootstrap";
import { CoffeeCard } from './components/CoffeCard';
import { Confirmation } from './components/Confirmation';
import coffee from './data/coffee.json';

function App() {
  return (
      <>
          <Confirmation/>
          <Container>
              <Row>
              </Row>
          </Container>
      </>
  );
}

export default App;

Confirmation.jsx

import React from "react";
import { Toast } from 'react-bootstrap';

export function Confirmation({ toggle }) {
    return(
        <Toast onClose={() => toggle(false)}>
            <Toast.Header>
                <strong className="mr-auto">Added item to Basket</strong>
                <small>just now</small>
            </Toast.Header>
            <Toast.Body>
                That's a nice coffee you chose, want another?
            </Toast.Body>
        </Toast>
    )
}

>Solution :

Looks like you are using the latest version of bootstrap where mr-auto has been changed to me-auto (https://getbootstrap.com/docs/5.0/utilities/flex/#auto-margins). If you change your popup it should work as expected:

import React from "react";
import { Toast } from 'react-bootstrap';

export function Confirmation({ toggle }) {
    return(
        <Toast onClose={() => toggle(false)}>
            <Toast.Header>
                <strong className="mr-auto">Added item to Basket</strong>
                <small>just now</small>
            </Toast.Header>
            <Toast.Body>
                That's a nice coffee you chose, want another?
            </Toast.Body>
        </Toast>
    )
}

Working stackblitz example: https://stackblitz.com/edit/react-wjvcyu?file=src/index.js