What is the best way to incorporate Bootstrap CSS from a local source into a React app without conflicting with existing CSS files?

Currently, I am working on a project that requires the use of Bootstrap along with several custom CSS files. In the past, I have been importing Bootstrap's CSS directly into my index.html file using the following code:

<link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06646969727572746776463328362837">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />

However, I now need to import Bootstrap CSS from my node_modules directory. So, I attempted to import it into my index.css file like this:

@import "bootstrap/dist/css/bootstrap.min.css";

This method seems to be "working", but now all of Bootstrap's CSS rules, including its reboots, are overriding my custom CSS (which was not happening before).

Therefore, my main question is: Is there a way to import a local version of Bootstrap's CSS without it conflicting with my custom CSS files?

I came across a potential solution here, but adding a custom body ID to every CSS declaration in my numerous files seems like a laborious task.

javascripthtmlcssreactjstwitter-bootstrap

Answer №1

In order to prevent your custom CSS from being overridden, make sure to import the bootstrap.min.css file before your 'custom.css' in your code.

Answer №2

To resolve the issue, I needed to place bootstrap.min.css in the public directory and then include it in my index.html file. Strangely enough, it didn't work on my initial attempt. Here is how the import should be executed :

<link
      href="css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />

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

Save instantly while modifying an element

I am exploring the idea of incorporating an automatic save feature using javascript/jQuery. In my project, I have multiple instances (hundreds) of elements with ids starting with `overlay-rotation-bounding-box`. For instance, `overlay-rotation-bounding-bo ...

javascriptjqueryajax

Is it possible to include a variable in the name of my hook state?

My idea is to use the hook in a way that allows for usage like this <Foo id="foo1" /> and <Foo id="foo2" /> export const Foo = () => { const [state + props.id, state + props.id] = useState("foo") return ( ...

javascriptreactjsreact-hooksstatejsx

"Learn how to properly configure JSON data on x and y axes in the c3.js library

I rely on c3 to produce uncomplicated graphs. I am in search of a way to extract data from a Json file and use it to create my Line Graph. In order for the graph to display correctly, I need my Y values to be represented by "Labels" and my X values to be ...

javascriptjqueryjsond3.jsc3.js

`I'm experiencing issues with my AJAX call when using Django`

As part of my blog practice, I'm trying to ensure that all notifications are marked as seen when a user views them. This functionality works fine when I manually go to the URL, but it's not working when using Ajax. Here is the JavaScript code: ...

javascriptjqueryajaxdjango

The placement is based on its relative position within the table row layout

I am trying to create a table using div elements styled with table CSS. One of the rows contains an absolutely positioned div, but setting position:relative; on the row element doesn't work as expected. Here is my table layout without attempting to l ...

htmlcsscss-positioncss-tables

Removing user input in React Native with the help of references

For my app, I am dealing with a situation where users will be inputting a large number of records continuously. Currently, I am using the State to clear the input when the submit button is pressed. However, for better performance, I would like to clear the ...

reactjsreact-native

Retrieve the initial element from a section of a webview that is being shown

Can anyone assist me in retrieving the initial element from the view currently being displayed on a webview within a large HTML file on the screen? Are there any JavaScript functions that can be utilized with the loadUrl() method for this purpose? Apprec ...

javascriptandroid

Updating content on a webpage via AJAX request without altering the original source code

Within the body of our document, referred to as "form.php," we have the following components: At the head section, there is a JavaScript code block: <script> function showUser(str) { if (str == "") { document.getElementById("txtHint").i ...

javascriptphphtmlajax

Is it possible to substitute the input field in the filter component with a Material UI text field instead?

I am attempting to replace the input field for filter components with a text field from materialUI. Despite successfully displaying the input field by creating a new component, it is not filtering contents as desired. My goal is simply to replace the inpu ...

cssreactjsmaterial-uigriddle

What techniques do Node libraries employ to achieve asynchronous execution in a professional manner?

After researching how Node Bcrypt accomplishes asynchronous execution with the following code: bcrypt.hash(myPlaintextPassword, saltRounds, function(err, hash) { // Store hash in your password DB. }); I am curious about how they manage to perform com ...

javascriptnode.jsmultithreadingasynchronouschild-process

Is it possible to utilize both body-parser and Formidable simultaneously?

I've been working on a problem for a few days now, but I'm having trouble understanding certain aspects of it. My website is built using NodeJS and ExpressJS, with form handling done through body-parser. var adName = req.body.adName; var adMess ...

javascriptnode.jsexpressformidablebody-parser

Generating a multiplication grid using PHP

I'm currently facing a challenge regarding the presence of an additional "0" box on my multiplication table. Below is the code that I have been working with: $cols = 10; $rows = 10; $number = 0; $number2 = 0; echo "<table border=\"1\"> ...

phphtml

JavaScript if else statement with 3 different scenarios

I'm having trouble figuring out why this code isn't working. It seems like there might be a conflict between the testRed and testGreen functions. If that's the case, could someone please suggest a better approach to solving this issue? Code: ...

javascriptjquery

In the latest version of NextJs, there seems to be an issue with the setState function not functioning

I recently created a contact form using Next13.5 and the app router. However, I encountered an issue with the setIsLoading function within the try-catch block. It seems to trigger simultaneously with the server action response, particularly during the send ...

reactjsformsnext.jsapp-router

Get rid of the white border surrounding the object tag

Help needed in removing a thin white border around the object tag. Below is the code snippet and what has been attempted: .hr-ob { background-color: #003262; width: 50px; height: 10px; border: none; outline: none; ...

htmlcss

` `Display issue: Internet Explorer 11 concealing element with scroll bar

I encountered an issue on Internet Explorer 11 where I am unable to click on an element that is positioned fixed and aligned to the right; the scroll bar hides the element. I am using the Bootstrap framework. Any suggestions? https://i.sstatic.net/TqDi ...

htmlcssinternet-explorer-11

Sending a $.ajax post request transforming into a get

Struggling to understand the behavior of my jquery ajax request, I've hit a roadblock. function newContact() { $.ajax({ type: 'POST', contentType: 'application/json', // url: ...

javascriptjqueryajaxjsonhttp-post

Ways to combine attributes in an array of objects using a designated property

I am attempting to combine related objects within an array of objects based on matching properties in a specific object key "name". Although I have implemented the following code, unfortunately it did not yield the desired results: const students = []; ...

javascriptjson

Generate two separate CSS files (Mobile and Desktop versions) by compiling a Stylus (.styl) file using Node.js

Can a single Stylus file be compiled into two separate CSS files? For example, one optimized for mobile without the -moz and webkit elements, and another for cross-browser applications? Thank you. ...

cssnode.jsstylus

How to make a seamless full-width background with CSS

I'm in the process of developing a new website called WebSpace and I'm looking to extend the header background color to span from one end to the other. Currently, the layout appears like this: I want to eliminate the unnecessary white space on t ...

htmlcssbackground-color