is there a way to use bootstrap 5 custom color directly in the class attribute?
There is no way to use $red-300
directly in CSS. It's only possible using SASS because $red-300
is a SASS variable.
However, the base colors are also available as CSS variables. For example, --bs-red
is the same as $red
and $red-500
. So, it could be used as a CSS variable like this...
.text-red-500 {
color: var(--bs-red);
}
CSS Demo
If you wanted to use SASS for $red-300
, it would be done like this:
@import "functions";
@import "variables";
.text-red-300 {
color: $red-300;
}
SASS demo
Bootstrap 5 - Custom theme-colors not updating classes
Bootstrap 5.1.0
A recent change to the way the text- and bg- classes are created requires additional SASS map merges in 5.1.0
@import "functions";
@import "variables";
@import "mixins";
$tertiary: #3fb247;
$custom-theme-colors:map-merge($theme-colors, (
"tertiary": $tertiary
));
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
@import "bootstrap";
Bootstrap 5.0.2
You need to add a "tertiary" var to the theme-colors map using map-merge
if you want it to generate classes like bg-tertiary
, btn-tertiary
, etc...
@import "functions";
@import "variables";
@import "mixins";
$tertiary: #3fb247;
$theme-colors:map-merge($theme-colors, (
"tertiary": $tertiary
));
@import "bootstrap";
Demo
How to add custom color to the already existing bootstrap navbars
Just remove the bg-dark
class from nav
.
.navbar-custom{
background-color:yellow;
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-light navbar-custom">
<ul><li>Home</li></ul>
</nav>
</body>
</html>
CSS use color from another class?
You may also want to look at the new CSS variables in Bootstrap 4. They will let you override colors, but you'll need to redefine the CSS class.
CSS variables offer similar flexibility to Sass’s variables, but
without the need for compilation before being served to the browser.
For example:
.text-teal {
color: var(--teal);
}
Bootstrap 4 CSS Variables Demo
Bootstrap table striped: How do I change the stripe background colour?
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: red;
}
add this line into your style.css after main bootstrap.css
or you could use (odd) or (even) instead of (2n+1)
Change Bootstrap tooltip color
You can use this way:
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="" data-original-title="Tooltip on bottom"
class="red-tooltip">Tooltip on bottom</a>
And in the CSS:
.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
jsFiddle
Moeen MH: With the most recent version of bootstrap, you may need to do this in order to get rid of black arrow:
.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}
Use this for Bootstrap 4:
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00; /* Red */
}
Full Snippet:
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
.tooltip-main {
width: 15px;
height: 15px;
border-radius: 50%;
font-weight: 700;
background: #f3f3f3;
border: 1px solid #737373;
color: #737373;
margin: 4px 121px 0 5px;
float: right;
text-align: left !important;
}
.tooltip-qm {
float: left;
margin: -2px 0px 3px 4px;
font-size: 12px;
}
.tooltip-inner {
max-width: 236px !important;
height: 76px;
font-size: 12px;
padding: 10px 15px 10px 20px;
background: #FFFFFF;
color: rgba(0, 0, 0, .7);
border: 1px solid #737373;
text-align: left;
}
.tooltip.show {
opacity: 1;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00;
/* Red */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00;
/* Red */
}
</style>
How to change the css of color of select2 tags?
First up - a warning that this means you are overriding the CSS that is internal to select2, so if select2 code changes at a later date, you will also have to change your code. There is no formatChoiceCSS
method at the moment (though it would be useful).
To change the default color, you will have to override the various CSS properties of the tag which has this CSS class:
.select2-search-choice {
background-color: #56a600;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
-moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
color: #333;
border: 1px solid #aaaaaa;
}
To change the class of each tag based on the text or option # of that tag, you will have to add a change event:
$("#select2_element").on("change", function(e) {
if (e.added) {
// You can add other filters here like
// if e.val == option_x_of_interest or
// if e.added.text == some_text_of_interest
// Then add a custom CSS class my-custom-css to the <li> added
$('.select2-search-choice:not(.my-custom-css)', this).addClass('my-custom-css');
}
});
And you can define a custom background-color etc in this class:
li.my-custom-css {
background-color: // etc etc
}
Related Topics
How to Make an <A> 100% Height of <Li>
How to Give Class to a Host Element in Angular 2 with @Hostbinding
How to Set Super Thin "Font-Weight" (Less Than 100) in CSS
Label: Hover Attribute Triggers Incorrect Element in Ie10 and Ie11
Flex-Flow: Column Wrap. How to Set Container's Width Equal to Content
CSS: Link and: Visited Pseudo-Classes - Are Web Browsers Adhering to The Spec
How to Use CSS to Justify Text with Hyphenating Words at The End of a Line
Media Query to Target Most of Smartphone
Advanced Custom Syntax Coloring for Aptana Studio 3 (.Less)
How to Use Float Without Flipping Floated Item and Changing in Source Order? Is This Possible
Angular Error: Postcss Received Undefined Instead of CSS String
Why Does The Overflow-Y Property Not Work with Percent Height
Remove White Space Under Footer