how to override react-bootstrap with custom css file

css twitter-bootstrap reactjs webpack react-bootstrap
kreadteff picture kreadteff · Oct 9, 2015 · Viewed 8.7k times · Source

I use react-bootstrap, but I want to modify some of the elements, so I wrote my own custom.css. However it doesn't make any changes (only when I put !important, but the file is so large so it's not a good option). 

import {MenuItem, Nav, Navbar, NavBrand, NavDropdown, NavItem} from "react-bootstrap";
import {LinkContainer, MenuItemLink} from "react-router-bootstrap";
import '../assets/css/custom.css';

This is what I did so far.

Answer

Jonny Buchanan picture Jonny Buchanan · Oct 9, 2015

When are you importing the Bootstrap CSS? I have an app which successfully uses Bootstrap with some overrides, which does this at the top of its index.js:

require('bootstrap/dist/css/bootstrap.min.css')
require('./bootstrap-overrides.css')

Related questions

Accordion SideBar Menu using Nav components with react-bootstrap

I am started to build my UI using react-bootstrap and now there is important task for me to create SideBar Accordion Menu using standard bootstrap components. I found this example which uses panel-group and table, but I think that it …

Read More
How to change background colors in Reactstrap

I am using react strap to help style an application I'm creating, however I can't figure out how to change the background color of the nav from white to black. I have tried to color ="dark" in the nav tabs …

Read More
React-Bootstrap causing margins on left and right side

I'm using React-Bootstrap in my React app. It is causing margin on the left and right side. I'm using the following code: import React, { Component } from "react"; import "react-bootstrap/dist/react-bootstrap.min.js"; import "bootstrap/dist/css/bootstrap.min.css"; …

Read More