Unable to display bootstrap panels in react js

Question

I am trying to display these bootstrap panels from here https://www.w3schools.com/bootstrap/bootstrap_panels.asp : the header and footer one.

I have installed bootstrap in my project. And I can see the Button is working fine, but panels are not coming up.

App.js:

import React from "react";
import { Button } from "react-bootstrap";
import { Container, Row, Col } from "react-bootstrap";

import "./App.css";

function App() {
  return (
    <div>
      <center>
        <Button href="#">Link</Button>
      </center>
      <div class="panel panel-default">
        <div class="panel-heading">Panel Heading</div>
        <div class="panel-body">Panel Content</div>
        <div class="panel-footer">Panel Footer</div>
      </div>
    </div>
  );
}

export default App;

Here is the output but it does not display the panels properly:

I think, You missed to import the bootstrap's css in your application. — Mujibur Rehman Ansari, May 12 '20 at 11:57
I think you are using bootstrap version 4 and if so you need to use ```card``` and not panel and working example here https://codesandbox.io/s/react-bootstrap-tqdxf — Maniraj Murugan, May 12 '20 at 12:08
https://stackoverflow.com/a/44985246/13146189 i did all the stepf from this ans, idk why it still isnt coming — rawrstar, May 12 '20 at 12:11
@ManirajMurugan i have no idea how you are getting the output and I am not — rawrstar, May 12 '20 at 12:13
@user1997, Can you create a codesandbox reproducing your issue as like I did?? If you try the code which I have provided then it should work if you use bootstrap 4.. — Maniraj Murugan, May 12 '20 at 12:17
pls can you tell me how to add bootstrap to pmy react js, it soent seem to be working, even after putting using npm — rawrstar, May 12 '20 at 19:26

score 1 · Accepted Answer · answered May 12 '20 at 19:58

Step.1: install bootstrap

npm install bootstrap

Step.2: include bootstarp CSS

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

Also, Note that in your code, you are using class instead of className. Though, it might work but with warnings. Check how to do styling in reactjs.

Example:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function App() {
  return (
    <div className="card">
      <div className="card-header">Card Header</div>
      <div className="card-body">Card Body</div>
      <div className="card-footer text-muted">Card Footer</div>
    </div>
  );
}

Here is a sandbox

I just need bootsstrap only for styling – rawrstar May 13 '20 at 11:10 — rawrstar, May 13 '20 at 11:10

Unable to display bootstrap panels in react js

1 Answers1