CODEWITHSUNDEEP
reactjsbootstrap-4
Agha
Agha

Reputation: 411

bootstrap is not working in ReactJS code

I want to use Bootstrap for creating a table in ReactJS. I have written the code bellow and have used class="container" in <div> and class="table table-striped" in <table> but the bootstrap is not working in this code. Please tell what can be the issue?

app.js

render : function() {
        return (
            <div class="container">
                <table class="table table-striped">
                    <tbody>
                    {this.state.rows.map((r) => (
                        <tr>
                            <td>{r}</td>
                            <td>
                                <button onClick={() => this.deleteRow(r)}>Delete</button>
                            </td>
                        </tr>
                    ))}
                    </tbody>
                </table>
                <input trype="text" id={"newVal"} onChange={this.updateNewValue}></input>
                <button id="addBtn" onClick={this.addRow}>ADD</button>
            </div>
        );
    },

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample Project</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" />

    <script src="app.js" type="text/babel"></script>
</head>
<body>
    <div id="display"></div>
</body>
</html>

Upvotes: 4

Views: 12160

Answers (5)

Md Sakiluzzaman
Md Sakiluzzaman

Reputation: 1

I faced the similar issue in 2022.Simply uninstalling bootstrap library and installing lower version like 4.x.x works for me.

Upvotes: 0

Navis Michael Bearly J
Navis Michael Bearly J

Reputation: 21

By default npm install will install latest version of bootstrap that is version 5. here we need to enable version 4 in order to work and here is the list of steps to follow.

  1. to uninstall bootstrap 5 npm uninstall bootstrap

  2. Install any bootstrap version 4 series. npm install [email protected]

Now import Bootstrap CSS in your src/index.js file:

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

Upvotes: 1

thanusiya nesarajan
thanusiya nesarajan

Reputation: 81

Import Bootstrap CSS and optionally Bootstrap theme CSS at the beginning of your src/index.js file:

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

Upvotes: 8

Ajay B
Ajay B

Reputation: 23

To specify a CSS class, use the className attribute. This applies to all regular DOM and SVG elements like <div>, <a>, and others.

If you use React with Web Components (which is uncommon), use the class attribute instead.

Upvotes: 1

Sagiv b.g
Sagiv b.g

Reputation: 31024

In jsx you should use the className key word instead of class.
For example:
<table className="table table-striped">

You can read about it in the DOCS.

Upvotes: 2

Related Questions