I am using angular, bootstrap and jquery to populate buttons using json. However when i set the styling to style it like this:
it shows up like this:
so how can i get bootstrap to render the buttons correctly?
Stackoverflow code preview isn't working. Plunk for project is here:
var bridgeCreek = angular.module('bridgeCreek', []);
bridgeCreek.controller('MyController', ['$scope', '$http', function($scope, $http) {
$http.get('.json').success(function(data) {
$scope.navigation = data;
});
}]);<!DOCTYPE html>
<html ng-app="bridgeCreek">
<head>
<link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body ng-controller="MyController">
<ul class="nav navbar-right navbar-nav">
<li ng-repeat="item in navigation">
<button type="button" class="btn btn-inverse btn-sm">
<span ng-class="item.glyph" aria-hidden="true"></span> {{item.text}}
</button>
</li>
</ul>
<script data-require="jquery@*" data-semver="2.1.3" src=".1.3.min.js"></script>
<script data-require="angular.js@*" data-semver="1.4.0-beta.5" src=".4.0-beta.5/angular.js"></script>
<script src="script.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>I am using angular, bootstrap and jquery to populate buttons using json. However when i set the styling to style it like this:
it shows up like this:
so how can i get bootstrap to render the buttons correctly?
Stackoverflow code preview isn't working. Plunk for project is here: http://plnkr.co/edit/FmK38oyDRZzWOTstoaEo
var bridgeCreek = angular.module('bridgeCreek', []);
bridgeCreek.controller('MyController', ['$scope', '$http', function($scope, $http) {
$http.get('http://www.zaithe./demos/bridgeCreek/js/json/navigation.json').success(function(data) {
$scope.navigation = data;
});
}]);<!DOCTYPE html>
<html ng-app="bridgeCreek">
<head>
<link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn./bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body ng-controller="MyController">
<ul class="nav navbar-right navbar-nav">
<li ng-repeat="item in navigation">
<button type="button" class="btn btn-inverse btn-sm">
<span ng-class="item.glyph" aria-hidden="true"></span> {{item.text}}
</button>
</li>
</ul>
<script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery./jquery-2.1.3.min.js"></script>
<script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs/1.4.0-beta.5/angular.js"></script>
<script src="script.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn./bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>1 Answer
Reset to default 8I had a look at the styles associated with your button elements and there is no style for btn-inverse. Which means you are missing the css files you need.
I just checked the bootstrap docs and it looks like btn-inverse has been discontinued so that is probably why you are missing the css :-(
This text is from their docs:
Changes to Button Color Classes
Add btn-default to btn elements with no other color. Replace btn-inverse with btn-default since inverse has been removed from Bootstrap 3.