Colors in Bootstrap Custom Download

How to change the bootstrap primary color?

Bootstrap 5 (update 2021)

The method is still the same for Bootstrap 5.

https://codeply.com/p/iauLPArGqE

Bootstrap 4

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the !default values...

$primary: purple;
$danger: red;

@import "bootstrap";

Demo: https://codeply.com/go/f5OmhIdre3

---

In some cases, you may want to set a new color from another existing Bootstrap variable. For this @import the functions and variables first so they can be referenced in the customizations...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

Demo: https://codeply.com/go/lobGxGgfZE

---

Also see: this answer, this answer or changing the button color in (CSS or SASS)

---

It's also possible to change the primary color with CSS only but it requires a lot of additional CSS since there are many -primary variations (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc...) and some of these classes have slight colors variations on borders, hover, and active states. Therefore, if you must use CSS it's better to use target one component such as changing the primary button color.

Colors in Bootstrap custom download?

You can't add more LESS variables with the custom download tool. You can only redefine the values of the existing variables. Upon download, the tool compiles with those set variables but since you don't get the LESS files, you won't be able to add more variables afterwards, like @purpleLight you mentioned.

If you want to extend Bootstrap with more LESS variables, you have to download the full source and compile your css from the included LESS files. There's a file variables.less in the less/ folder where can add your @purpleLight.

Bootstrap: setting custom colors

You can overwrite bootstrap styles by adding "!important;"
For example in your html you might have something like this:

<button type="button" class="btn btn-primary">Primary</button>

You can change the color like this:

<button type="button" class="btn" style="background-color: #009c68!important;">Primary</button>

In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule. For more information you can go here.

If this answer does not work with your given situation, I would suggest looking into Bootstrap Theming. Documentation explaining how to customize Bootstrap 4 and modify existing colors can be found here.

How to control the colors of a download link on an HTML page

You can use this code when you want to download a file

<button class="btnx"><i class="fa fa-download"></i>Download the file</button>
<button type="button" class="btnx" onclick="download('/pathtodownloadfile')">
   <i class="fa fa-download"></i> Download the File
</button>
<p>
   <a href="images/Portfolio.pdf" class="btnx" download>
      <i class="fa fa-download"></i> Download CV
   </a>
</p>

<script>
    function download(uri) {
        var link = document.createElement('a');
        document.body.appendChild(link);
        link.download = uri.split("/").pop(); // this gets last segment of uri
        link.href = encodeURI(uri);
        link.click();
        document.body.removeChild(link);
    }
</script>

How to change btn color in Bootstrap

The easiest way to see which properties you need to override is to take a look at Bootstrap's source code, specifically the .button-variant mixin defined in mixins/buttons.less. You still need to override quite a lot of properties to get rid of all of the .btn-primary styling (e.g. :focus, disabled, usage in dropdowns etc).

A better way might be to:

1. Create your own customized version of Bootstrap using Bootstrap's online customization tool
2. Manually create your own color class, e.g. .btn-whatever
3. Use a LESS compiler and use the .button-variant mixin to create your own color class, e.g. .btn-whatever

How to change twitter bootstrap background color

Download all of the bootstrap files and somewhere inside the .css file add:

body {
   background:red !important;
}

How to change active link color in bootstrap css?

Finally with experiments I found how to capture it.

#top-menu .current a
{
    color: orange !important;
}

Thank you everyone for your time and help.
Much appreciated!

---

Related Topics