AngularJS: Bootstrap Grid not moving content

Datetime:2016-08-22 22:20:09          Topic: Bootstrap  AngularJS           Share

I can't seem to figure out why the bootstrap grid isn't moving my content. there is the library imported, no stray divs, container then row and then col-md-#, but the content never moves. Any suggestions?

<!DOCTYPE html>

<html ng-app="DirectivesTest">

<head>

<title>Directives Practice</title>

<link rel="stylesheet" href="app.css">

<script src="bower_components/angular/angular.js"></script>

<script src="bower_components/jquery/dist/jquery.js"></script>

<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>

<script src="app.js"></script>

</head>

<body>

<div class="container">

<div class="row">

<div id="header">

Book Review Site

</div>

</div> <!–end row–>

</div> <!–end container–>

<div class="container">

<div ng-controller="BookController">

<div class="content" ng-repeat="book in books">

<div class="row">

<div class="col-md-offset-3 col-md-4">

{{book.title}}

</div>

</div>

<div class="row">

<div class="col-md-offset-4 col-md-4">

{{"Reviews"}}

</div>

</div>

<div ng-repeat="bookReview in book.review">

<div class="row">

<div class="col-md-offset-4 col-md-4">

{{bookReview.body}}

</div>

</div>

</div>

</div> <!–End parent ng-repeat–>

</div>

</div>

<book-reviews></book-reviews>

</body>

</html>

Solution :

You're missing bootstrap css library, include that before the app.css every thing well work.

Here is the cdn path

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />





About List