avatr of Ibrahim

Published 11th Aug 2022

Using React-Bootstrap and custom Bootstrap variables in Gatsby

5 min read

React-Bootstrap is the component library for the CSS framework Bootstrap. However to customise components and best utilise the library we'll need Bootstrap to access its Sass files.

In this blog I will present how to work and customise React-Bootstrap using Bootstrap's custom variables files.

Getting started with Gatsby

I love to start my Gatsby sites with the simple Hello World starter template. It fires a plain blank web page displaying "Hello World!".

To get started with Gatsby, use the Gatsby CLI specifying the hello-world starter template from the terminal:

gatsby new my-first-gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Once installed, navigate to the directory and start it up:

cd my-first-gatsby-site
gatsby develop

Or if you're using VS Code as the code editor you can run code . instead of gatsby develop to open up the directory in VS Code. Once the folder is opened in VS Code you can then run gatsby develop and the server will be running on http://localhost:8000.

How Gatsby files are structured

root
|
|-- node modules
|-- src
|    |-- pages
|       |-- index.js
|-- static
    |-- favicon.ico
|-- gatsby.config
|-- package.json
|-- package-lock.json
|-- .prettierignore
|-- .prettierrc
|-- .gitignore
|-- LICENCE
|-- README.md

We'll be only focusing on a few of these files so worry not!

Installing React-Bootstrap, Bootstrap and Sass

Although Gatsby is shipped with a range of dependencies and packages including Webpack it does not come with Sass by default. And in order to customise Bootstrap's Sass files we'll need Sass installed in our project.

Luckily, Gatsby is filled with plugins which can be found from https://www.gatsbyjs.com/plugins

You'll need to install Sass and gatsby-plugin-sass and then add it to the 'gatsby-config.js' file.

npm install sass gatsby-plugin-sass

Now add it to the gatsby-config.js file like so:

module.exports = {
  plugins: [`gatsby-plugin-sass`],
}

Next, install React-Bootstrap and Bootstrap:

npm install react-bootstrap bootstrap

Now we're all set to start creating our SCSS files.

Setting up SCSS files

The SCSS files can live in our 'src' folder. So in the 'src' folder create a folder and call it any name you wish, preferably 'styles'.

In the 'styles' folder we'll need our main SCSS file where all our partial SCSS files will be imported and compiled.

How do we structure our SCSS files? Completely up to you. Though it is best practice to structure them in an appropriate and self-explanatory way, so when someone looks at it they will understand how to navigate between the files.

If you want to follow best practice I would highly suggest reading the Sass architecture guideline which shows how to structure Sass files, following the 7-1 pattern.

However for small projects I tend to create something like this:

|
|-- src
|    |-- styles
|        |-- main.scss
|        |-- pages
|        |    |-- _home.scss
|        |    |-- _about.scss
|        |
|        |-- components
|        |    |-- _dropdown.scss
|        |    |-- _buttons.scss
|        |
|        |-- _mixins
|        |-- _theme
|        |-- _typography
|        
|

Then in the main.scss file we'll need to import all the partial files. Again you can refer to the Sass guideline mentioned above if you like. Whatever you do, make sure each section is in alphabetical order to make searching for imports easier.

The important bit is to import Bootstrap's SCSS files beneath all the imports

// main.scss
@import "./mixins";
@import "./theme";
@import "./typography";

// COMPONENTS //
@import "./components/buttons";
@import "./components/dropdown";

// PAGES //
@import "./pages/home";
@import "./pages/about";

// BOOTSTRAP //
@import "~bootstrap/scss/bootstrap";

Now we're ready to start customising Bootstrap's files!

Customising Bootstrap's variables

Now that we have all our SCSS files set up we can begin customising Bootstrap's default variables.

To change a default Bootstrap variable we'd need to copy and paste the desired variable from Bootstrap's SCSS node_module file into our SCSS files that we created earlier and then change the value.

For a list of Bootstrap variables you can override, look at node_modules\bootstrap\scss_variables.scss

This is the file we'd most use. However there may be times, for advanced customisation, to use other files e.g. to change breakpoints or utilities classes.

I'm going to show a few examples of how to change the default Bootstrap variables.

Changing theme colours

To change the default theme colours go to node_modules\bootstrap\scss_variables.scss

Search for the $theme-colors variable and copy and paste it in your SCSS file. In this example I would paste in my _theme.scss file.

// Bootstrap's _variables.scss
$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Notice how I have ommitted the !default flag. If you don't ommit it you will not see the changes!

There are two ways of changing the theme variables:

  • Method one: Replace the desired variables with hexcodes if you wish.
  • Method two: create colour variables and replace them in $theme-colors variable.

It's better to follow the frameworks's convention by using the second method. So we'll need to create our own set of theme colours and then assign it to the $theme-colors variable.

Typically, you will have something like this:

// _theme.scss //

$cyan: #0da8bc;
$cyan-dark: #0D94CB;
$gold: #ffb027;

// Here we'll assign the primary, secondary, danger etc //
$primary: $cyan;
$primary-dark: $cyan-dark
$secondary: $gold

// Now we can edit the theme variable //
$theme-colors: (
  "primary":    $primary,
  "primary-dark": $primary-dark,
  "secondary":  $secondary,
);

Now we can use the theme colors in our classNames e.g.

// index.js
import React from "react"
import {Container} from "react-bootstrap"

const Home = () => {
  ...

  return (
    <Container className="bg-primary">
      <h1 className="text-secondary">Hello Gatsby!</h1>
    </Container>
  )
}

if you do intend to use Bootstrap's colors e.g. $gray-100 in your SCSS files then make sure you copy and paste those colors/shades from the variables.scss into your SCSS file. Otherwise, for example, the $light variable will be undefined as there is no such thing as $gray-100 in your file.

Changing box-shadow

On occasions you may want to change the box shadow's weight or colour to match your theme.

To do this we'll need to grab the $box-shadow variables from Bootstrap's variables.scss file and paste it in our own files. I usually paste non theme-color related variables in a custom-variables.scss file.


// Bootstrap's _variables.scss //

$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
$box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;

Then once pasted in our file we can change the values.

// _custom-variables.scss{3}
$box-shadow:                  0 .5rem 1rem rgba($black, .15);
$box-shadow-sm:               0 .2rem .4rem rgba($secondary, .075);
$box-shadow-lg:               0 1rem 3rem rgba($black, .175);
$box-shadow-inset:            inset 0 1px 2px rgba($black, .075);

Note: If you will use the default $black variable then make sure the variable is assigned a value by either typing above $black: #000000 or even better having the $black variable assignment in the theme.scss so as to keep all colour related variables in one file. Also note how the !default flag is removed in our SCSS file. If it's not removed you will not see the changes!

Changing Fonts

Fonts give websites their unique feel. It's vital to know how to change fonts especially when using a framework.

In our case we can change Bootstrap's default font by grabbing the variables from Bootstrap's variables.scss and pasting it into our SCSS file, typically typography.scss.

// Bootstrap's _variables.scss //
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

Now to change these variables we'll need our own font-family. If you're familiar with Google Fonts, you can import the font at the top of the file and assign it to the variables.

// our own _typography.scss
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap');

$font-family-sans-serif: 'Roboto', sans-serif;

And that's it!

Now you know how to customise Bootstrap's variables whether using the component library React-Bootstrap in a React application or in simple HTML and SCSS environment.

Thank you for reading. Let's connect!

Feel free to connect on Twitter or LinkedIn

© Ibrahim Al-Quraishi 2024