CODEWITHSUNDEEP
csstwitter-bootstrapreactjswebpackreact-bootstrap
kreadteff
kreadteff

Reputation: 91

how to override react-bootstrap with custom css file

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.

Upvotes: 8

Views: 10083

Answers (1)

Jonny Buchanan
Jonny Buchanan

Reputation: 62793

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')

Upvotes: 6

Related Questions