How to import bootstrap and fontasome in index.html reactjs app

Question

Install bootstrap using this command (npm install bootstrap@4.0.0-alpha.6) and my index.html file is:

According issue I can add the css from other front framework (https://maxcdn.bootstrapcdn.com/), and make it work. I d

<!doctype html>
<html lang="en">
<head>
  <!-- The first thing in any HTML file should be the charset -->
  <meta charset="utf-8">
  <!-- Make the page mobile compatible -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Allow installing the app to the homescreen -->
  <link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <meta name="mobile-web-app-capable" content="yes">
  <title>Super Tax</title>
  <script type="text/javascript">
    (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
    ;r.type="text/javascript";r.async=true
    ;r.src="https://cdn.amplitude.com/libs/amplitude-4.0.0-min.gz.js"
    ;r.onload=function(){if(e.amplitude.runQueuedFunctions){
    e.amplitude.runQueuedFunctions()}else{
    console.log("[Amplitude] Error: could not load SDK")}}
    ;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
    ;function s(e,t){e.prototype[t]=function(){
    this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
    var o=function(){this._q=[];return this}
    ;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
    ;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
    ;return this}
    ;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
    ;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
    ;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","logEventWithTimestamp","logEventWithGroups","setSessionId"]
    ;function v(e){function t(t){e[t]=function(){
    e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
    for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
    e=(!e||e.length===0?"$default_instance":e).toLowerCase()
    ;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
    ;e.amplitude=n})(window,document);

    amplitude.getInstance().init("AMPLITUDE_KEY");
  </script>
</head>
<body>
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>,
  please <strong>enable JS</strong> to make this app work.
</noscript>

<!-- The app hooks into this div -->
<div id="app"></div>
<div id="message-container" style="display: none;" class="st-alert"></div>
<div id="connection-status" style="display: none;">
  <div>
    <span class="fa fa-circle margin-right-16" style="color: red;"></span>
    <span>You are offline</span>
  </div>
</div>
<div id="progress-bar-container">
  <div id="progress-bar"></div>
</div>
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
</body>
</html>

Download(https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css) in project folder like CSS, then give the path in index.html — Himanshu Pandey, May 23 '18 at 06:28
Okay. If you directly give the cdn path in index.html then its working .? — Himanshu Pandey, May 23 '18 at 06:34
Check out reactstrap. It has bootstrap components built for React. More here: https://reactstrap.github.io — raksheetbhat, May 23 '18 at 06:35

score 1 · Answer 1 · edited Sep 03 '21 at 10:10

To install bootstrap use the following npm command, in your react app.

npm install --save bootstrap

or

npm install --save bootstrap@latest

Once the bootstrap installation is complete. Then add the following import statement to index.js file.

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

or

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

For font awesome please refer How to include a Font Awesome icon in React's render(). Someone has posted in stackoverflow.

score 0 · Answer 2 · answered May 23 '18 at 18:18

If you installed Bootstrap using npm install:

Remove <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> from your index.html file.

Then, import the Bootstrap CSS file from node_modules into the root index.js file of your React app:

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

How to import bootstrap and fontasome in index.html reactjs app

2 Answers2