CODEWITHSUNDEEP
cssreactjsreact-bootstrap
Kapil Gupta
Kapil Gupta

Reputation: 7711

How to edit style in react-bootstrap?

I am using this boilerplate to create a react based application. I have this basic code:

App.js:

 render() {
    const styles = require('./App.scss');
    return (
      <div className="styles.app">
        <Helmet {...config.app.head}/>
        <Navbar fixedTop className={styles.navbar}>
          <Navbar.Header>
            <Navbar.Brand>
              <IndexLink to="/" activeStyle={{color: '#33e0ff'}}>
                <div className={styles.brand}/>
              </IndexLink>
            </Navbar.Brand>
            <Navbar.Toggle/>
          </Navbar.Header>
        </Navbar>
      </div>
    );
  }

App.scss: 

.app {
  .navbar{
    background: #1b6d85;
  }
  .brand {
    position: absolute;
    $size: 40px;
    top: 5px;
    left: 5px;
    display: inline-block;
    background: #2d2d2d;
    width: $size;
    height: $size;
    background-size: 80%;
    margin: 0 10px 0 0;
    border-radius: $size / 2;
  }
  nav :global(.fa) {
    font-size: 2em;
    line-height: 20px;
  }
}
.appContent {
  margin: 50px 0; // for fixed navbar
}

For the Navbar tag, I tried using both className as was done in the template and bsStyle as I saw in some questions online. I havent been able to successfully edit any component of react-bootstrap. If I have missed the documentation of this in react-bootstrap website, please point me to it too. Thanks.

Upvotes: 1

Views: 5770

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281646

React-bootstrap requires bootstrap.css as a dependency in your file. Add it in your index.html and it should work fine for you.

See this documentation:

React-bootstrap guide

Upvotes: 1

Related Questions