1

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!

4 Answers 4

5

This is an older question but the accepted answer isn't the most complete and/or future-proof. Here's what I'd recommend if you've got SASS compilation as part of your build step.

For example, if you want to add a new "tertiary" color to the generated CSS classes, eg text-tertiary, bg-tertiary, alert-tertiary, etc. we can use the following steps:

  1. Set up a .scss file that will contain all of your SCSS and bootstrap overrides.
@import "_variables";
@import "~bootstrap/scss/bootstrap.scss";
  1. Create your _variables.scss file for your bootstrap variable configurations/overrides:
@import "~bootstrap/scss/_functions.scss";
@import "~bootstrap/scss/_variables.scss";

// TODO: overwrite variables to style the app for the client's theme
$tertiary: #218f8b;

// Add "tertiary" styles to the generated classes
$theme-colors: (
  "tertiary": $tertiary,
);

Further reading: See the official bootstrap documentation for more on theming: https://getbootstrap.com/docs/4.0/getting-started/theming/#add-to-map

2

Are you looking for something like this?

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

.important,
.important a {
  color: #fff !important;
  background-color: #ffc107 !important;
  border-color: #ff9800 !important;
}
.important:active,
.important.active,
.important:focus,
.important.focus,
.important:hover,
.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>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <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>
      </ul>
    </div>
  </nav>

  <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>
</div>

<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>

4
  • Exactly! Is there a way to do that without rewriting every element Individually? (Like I said, probably something with SASS/LESS I didn't find yet)
    – Or Duer
    Jul 23, 2016 at 16:49
  • @OrDuer My answer offers a class that can be added to any element. Please explain what does the apply it everywhere just like the included classes phrase mean? Jul 23, 2016 at 17:16
  • My bad, made a small change to fit my needs and it worked perfectly. Thank you!
    – Or Duer
    Jul 23, 2016 at 17:25
  • @OrDuer Glad to be helpful. Please share what changes did you make? Jul 23, 2016 at 17:28
1

You may create a new class in bootstrap for another color. I recommend calling it something other than important since that is already being used combined with the exclamation mark '!important'. Instead, you could come up with another class name such as 'urgent' or 'extreme' or 'imperative' so there is no conflict. You can just add it to the bootstrap.css file like so:

.urgent { color: #ff0000; } /* Put any color you want */

If it is going to be simply used for some text, then you would just add it within the declaration:

<p class="urgent">Some text goes here</p>

If you are overriding the color of another class or classes but want all the other parameters of the other class(es) to continue to be valid you could put them together in the same declaration like so:

<p><a class="btn btn-default urgent" href="#" role="button">View details</a></p>

The 'urgent' color should override any colors set in the 'btn' or 'btn-default' classes since it comes after them in the declaration in this example.

0

Yes, you can declare variables in SASS Bootstrap is build with sass.

You can find the sourcecode here

In the file variable.scss you can find the declared colors.

for example:

 $custom-color: #5cb85c;

declares a new color, this can be used like:

.custom-class {
  color:$custom-color;
}

.another-class{
  color:$custom-color;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.