Struggling to effectively customize a bootstrap theme

After incorporating a custom .css file from an internet theme that overrides some bootstrap properties, I noticed that it works in certain scenarios. However, when attempting to modify the primary color in the :root{} section of the styles.css file, the changes do not seem to take effect. Additionally, how can I ensure consistent use of bootstrap syntax in my renders?

Root of styles.css

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #1abc9c;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #1abc9c;
    --secondary: #2c3e50;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #ffc107;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

Bootstrap Syntax

<Navbar bg="light" expand="lg" bg="dark" variant="dark">
cssreactjssassreact-bootstrap

Answer №1

Changing the Bootstrap theme using RGB codes isn't an option, as you need to utilize the preset themes provided by Bootstrap.

Answer №2

When using Bootstrap, you are not only getting its core CSS classes but also a "reboot" style sheet that modifies the styles of core HTML5 elements. This reboot includes adjustments to the html and body elements that affect text-based properties inherited from the browser. While they refer to these changes as a "reboot," it is essentially a simplified version of a "reset" style sheet. This particular sheet targets a selection of HTML5 elements and resets certain style properties before applying Bootstrap's custom classes on top. In my experience, I have noticed that Bootstrap's less refined reset can lead to confusion and unexpected alterations in the appearance of default browser elements before adding any Bootstrap styles.

To mitigate this issue, I have created a Bootstrap "cleaner" style sheet that removes these default styles while still allowing you to utilize Bootstrap's standard classes. This solution grants more control over text-based inheritance, styling modifications on html and body elements, and box model adjustments that may not be fully supported in older browsers. I am willing to share this sheet upon request.

Here is a brief excerpt from the Bootstrap Cleaner Style Sheet, demonstrating how you can eliminate Bootstrap's default fonts and colors without interfering with your use of custom classes:

html body {
    display: block;
    margin: initial;
    zoom: 1;
    font-family: sans-serif;
    font-size: initial;
    padding: initial;
    font-weight: normal;
    line-height: normal;
    color: initial;
    text-align: initial;
    background-color: initial;
    all: revert;
}

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

React route with custom webpack configuration is disrupted by subdirectories in the URL

In my user interface, I have set up a page to display a list of items along with a form for adding new ones. However, when I try to access the "New Company" link, I encounter a 404 error and see a blank screen indicating that it cannot find the main.js fil ...

reactjswebpackreact-router

Determining parent height through the positioning of children

When it comes to CSS, it's truly fascinating until you hit a roadblock and the "aha moment" seems elusive. Today, I'm struggling with adjusting the height of my parent div that contains a relatively positioned element. The issue arises from the ...

htmlcsscss-position

Move the absolute div by sliding it to the left from 120% to -10px

