I'm trying to get it go with Bootstrap 4. All the dependencies I downloaded through Bower.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bower_components/bootstrap/scss/bootstrap.scss">
</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">
<!-- NAVIGATION -->
<!-- <nav class="navbar navbar-dark bg-dark " >
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>-->
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
<!-- MAIN CONTENT -->
<!--<div class="container">
<!– THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== –>
<div ui-view></div>
</div>-->
<button type="button" class="btn btn-success">Primary</button>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/popper.js/dist/popper.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</body>
</html>
I tried both syntaxes of Bootstrap 4 and Bootstrap 4.1 and nothing is working. I tried buttons/navs/dropdown nothing is working. What am I missing?
In your <head> you have <link rel="stylesheet" href="bower_components/bootstrap/scss/bootstrap.scss"> which will not work because you are referring to a .scss-file, which is a pre-processor for css that compiles your css on the server side and outputs .css for the browser. So you either need to compile the file to css or simple use the .css file in your <head> tag. For example:
<link rel="stylesheet" href="bower_components/bootstrap/css/bootstrap.css">
If you cannot get this working you can always use a CDN like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments