React & Rails - Bootstrap styling has gone in production

Question

I've been following this brilliant tutorial Rails & React Tutorial and have run into a problem after deploying to production. The bootstrap styles/classes are not being applied in production. The issue appears to be similar to this one however the poster is vague in his answer.

Here's a picture of the homepage on localhost:

and here's a picture of the homepage on production:

The code for the homepage is as follows, you can see the bootstrap class jumbotron etc:

export default () => (
<div className="vw-100 vh-100 primary-color d-flex align-items-center justify-content-center">
  <div className="jumbotron jumbotron-fluid bg-transparent">
  <img style={imgstyle} src={require("../../assets/images/hk_banner.jpg")} alt="Image of HK" />
    <div className="container secondary-color">
      <h1 className="display-4">Minority Experiences: HK</h1>
      <p className="lead">
        Experiences of the underrepresented.
      </p>
      <hr className="my-4" />
      <div style={{display: "flex", justifyContent: "space-between"}}>
        <Link
          to="/read"
          className="btn btn-lg custom-button"
          role="button"
        >
          Read Experiences
        </Link>
        <Link
          to="/about"
          className="btn btn-lg custom-button"
          role="button"
        >
          About Website
        </Link>
      </div>
    </div>
  </div>
</div>
);

I know this is a bootstrap style issue as in my app I am also using a bootstrap modal and it is not working either.

This is how I'm linking bootstrap to the project (As per tutorial) in file /app/javascript/packs/Index.jsx:

import React from "react";
import { render } from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import App from "../components/App";

document.addEventListener("DOMContentLoaded", () => {
  render(
    <App />,
    document.body.appendChild(document.createElement("div"))
  );
});

Hey @ayudh, Can you please tell me in which folder your bootstrap files are and how you link it in project — Ashwin Bhamare
@AshwinBhamare I've added an edit explaining how I link the bootstrap files in the project. We install bootstrap via yarn. — Ayudh

Ashwin Bhamare Ashwin Bhamare · Accepted Answer · 2019-12-24T11:56:53

@Ayudh, you can use Bootstrap in React Using Following Ways, try it hope it will solve your problem

navigate to your project's root folder and open the public/index.html file then add the following code in the section:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

If you need to use Bootstrap components that depend on JavaScript/jQuery in your React application, you also need to include jQuery, Popper.js, and Bootstrap.js in your document. Add the CDN before the closing </body> tag.

You can also import Bootstrap in your React application by installing it from npm.

$ npm install bootstrap --save

After installing the bootstrap package, you will need to import it in your React app entry file. open the src/index.js file and add the following code:

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

Install Jquery

$ npm install jquery popper.js

Next, go to the src/index.js file and add the following imports:

import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';

That's it. You can now use the full power of Bootstrap in your React application.

React & Rails - Bootstrap styling has gone in production

1 Answers