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>
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.
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';
Related
So I want to user Bootstrap 4.6 in my react app.
Based on this blog post I decided to add the link to the CDN (I don't want to use react bootstrap)
So I edited my template like this :
in the I added
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
And juste before closing the body I added
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<!--public/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="TS webapp" />
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Echino Portal</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>
I'm able to use what I will call "basic bootstrap" (row, col, ...) but the utilities don't work. For example if I want to add a margin top to a row I should be able to do like this :
<div class="row mt-15">...</div>
But there is no margin applied. What am I missing to have the utilities of bootstrap working?
Thanks
Thanks to #muhaymin khan there is the answer :
mt-15 is not gonna work they set margin and padding from 0 to 5 you can't use bigger number than that you should use mt-5 kindly read this docs getbootstrap.com/docs/4.6/utilities/spacing
There is a simple and working way of adding the bootstrap is by doing the following,
Step 1: npm install --save-dev bootstrap popper.js jquery
Step 2: add the path file 'bootstrap.min.css' in the index.js/App.js after the import path file of 'react' and 'react-dom'.
That's it. It will work like charm!
The first thing that I see wrong is that you use class same as in HTML, class word in react is replaced with className
<div className="row mt-15">...</div>
It should give you an error if you use just class
I am not familiar with this version of bootstrap but in the source code there is no class for mt-15
I saw here https://www.jquery-az.com/bootstrap-margin-padding-classes-spacing-explained-5-examples/
that you can use
mt-sm-3 and mb-sm-3 for top and bottom margin.
You can set margin also with style attribute in react
e.g.
style={{ marginBottom: 25 }}
It is shown on the link that you have posted.
Also I can advice you to use everything as module from npm, you can try the second part from the tutorial that you have posted
npm install bootstrap
I'm new to AngularJS. I'm attempting to convert a project I'm working on that used regular Javascript, jQuery, and Bootstrap into an AngularJS single page project and I'd like to keep using the Bootstrap library for it. I followed the instructions and downloaded the necessary files at http://angular-ui.github.io/bootstrap/ but when I try loading my project at http://localhost:5000 I get none of my page loaded and an error in the console. I downloaded angular-ui-bootstrap in my project with the command "npm install angular-ui-bootstrap" from my Node.JS command prompt
In index.html I have tried changing the order of the script and link tags in my head section to no success. I have also tried removing the 'ui.bootstrap' dependency in main.module.js to see if AngularJS works by only loading my 'recipeList' dependency and it does work.
From main.module.js:
angular.module('mainApp', ['ui.bootstrap', 'recipeList']);
From index.html:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="main.module.js"></script>
<script src="recipe-list\recipe-list.module.js"></script>
<script src="recipe-list\recipe-list.component.js"></script>
<title>Sousmate</title>
</head>
<body>
<div id="container">
<header>
<h1>Sousmate</h1>
</header>
<section>
<recipe-list></recipe-list>
</section>
</div>
</body>
</html>
Error: [$injector:modulerr] http://errors.angularjs.org/1.7.8/$injector/modulerr?p0=mainApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.7.8%2F%24injector%2Fmodulerr%3Fp0%3Dui.bootstrap%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.7.8%252F%2524injector%252Fnomod%253Fp0%253Dui.bootstrap%250AF%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A7%253A168%250AHe%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A26%253A453%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A25%253A478%250AHe%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A26%253A227%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A496%250Ar%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A8%253A76%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A344%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A43%253A27%250Ar%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A8%253A76%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A344%250Afb%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A46%253A460%250Ac%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A22%253A57%250AUc%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A22%253A370%250AAe%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A21%253A45%250A%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A348%253A494%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A38%253A444%250A%0AF%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A7%3A168%0Ag%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A43%3A285%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A8%3A76%0Ag%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A42%3A344%0Ag%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A43%3A27%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A8%3A76%0Ag%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A42%3A344%0Afb%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A46%3A460%0Ac%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A22%3A57%0AUc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A22%3A370%0AAe%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A21%3A45%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A348%3A494%0Ab%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A38%3A444%0A
The error is:
Module 'ui.bootstrap' is not available! You either misspelled the
module name or forgot to load it. If registering a module ensure that
you specify the dependencies as the second argument.
From your html I don't see that you've included the angular bootstrap js. You need this file along side your bootstrap css. You can download it here.
e.g.:
<script type="text/javascript" src="ui-bootstrap-tpls-2.5.0.min.js"></script>
Hope this helps!
I am rendering this component from the main component. I am facing issues with Modal in react-bootstrap. My modal is not showing up properly. i have attached the screenshot of how my modal looks. Please if anyone could help?
This is how my model shows up
https://i.stack.imgur.com/wvnmU.png
import React, { Component } from 'react';
import Button from 'react-bootstrap/lib/Button';
import Modal from 'react-bootstrap/lib/Modal';
class Add_Recipe extends Component {
constructor(){
super();
this.state={
showAdd: false
};
}
handleAddRecipe(e){
this.setState({showAdd: true});
}
close() {
this.setState({ showAdd: false });
}
render() {
return(
<div className="Add_Recipe">
<Button onClick ={this.handleAddRecipe.bind(this)} bsStyle="primary" bsSize="large"> Add Recipe </Button>
<Modal show={this.state.showAdd} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title id="modalTitle">Add a Recipe</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
Hello i am Modal..!!
</p>
</Modal.Body>
<Modal.Footer>
<p>
Hello I am Footer
</p>
</Modal.Footer>
</Modal>
</div>
);
}
}
export default Add_Recipe;
This is my index.html file
<!DOCTYPE html>
<html lang="en">
<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">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<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/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
This is my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
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.
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>
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)
npm install --save bootstrap
after this import this in App.js
import 'bootstrap/dist/css/bootstrap.min.css';
I want to use bootstrap in my angular project, and I'm looking at http://angular-ui.github.io/bootstrap/#/getting_started but it says one of the requirements is the bootstrap CSS.
How can I install only the CSS? What is the best way to do that? I have installed angular, angular-animate, and angular-bootstrap using bower. Just need to install the css.
Here's how I'll use it, please let me know if its correct -
<!DOCTYPE html>
<html>
<head>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap.js"></script>
</head>
<body>
....
</body>
</html>
Go to Bootstrap's Get Started Page. They give you several different options. Here's their CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
And Bower
$ bower install bootstrap
After you have your source just <link> to it within your <head>:
<!DOCTYPE html>
<html>
<head>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Bootstrap CSS Bower *check folder for correct file name -->
<link rel="stylesheet" href="/bower_components/bootstrap/bootstrap.css">
</head>
<body>
....
</body>
</html>
Your code is absolutely correct. You just need to download bootstrap from there website . that will have both CSS nd JavaScript. You should just add the CSS in your head tag
You can also install it through bower
Bower install bootstrap
After this check the bower_components folder to find bootstrap