I want to move an absolute positioned div from the left side of the screen to -10px on button click. Here's my attempt so far, but it's not working as expected. Javascript/jQuery $('.button').click(function() { $(this).parent().f ...

javascriptjqueryhtmlcss

Help! I can't figure out what I'm doing wrong with componentDidUpdate

I'm facing an issue with displaying error messages from the backend on the frontend using the MERN stack. Although I can see the error messages in the developer tools, they are not showing up on the UI. I am utilizing Redux as the state manager. The c ...

node.jsreactjsmongodbexpressredux

Struggling to align the Bootstrap list-group container in the middle

Good day to you! I'm currently working on a sidebar layout using Bootstrap's list-group and I need to set a specific width to ensure it aligns properly with the other elements above and below it. However, when I try setting the width to 300px, t ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a lack of information on styling material-ui's card components?

Is there a way to customize the styling of material-ui's card components? I've looked at getMuiTheme on the github page, but it only mentions a few customizable properties and doesn't provide any information about changing colors. Anyone hav ...

reactjsmaterial-ui

Content within a scrollable div in IE7 only loads once the user starts scrolling

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

jqueryhtmlcssinternet-explorer-7

The NextJS page does not import any component from the "external" package of turborepo

I am facing a challenge with my small atomic packages in a monorepo using TurboRepo. These packages need to be published and versioned independently, but I encountered an issue when trying to get CSS styles applied to them in my Next.js application (/apps/ ...

next.jssassvitecss-modulesturborepo

Stop a function from executing in React when a variable is altered

In my code, I am dealing with a form that includes a checkbox and text input field. const [formValues, setFormValues] = useState({checkbox: true}); const submitForm = () => { console.log(formValues); } render ( <Checkbox checked={formValues.chec ...

reactjsmaterial-ui

What is the best way to align the checkbox and label in a React form?

I've been struggling to align the labels next to the checkboxes on this form. I'm currently utilizing React with React-Hook-Form for validation and state management (you can find the code on GitHub: https://github.com/cipdv/ciprmt-mern/blob/main/ ...

cssreactjsformsreact-hook-form

Incorporating various language URLs in Next.js using next-i18n-next functionality

Thinking about using the next-i18next internationalization library. Check out next-i18next on GitHub Curious about how to change the language in the path of my URL. For example: /about-us /over-ons -> takes you to the Dutch version of the about us p ...

javascriptreactjsurlnext.jsi18next

Moving the layout container towards the left: a quick guide

I am currently attempting to display the legend contents in a horizontal alignment within the layout container. The issue is that while the layout containing the legend aligns horizontally as desired, it extends beyond the screen border. I do not want the ...

javascripthtmlcssangular

Tips on how to use console.log in react-simple-chatbot

I am currently working on a chatbot project and would like to add some features such as sending emails and popups. However, I am facing an issue with console logging elements in my code. Here is the snippet of my code: import React from "react"; ...

javascriptreactjsbotschatbot

Display a loading message before fetching remote data in the Bootstrap modal box

Here is the code I am using to load remote PHP data into a Bootstrap modal box: $(function() { $(window).bind("resize", function() { if ($(this).width() < 400) { $('#tabs-content').removeClass('col-xs-10').ad ...

phpjquerycsstwitter-bootstrap-3bootstrap-modal

Having difficulty with installing node-sass in my react application

After installing locomotive-scroll, I encountered issues trying to install node-sass in my react app. When running the command npm install node-sass, I received an error with the message ERR_SOCKET_TIMEOUT. Furthermore, attempting to execute npm start resu ...

reactjsnpmsassnode-sasslocomotive-scroll

What could be causing the movement of my main navigation links when hovering over another top-level element?

I am struggling to pinpoint the origin of a particular issue I am encountering with my menu. The problem arises when I hover over a top-level element, causing all elements below it to shift to the right: (Take note of the top-level elements being affected ...

htmlcss

Incorporating photos within the layout of a Twitter Bootstrap grid

Looking to showcase images like the ones found here: https://i.stack.imgur.com/eD4GD.jpg These images are original and come in various sizes. I want a hover effect that includes blur, fogging effects, and text placed in the middle of the picture. Check ou ...

htmlcssimagetwitter-bootstrap

Creating an extra dialogue box when a button is clicked in React

Having an issue with displaying a loading screen pop-up. I have an imported component named LoadingDialog that should render when the state property "loading" is true. When a user clicks a button on the current component, it triggers an API call that chang ...

javascriptreactjsmaterial-ui

Tips on concealing the scrollbar only when a particular element is visible

I inserted the following code into my index.html file: <head> <style> body::-webkit-scrollbar { display: none; } </style> </head> This code successfully hides the scrollbar. My goal is to only h ...

cssangular

Is there a way to create an image gallery layout similar to Pinterest using CSS?

I am currently developing a dynamic PHP gallery that will feature thumbnails with the same width but varying heights. These thumbnails will be arranged from left to right, so I would prefer not to use a traditional five-column layout. I suspect that achiev ...

javascriptjquerycssgallery