Enhance Your Map with Bootstrap 4 - Integrate a Unique Theme Color

Is there a way to incorporate a new custom theme color without having to modify the bootstrap variable.scss file directly?

I have successfully updated existing colors, but I am struggling to add a completely new theme color using the same method.

File structure 

@import 'custom_variables';
@import './bootstrap/bootstrap'; 
@import './pages/home';

custome_variables.scss

$theme-colors: (
    "primary": #2c67f4, // successfully edited existing color  
    "danger": #ff4136,
    "custom" : "red" // not working when adding new color theme
);

Tried with code but no luck

$theme-colors: map-merge(
  (
    "custom":  "red",
  ),
  $theme-colors
);

Reference

htmlcsstwitter-bootstrapsassbootstrap-4

Answer №1

Make sure to start by importing the necessary variables...

/* include all required Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
    "primary": #2c67f4,
    "danger": #ff4136,
    "custom" : red
);

@import "bootstrap";

Check out this link for more details

For further reference, visit: Customizing Bootstrap CSS template

Answer №2

$custom-colors: (
  "primary": #900
);
<button class="btn btn-primary">Get started now</button>

Give this a shot! It did the trick for me.

Answer №3

Organizing bootstrap changes requires careful attention to the order of imports. I took it a step further by utilizing an updated mapping method to create a comprehensive summary of all colors. Surprisingly, my new colors were not included in the theme-colors as expected. While they worked fine, the all-colors mapping only reflected my local update. To resolve this, I had to reimport the updated variable from bootstrap. Below is the structure of my assets:

_variables.scss

@import "~bootstrap/scss/functions"; // import necessary elements
@import "~bootstrap/scss/variables";              

$theme-colors: (                                   
    'error': $danger,                              
    'warn': $warning,                              
);                                               

// Reimporting for updated mapping instead of just local                                                   
@import "~bootstrap/scss/variables";           

$all-colors: () !default;                          
$all-colors: map-merge($all-colors, $theme-colors);
$all-colors: map-merge($all-colors, $colors);      
$all-colors: map-merge($all-colors, $grays);

style.scss

@import 'variables';                  
@import 'exports';                    
@import 'functions';                  
@import '~bootstrap/scss/bootstrap'; 
@import 'custom';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update the variable obtained from the user input and insert it into a new container depending on the input value

In reference to my previous inquiries, I refrain from adding more details to avoid confusion since it already received numerous responses. While I can successfully retrieve input from a text field with the ID 'test' and display it in the 'r ...

javascripthtml

Chrome Extension to Emphasize Every Word

As a novice, I am embarking on the journey of creating my own chrome extension. The idea is to design a popup.html file that showcases a "highlight" button. The functionality would involve clicking this button to highlight all words on the page. Here&apos ...

javascripthtmlgoogle-chromegoogle-chrome-extension

How can the entire menu be closed in Bootstrap 5 when clicking on a link or outside of the page?

I'm currently utilizing BootStrap 5 for constructing my webpage. Within my page, I have a NavBar Menu containing various links. <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

javascripthtmlcssbootstrap-5

Encountering a persistent GET error in the console while working on a project involving a cocktail API

Programming: const API_URL = "www.mycocktaildb.com/api/json/v1/1/search.php?s="; const $cocktailName = $('#cocktailName'); const $instructions = $('instructions'); const $form = $('form'); const $input = $(`inpu ...

javascripthtmljquery

Creating a dynamic Bootstrap card body with an image using Vue.js and integrating it with Firestore cloud DB and a local image source

I'm in the process of developing a compact Vue js page named AddItem.vue which will store the following data. data (){ dish_name: null, dish_description: null, dish_type: null, dish_image: null } The plan is to have a boo ...

vue.jsbootstrap-4google-cloud-firestoreaxios

When switching tabs in Javascript, the page does not automatically reload. However, the page will reload only when it is on

After writing a code using javascript/Youtube API + PHP to fetch a YT video ID from a MySQL server and place it in Javascript, I realized that the page only reloads when the tab is active and not when it's in the background. This issue disrupts the wh ...

javascriptphpjqueryhtmlgoogle-chrome

Tips for manipulating SVG in a 3D realm using CSS

I'm struggling with creating a spinning animation using a `svg` that contains three `polygons`. I want to rotate each of them horizontally in 3D space, but the animation appears flat. Below is the code snippet showcasing the three polygons with classe ...

htmlcssanimationsvg

It seems that in Laravel 5.3, it's challenging to add a script to a view for an autocomplete

Currently, I am working with Laravel 5.3 for my internship. However, I have encountered a frustrating issue that I need help with: I am trying to implement an "autocomplete" field on a page, but it doesn't seem to be functioning correctly. The error ...

javascriptphpjqueryhtmllaravel-5.3

Guide to displaying database results in an HTML dropdown menu by utilizing AJAX technology

Greetings! As a newcomer to the realms of PHP and AJAX, I am currently on a quest to showcase the outcomes of a query within an HTML dropdown using AJAX. Let's delve into my PHP code: $pro1 = mysqli_query("select email from groups"); I made an attemp ...

javascriptphphtmljqueryajax

Tips on implementing SCSS styles in my create-react-app application along with Material UI components?

I recently developed a React app using Create-React-App, and now I am looking to incorporate Material UI with styling through SCSS. https://i.sstatic.net/JLEjX.png To manage my styles, I created a main.css file using node-sass. While attempting to apply ...

cssreactjssassmaterial-ui

Having trouble with my CSS hover not functioning properly

I need some help with my code. Can you please take a look and let me know why the hover effect is not working? Thank you! <style> #moreDiscussHome:hover{ background-color: #ffffff; } </style> <a id="moreDiscussHome" style="co ...

css

Adding HTML attributes to a VueJS table allows for more customization and control

Is it possible to incorporate HTML/Bootstrap elements into a cell in VueJS? <b-table striped show-empty :items="filtered"> <template slot="top-row" slot-scope="{ fields }"> <td v-for="field in fields& ...

htmlvue.jsvuejs2frontendbootstrap-vue

Can you explain the contrast between open and closed shadow DOM encapsulation modes?

My goal is to create a shadow DOM for an element in order to display elements for a Chrome extension without being affected by the page's styles. After discovering that Element.createShadowRoot was deprecated, I turned to Element.attachShadow. Howeve ...

javascripthtmldomshadow-dom

Pan motion gesture above HTML components

Is it possible to create a hovering effect over elements in a container using a pan gesture? https://i.sstatic.net/E6G56.gif Here's the HTML code: <div class="container"> <div class="item"></div> <div class="item"></div ...

javascripthtmlgesturehammer.jspan

Is it possible for Penthouse to retrieve critical CSS while using javascript?

I am currently utilizing the laravel-mix-criticalcss npm package to extract the critical CSS of my website. This package leverages Penthouse under the hood, and you can configure Penthouse settings in your webpack.mix.js within the critical options. The ...

javascriptcssnpmlaravel-mixcritical-css

Using jQuery to Retrieve the Background Color of an HTML Element

Suppose I have an element with the background color set using HTML like this: <div id='foo' bgcolor='red'/> Is there a way to retrieve the background color using jQuery? When I attempt $('#foo').css( "background-color" ...

jqueryhtml

Having issues with React Nivo tooltip functionality not functioning properly on specific graphs

While using Nivo ResponsivePie to visualize some data, everything is functioning properly except for the tooltip. For some reason, the tooltip isn't appearing as it should. Interestingly, I have a heatmap and a bar graph with tooltips that are working ...

javascriptcssreactjsnivo-react

jQuery counter no longer updates when scrolling

I'm having trouble with my jQuery counting function when using the scroll feature on a specific div ID. The numbers freeze if I keep scrolling before they finish updating on the screen. Whenever I scroll to the defined div ID, the counting function k ...

javascripthtmljquerycss

Tips for organizing an AngularJS bootstrap Modal for a search feature

I need help with integrating AngularJs, bootstrap, and an API to populate a bootstrap modal popover with JSON data upon clicking a search function button. While I have successfully implemented the data flow, I am struggling to trigger the modal using the b ...

javascriptjqueryangularjsjsontwitter-bootstrap

The function cannot be applied to the size of the map within the action payload

Is there a way to replace the for loop with the map method? The data structure for book.pages is in the format [{},{},{}] I tried using the size method and included this line console.log("book.pages.map.size();--->", book.pages.map.si ...

javascripthtmlreactjsloopsredux