TechQA.

I want to use bootstrap's cdn in my react project. Where and how do I insert the cdn?

9.2k views Asked by At

I am currently working on a React single page application and I cannot figure out where and how to place the Bootstrap CDN in my project for my bootstrap to work.

Also if somebody could suggest how to npm install bootstrap for your project.

reactjs twitter-bootstrap-2
Original Q&A
3

There are 3 answers

0
Tanvir Raj On BEST ANSWER

If you use create-react-app there is a file in public/index.html or let's say in your index html page which you first render use cdn there like

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">  
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <title>React App</title>
  </head>
0
Daniel Taub On

CDN 

<HTML>
        <head>
    <!-- YOU CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        </head>
        <body></body>
        </HTML>

npm

npm install bootstrap@3

require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery object. The bootstrap module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the /js/*.js files under the package's top-level directory.

Bootstrap's package.json contains some additional metadata under the following keys:

less - path to Bootstrap's main Less source file style - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)

0
Om Fuke On 
npm install --save bootstrap

after this import this in App.js

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

Related Questions in REACTJS

Related Questions in TWITTER-BOOTSTRAP-2

Popular Questions

Trending Questions