How to customise react-bootstrap components?

Question

What is the best way to override css classes/customise react-bootstrap components? - (I have read the docs, and unless I am missing something, this isn't covered).

From what I have read, it seems like it's a choice between inline styles (radium) and css modules but which is better and why?

Leatrice

The topic is subjective. You can go whichever way you want, according to your needs. In our case, the legacy code was using less. So we had to override variables.less from bootstrap's source code. We created our own variables.less file which would override variables like @brandPrimary, which is famous bootstrap primary color. – Magistery

Answer 1

I am not sure if this answers your question but Documentation clearly provide examples. For instance Button

Props

+--------+---------+--------+--------------------------------------------+
|  Name  |  Type   | Default| Description                                |
+--------+---------+--------+--------------------------------------------+
|bsClass |  string | 'btn'  | Base CSS class and prefix for the component|
+--------+---------+--------+--------------------------------------------+

This one could be modified to add custom CSS class to your Button component. Also component could be changed with setting componentClass.

<Button type="submit" onClick={this.submit}
 bsClass='custom-class'
>
</Button>

Where custom-class is CSS class that could

provide new, non-Bootstrap, CSS styles for a component.

Fiddle with example of how to use bsClass.

Inline styles:

According to bug filled, inline styles will not be supported officially.

you want to use the actual style prop. bsClass is for adjusting the way bootstrap css classes are applied to the components not inline styles

But issue states that:

You're free to use them if you want. We have no formal opinion.

NOTE Not all components provided by react-bootstrap allow class customization through bsClass, for example Breadcrumb

Sickler

I'm not sure that is entirely correct - react-bootstrap.github.io/components.html#custom-styles. – Leatrice

@Leatrice I think that's depend on which particular case you have. Both are valid. – Sickler

With the method you're suggesting, is it possible to use inline styles? - it would be helpful if you could provide some example code >>> – Leatrice

appreciate that. thanks! but there is no way to do override default styling using inline styles with react-bootstrap..? – Leatrice

ah ok, I've found out that you use the 'style' prop as opposed to bsClass - thanks for the help – Leatrice

Do all React component has bsClass property? – Milzie

@Leatrice The link is broken. – Stutz

As the year of CoViD-19, the correct prop is bsPrefix – Herbage

Answer 2

I think the answer to this for most people (like me) is that one can add custom styles to react-bootstrap components using the style prop. E.g. for a default Button with blue text:

<Button bsStyle="default" style={style.blueButton}>Button Text</Button>

or

<Button bsStyle="default" style={{color:"blue"}}>Button Text</Button>

Pilarpilaster

Answer 3

Example With SCSS

According to React Bootstrap Docs you can create a custom class with the property bsPrefix="custom-class".

Then in your stylesheet, you can override styles taking advantage of css specificity

 import styles from './RocketCard.module.scss';

 function RocketCard({ name }) { return (
     <div className={styles.rocketCardContainer}>
      {name}
      <Card className={styles.customCard} bsPrefix="customCard">
        <Card.Img variant="top" src="holder.js/100px180" />
        <Card.Body>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and 
            make up the 
            bulk of the card's
            content.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
     </div>
    );
    }



// SCSS File
.rocketCardContainer {
  background-color: red;
  .customCard {
    width: 100%;
  }
}

Steeplechase

Answer 4

I had same issue, I searched few blogs and the answer i got was to !important. I was looking for a more general solution, but have not found any other solution other than adding !important to each and every element we want to override.

.form-control { 
  border-radius: 30px !important;
  background-color: #f4f6f5 !important;
}

Kendo

Answer 5

React-bootstrap has NavLink component on it, you have to import it first.

when you generate Boostrap code for navlink using something like rt4-nav the NavLink component comes with className="nav-link" which contains all the styles, you can then override the class as shown below.

import 'bootstrap/dist/css/bootstrap.min.css'; import { NavLink } from 'react-bootstrap';

  <NavMenu className="d-flex">
      <NavLink className="nav-link">
          Inspirations
      </NavLink>
  </NavMenu>

const NavMenu = styled.div`
    .nav-link {
        font-size: 15px;
        font-weight: 500;
    }
`;

Spaetzle

Thank you for contributing an answer. Would you kindly edit your answer to to include an explanation of your code? That will help future readers better understand what is going on, and especially those members of the community who are new to the language and struggling to understand the concepts. – Goidelic

Answer 6

You should import first. An example, if your import order is like this:

import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';

The things you write in index.css will be invalid unless they are !important.

But if you write it like this:

import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';

You can override Bootstrap however you want.

Dune

Answer 7

You can search up the specific component on the react-bootstrap website:

https://react-bootstrap.netlify.app/components/alerts

At the bottom of each page there is an API section which gives the default value for the bsPrefix. You can then alter this default value in your CSS file.

For example, the default bsPrefix for the Button and Tooltip components are 'btn' and 'tooltip' respectively. In the CSS file you can edit the component styles using .btn{background-color: purple;} or .tooltip{background-color: purple;}

Talia

For clear understanding, Any code written in your answer should bd well formatted. – Sarthe

Answer 8

import 'bootstrap/dist/css/bootstrap.min.css';
import classes from './signInForm.module.css'

is working for me Thank you very much

Damarisdamarra