Overriding custom CSS with react-bootstrap styles

While attempting to utilize the react-bootstraps accordion component, I encountered the necessity of the import statement 

import "bootstrap/dist/css/bootstrap.min.css";
in order for the accordion to function properly. However, upon adding this import, my custom CSS styles were overridden by the bootstrap styles. Is there a method to ensure that my CSS takes precedence over the bootstrap CSS? Currently, I link my stylesheets using 
<link href="%PUBLIC_URL%/css/style.css" rel="stylesheet"/>
in my index.html file.

cssreactjsreact-bootstrapbootstrap-5

Answer №1

Make sure to structure your jsx code in a way that the link tag to your custom stylesheet is positioned below the bootstrap cdn. This is important because JavaScript code is compiled from top to bottom, meaning that your custom stylesheet will be compiled after the bootstrap cdn.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">

<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>

You can then apply styles based on specific classes, like so:

.alert{
background-color:red !important;
}

By doing this, you will be able to override the default bootstrap styling.

Pro tip: Import the bootstrap CDN for CSS in your index.html file to eliminate the need for a custom stylesheet altogether.

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

Getting the width of an element using a React ref is a helpful technique that allows you

I am struggling to retrieve the width of a select field using React Ref. https://i.sstatic.net/JJmqF.png this.selectRef.current is returning an object, but I can't seem to find a way to access the width of the element. <Select ful ...

javascriptreactjsmaterial-ui

What steps do I need to take to incorporate dialog-polyfill into my React application?

Incorporating Firebase and FirebaseUI in my React application for phone number registration has been successful on Google Chrome desktop. However, when testing it on different browsers, such as through , I encountered an issue with the country code selecto ...

javascriptreactjsfirebasenpmfirebase-authentication

Combining blend-mode and filter in CSS: A comprehensive guide

Looking to achieve a specific image style by transforming a full color photo in the following ways: Convert it to greyscale Adjust the black levels (via decreased opacity or brightness) Apply a "multiply" blend mode with a blue color overlay So far, I&a ...

jqueryhtmlcss

Traverse through an array of pictures and add the data to a Bootstrap placeholder within HTML markup

In my quest to create a function that populates placeholders in my HTML with images from an array, I am encountering a problem. Instead of assigning each image index to its corresponding placeholder index, the entire array of images is being placed in ever ...

javascriptjqueryhtmlcsstwitter-bootstrap

There are a few elements that seem to be absent from Material

I encountered an issue with Material UI where every component was working perfectly, but when I attempted to use ImageList and ImageListItem for the first time, I received the following error: ERROR in ./client/src/user-imageboard.js 3:0-52 Module not foun ...

reactjsmaterial-uicss-frameworks

What is the best way to design bootstrap-style menus in React using TailwindCSS or styled-components?

As I dive into learning React, I find myself torn between using TailwindCSS and styled-components. While I am attracted to the simplicity of styled-components, I am hesitant about the lack of pre-built features that TailwindCSS offers, especially in terms ...

cssreactjstailwind-cssstyled-componentsbootstrap-5

Difficulties in Adjusting the Size of Three Image Columns within a Website's Body

While working on my website layout, I encountered a problem with inserting three image columns in the body section. The images turned out to be too large and extended beyond the footer. Moreover, the third image was larger than expected, dominating the web ...

htmlcss

Adjusting the stock quantity of a product in the inventory system following a purchase transaction within an eCommerce platform, using MongoDB

Currently, I am developing an inventory management system utilizing MongoDB, ExpressJs, ReactJs, and Node.js. My query revolves around the process of updating a product's quantity after fulfilling an order. Allow me to elaborate: suppose a product&ap ...

node.jsreactjsmongodbexpress

Make sure to load dataLayer variables before setting up gtag in Google Tag Manager for seamless integration

In my NextJS application, I have a functionality that grabs the URL of the page and then uses utility functions to assign values to dataLayer key-value pairs like page_category and content_category. These values are then supposed to be added as custom dime ...

reactjsnext.jsgoogle-tag-managergtag.js

A comprehensive guide on properly obtaining user details in React with Redux and OIDC

Although I've dabbled in OIDC before, I wouldn't consider myself an expert. Currently, I'm trying to integrate OIDC into a react app using oidc-client-js and redux-oidc libraries, following the redux-oidc-example as a guide. Encountering th ...

javascriptreactjsreduxopenid-connect

The navigation bar is showing my logo in a blurry and small format when viewed on a desktop

Currently, Twitter Bootstrap is being utilized on my website and a high-resolution logo has been successfully uploaded. The dimensions of the logo are 529 x 100 pixels, and here is the relevant CSS: .navbar-brand { float: left; padding: 12px 15p ...

csstwitter-bootstrap

I'm curious about the process by which custom hooks retrieve data and the detailed pathway that custom hooks follow

//using Input HOOK I am curious to understand how this custom hook operates. import { useState } from "react"; export default initialValue => { const [value, setValue] = useState(initialValue); return { value, onChange: event =&g ...

javascriptreactjsmaterial-uireact-custom-hooks

The footer seems to detach on certain pages

Currently, I am facing a frustrating issue while working on a website. The footer seems to be disconnected from the main body content on certain pages, while on others, it appears to be properly attached. Despite my efforts to troubleshoot by removing elem ...

css

PHP: How to create a custom function to convert JSON data to HTML-encoded text

I am faced with a challenge involving an array containing values from a database, some of which include HTML tags. My goal is to output this array in JSON format, so I am utilizing json_encode for that purpose. However, I am encountering an issue when tr ...

javascriptphphtmlcssjson

Using Bootstrap to embed YouTube videos results in a sleek, modern design with distinctive black

When my screen is maximized on Chrome, I notice irritating black lines appearing on my responsive Youtube embeds. Unfortunately, I am unable to post an image due to lack of reputation. Specifically, when the video is paused, there is a slim black line at ...

htmlcsstwitter-bootstrapyoutube

The Kendo Grid is refusing to show up within the popup window

I am new to using Angular 2 and Kendo UI. Currently, I am attempting to include a grid inside my pop-up window. While I have successfully displayed the pop-up, adding the grid has proven challenging. The grid is not appearing as expected ...

javascripthtmlcssangularkendo-ui

Nginx helps refresh React Router 404 pages

Despite searching through various resources like this question, the solution provided did not resolve my issue. THE CHALLENGE: When refreshing a React page or trying to access a specific URL directly (e.g. www.sitecensored.com/portfolio), I encounter a 40 ...

reactjsnginxreact-routernginx-reverse-proxy

What is the best method for creating a close button on the bottom right corner with Bootstrap?

I need help adjusting the position of a button in a flash message. How can I move the button to the bottom-right? <div class="alert alert-danger alert-dismissible fade show" role="alert"> <%= success %> ...

htmlcssbootstrap-5

Is there a way to ensure a div remains responsive when placed inside another responsive div, without relying on media queries?

I'm having trouble creating a responsive square div with another responsive div inside it. No matter what I try, I can't seem to get it right without using media queries. I must be missing something, but I can't figure out what it is. Here& ...

htmlcssbootstrap-4responsive

What is the best way to eliminate column gaps in Bootstrap 4 and ensure that content spans the entire width of the screen?

Here's a question related to Bootstrap 4. I'm trying to align two images side by side and make them cover the entire width of the page. I attempted using container-fluid and img-fluid thinking that would make them fill 100% of the screen width a ...

htmlcssbootstrap-4