Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 626
Yash Kalwani Avatar asked Jan 04 '23 21:01

Yash Kalwani


2 Answers

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>
like image 65
Tanvir Raj Avatar answered Jan 06 '23 10:01

Tanvir Raj


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)

like image 33
Daniel Taub Avatar answered Jan 06 '23 12:01

Daniel Taub