Bootstrap not behaving correctly in React

Question

I have React project, which I have generated using create-react-app. In the project I want to use Bootstrap. After project generated there is a file called public/index.html. There I have put the Bootstrap CDNs.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

I have a component called ProductListComponent. Here in render part i have used panel. It is creating the panel but it is not behaving as per the Bootstrap standard.

import React,{ Component } from 'react';

class ProductListComponent extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <div className="row">
                <div className="col-lg-10 col-md-10">
                    <div className="panel panel-primary">
                        <div className="panel-header">
                            <h3>Products</h3>
                        </div>
                        <div className="panel-body">

                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default ProductListComponent;

Output So can anyone tell me, what I am doing wrong?

Answer 1

EDITED

you have to add the bootstrap theme

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">