Add Bootstrap to Nerdpack

Hi, I am trying to add some bootstrap components to my Nerdpack. The steps I usually take for other react projects are not working.

First I installed and imported it:
npm install react-bootstrap bootstrap
import ‘bootstrap/dist/css/bootstrap.min.css’;

But this doesn’t seem to effect the change to the components. Are there any special steps for the Nerdpacks?

Thanks.

Hey @Yasin.Isse - I posted this question to our team internally and below is the explanation I got back:

our stylesheet, side with our sdk components, also styles native components, as a best-effort strategy (so <input> looks as close as possible as a TextField>). Maybe you are having a clash with that?

They also suggested checking out our UI Components and SDK Docs:

https://developer.newrelic.com/client-side-sdk/index.html#components/

Not sure if this is helpful, but there is a bootstrap theme for NR1 in GitHub. Perhaps it’ll be helpful. https://github.com/newrelic/nr1-bootstrap-theme

1 Like

I’m a little late to the party, but this seems to work for me:

@import '~bootstrap/dist/css/bootstrap.min.css';

3 Likes

Oh great! Thanks for that addition @Sage.Russell :smiley:

Thanks, that was one of the issues. Also I added a .extended-webpackrc.js file to allow for custom rules from other libraries.

Did that work for you @Yasin.Isse ? I’m excited to see what you come up with :smiley: