CODEWITHSUNDEEP
javascriptcssreactjscdn
DevOps_N_Training
DevOps_N_Training

Reputation: 93

How to reference a CDN from my APP.css file

I am trying to get some style from a site for my very simple navbar react page I am still very new to react so I am unsure as to where to import the CDN style page link Currently , I have an index.js page which references my App.js page and my App.js page which references my App.css page

The CDN i am trying to reference is a basic bootstrap CDN https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css

And here is my App.js code

import React from 'react';
import './App.css';

function App() {
  return (
    <nav className="navbar navbar-default">
    <div className="container-fluid">
        <div className="navbar-header">
            <a className="navbar-brand" href="#">Some Navbar</a>
        </div>
        <ul className="nav navbar-nav">
            <li className="active"><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
        </ul>
    </div>
</nav>
  );
}

export default App;

Upvotes: 2

Views: 1931

Answers (1)

Ferin Patel
Ferin Patel

Reputation: 3978

You can add External CSS library in index.html page inside public directory.

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
  
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  
</body>

</html>

Upvotes: 1

Related Questions