Or Duer Or Duer - 5 months ago 21
CSS Question

Adding a color class to Bootstrap

I have looked into Bootstrap, and noticed that there are few "color classes" included (primary, success, danger etc.)
I would like to know if there is a way to add more classes like those mentioned in easy way.

For example:
"primary" can be used with many elements, and will apply the defined color, and so does the other color classes.
Can I create a class named "important", define its colors and apply it everywhere just like the included classes, without making a version of it for each element individually (using plain css or any of the preprocessors )

Thank you!


Are you looking for something like this?

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.important a {
  color: #fff !important;
  background-color: #ffc107 !important;
  border-color: #ff9800 !important;
.important a:hover {
  background-color: #ff9800 !important;
  border-color: #ff5722 !important;
<div class="container">
  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      <a class="navbar-brand" href="#">Brand</a>

    <div class="collapse navbar-collapse" id="navbar-1">
      <ul class="nav navbar-nav">
        <li class="important"><a href="#">important item</a></li>
        <li><a class="important" href="#">important link</a></li>

  <div class="important">important block</div>

  <p>important <span class="important">text</span></p>

  <div class="alert important">important alert</div>

  <div class="well important">important well</div>

  <button class="btn important">important button</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>