AngularJS bootstrap ui - how do I change css styles?
angular-bootstrap, angularjs, css, twitter-bootstrap
Solution
If you include your css (site-specific.css) after Bootstrap's (bootstrap.css), you can override rules by redefining them.
For example, if this is how you include CSS in your `<head>`
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />
You can simply override the panel (in your site-specific.css file):
.panel {
//your code here
}
And do not bother template change in the future. As you use a specific version, updates will not effect you. They are generating a new template with a new version name.
Problem
I am using bootstrap UI with AngularJS directives and I want to change the default styles bootstrap applies for its elements. Should I target the HTML contents from the template? Based on the examples given in the documentation I want to use the accordion. When I define it in HTML, it has the following structure: ``` <accordion> <accordion-group heading="my heading"> content here </accordion-group> ``` But when the directive processes the template it turns it into the following HTML: ``` <accordion close-others="oneAtATime"><div class="panel-group" ng-transclude=""> <div class="panel panel-default ng-isolate-scope" heading="my heading"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"> <span ng-class="{'text-muted': isDisabled}" class="ng-binding">content here</span> </a> </h4> </div> <div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;"> <div class="panel-body" ng-transclude=""><span class="ng-scope">some content here</span></div> </div> ``` As you can see, it changes it quite significantly. If I wanted to change how the panel title is displayed, should I write this in my css files? ``` div.panel {} ``` and hope that the template doesn't change in the future? What is the best approach to changing styles for HTML elements generated by a directive's templates?