just like this:
<span class="text-primary">some text</span>I'm curious if there's a way to achieve the following:
<span class="text-red-300">some text</span>The red-300 color in Bootstrap 5 is a custom color option, and you can find more like it in the link below. https://getbootstrap.com/docs/5.0/customize/color/
Directly using $red-300 in CSS is not supported. SASS is required as it recognizes $red-300 as a SASS variable.
However, you can access the base colors as CSS variables. For instance, --bs-red is equivalent to $red and $red-500, allowing it to be used as a CSS variable in this way...
.text-red-500 {
color: var(--bs-red);
}
See CSS Demo
If you prefer to use SASS for $red-300, the implementation would look like this:
@import "functions";
@import "variables";
.text-red-300 {
color: $red-300;
}
View SASS demo
There are no pre-existing Bootstrap native classes or mixins available for this specific task, but fear not! Bootstrap is designed to be easily extended: By using SASS, you can extend Bootstrap and generate the necessary helper classes on the go.
NOTE: The SASS code snippet provided below is tailored to address YOUR QUESTION (= all colors = 900 extra helper classes). You might consider customizing the code to only include the color classes that you truly require to minimize the additional code. Feel free to modify the code according to your preferences.
//### Ensure that you have imported bootstrap functions & variables beforehand
@import 'functions';
@import 'variables';
//### SASS function for extending Bootstrap
//### --> a quick and basic demo example!!!
@mixin make-color-classes( $class_prefix, $color_name, $color ){
// positive values = tint | negative values = shade
$swatch_variations: (80%, 60%, 40%, 20%, 0, -20%, -40%, -60%, -80%);
$i: 1;
@each $variation in $swatch_variations {
// process bootstrap color
@if ($variation > 0){
$swatch_color: tint($color);
}@else if ($variation < 0) {
$variation: $variation * -1;
$swatch_color: shade($color);
}@else{
$swatch_color: $color;
}
// generate class
$color_number: $i * 100;
.#{$class_prefix}-#{$color_name}-#{$color_number} {
color: tint-color($color, $variation );
}
$i: $i + 1;
}
}
//### NOW:
//### generate helper classes for a single color
@include make-color-classes('text', 'blue', $blue);
//### NOW ENHANCED:
//### generate helper classes for all named default bootstrap colors
$colors_to_use: $colors;
@each $color_name, $color in $colors_to_use {
@include make-color-classes('text', $color_name, $color);
}
<ul style="background: blue; list-style: none; width: 40px; height: 40px; color: white"> <li style="float: left; width: 20px; background: red">a</li> <li style="float: left; width: 20px; background: green; height: 40px">b</li ...
Something strange is happening with the styling of my button. There seems to be an outline around it that I can't explain. Can anyone help me understand why this is happening? button { padding: 1em; background: transparent; border: none; } ...
I am trying to implement page navigation using the Bootstrap List-group class in HTML. However, I am facing an issue where the nested links 'Link 1' and 'Link 2' freeze after the first click. The desired functionality is as follows: ...
TL;DR: How can I make IE7 load all hidden elements within a scrollable div? I'm creating a collapsible menu for easy navigation through a series of pages. This menu has two states: collapsed and expanded. Think of the menu items as chapters in a b ...
My <p> tag is set to contain several lines of text with a specific CSS class, but I am looking to modify the text format within certain parts of the paragraph. In the past, I would achieve this using the <font> tag, however it seems that HTML5 ...
I've encountered a strange issue while working with Angular dialogs: A vertical scrollbar unexpectedly appears, even though I've set the dialog to have a fixed width. component.ts const dialog = this.dialog.open(DialogComponent, { width: ...
I have a unique structure on one of my pages that I want to use for a tooltip style behavior. When the "container" element is clicked, the "child" element, which is initially hidden, should appear above the container. However, since the child's height ...
I'm attempting to create a data grid-style layout where the left side is fixed and only the right side is scrollable. However, the entire div needs to be vertically scrollable. The concept is functioning correctly, but the horizontal scrollbar appears ...
I am currently utilizing the Grid component from Material UI. I'm facing an issue where the image inside a Grid item is aligned to the left instead of being centered. <Grid container direction="row" justify="center" alignIte ...
Is there a way to display lines in a text-area to give it the appearance of a notepad? I only have one text-area available. See the example notepad below for reference. ...
When I look at the code in Firefox's inspector, I notice this : element { order:35; } Can a color be assigned to it? I am customizing my year outlook calendar and have set a particular day to display in a different color. But when I click on the mo ...
When using jQuery to create dynamic buttons, is there a way to add a CSS class to the button during creation without needing an extra line of JavaScript to add the class afterwards? Below is a example code snippet: $.each(data, function (index, value) { ...
Here is the current appearance of the cross button in IE/Edge: https://i.sstatic.net/JZ37V.png And here is how it is supposed to look: https://i.sstatic.net/Uqafg.png Upon inspecting the CSS, it reveals that the #10006 html character has a color code o ...
I am working on a simple layout structure with 2 rows: Row 1 consists of 2 columns Row 2 consists of 1 column The goal is to have both rows expand in width and avoid vertical scrolling of the page. However, when resizing the screen, I want the columns of ...
Hello, I am attempting to vertically align text next to my radio button but encountering some issues. .radio { cursor: pointer; display: inline-flex; } .cui-a-radio-button__input { display: none; } .cui-a-radio-button__input:disabled + .cui-a-rad ...
I'm facing an issue with the ease out transition not working as expected. I need the side to slide in from left to right with a duration of 500ms. Despite trying various solutions, I can't seem to figure out why it's not functioning properly ...
I am attempting to convert a set of two radio buttons into a stack of two labels, one blue and one gray, to represent the selected radio button and the unselected one. Clicking on this stack will toggle which label is blue (and consequently which radio but ...
I need help with a CSS issue involving hiding one div on mouse hover and showing another instead. I attempted to achieve this using pure CSS, but both divs end up hidden. Would jQuery be necessary for this task? Below is the CSS/HTML code I wrote: .r ...
Visit this link to view the code My Goal: I want the hover effect that normally applies to buttons when hovered over, to instead be applied when a user hovers over the parent div containing those buttons. The parent divs in question have a class of "ser ...
While working on an app in Ionic Framework, I encountered a peculiar issue. https://i.stack.imgur.com/xk8uD.png In my Ionic Framework application, I am importing @font-face and running the app on an Android device (Galaxy SIII). Strangely, the font (Mont ...