how to override react-bootstrap with custom css file

Question

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.

First of all make sure you're loading your custom.css after that react plugins CSS and also use proper selector , of doing these you won't have to use !important. — vivekkupadhyay, Commented Oct 9, 2015 at 12:29
@vivekkupadhyay what do you mean by after? i import in the following order. — kreadteff, Commented Oct 9, 2015 at 12:56
@vivekkupadhyay but i am also modifying classes, .navbar i.e — kreadteff, Commented Oct 9, 2015 at 13:03

Jonny Buchanan · Accepted Answer · 2015-10-09 13:25:15Z

6

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

answered Oct 9, 2015 at 13:25

Jonny Buchanan

62.9k17 gold badges146 silver badges150 bronze badges

Add a comment |

Collectives™ on Stack Overflow

how to override react-bootstrap with custom css file

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related