bootstrap is not working in ReactJS code

Question

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>

Please check the console in your browser when you see unexpected behaviour. There should be a message there telling you exactly what's wrong here. — ivarni
– ivarni, Commented Sep 19, 2017 at 5:56

Robert · Accepted Answer · 2019-02-01 12:18:50Z

8

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

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

edited Feb 1, 2019 at 12:18

Robert

5,31843 gold badges70 silver badges115 bronze badges

answered Feb 1, 2019 at 11:53

thanusiya nesarajan

811 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sagiv b.g · Accepted Answer · 2017-09-19 05:40:58Z

2

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.

answered Sep 19, 2017 at 5:40

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Comments

Ajay B · Accepted Answer · 2017-09-19 05:43:14Z

1

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.

answered Sep 19, 2017 at 5:43

Ajay B

238 bronze badges

Comments

Navis Michael Bearly J · Accepted Answer · 2021-08-27 14:08:45Z

1

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.

to uninstall bootstrap 5 npm uninstall bootstrap
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';

answered Aug 27, 2021 at 14:08

Navis Michael Bearly J

213 bronze badges

Comments

Md Sakiluzzaman · Accepted Answer · 2022-02-28 15:54:38Z

0

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

answered Feb 28, 2022 at 15:54

Md Sakiluzzaman

12 bronze badges

Collectives™ on Stack Overflow

bootstrap is not working in ReactJS code

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related