Bootstrap - React


React - Component (User-defined Element) for Bootstrap


From why-react-bootstrap

import React from 'react';

function Example()  {
  return (
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <strong>Oh snap! You got an error!</strong> 
        Change this and that and try again.
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>


This two library:

  • are based on the react css file. The Css file can be composed via Sass but it's not inlined.
  • does not depend on jQuery or Bootstrap javascript.


Saas Customization

Bootstrap can be customized via Saas variable as stated here


  • The main file
// Override default variables before the import
@import "variables";

// Custom Styles
@import "styles";

// Font 
@import "fonts";

// Custom.scss
// Option A: Include all of Bootstrap
// As stated here:
@import  "~bootstrap/scss/bootstrap.scss";
  • where variables is the file where you will put your own variable
// Fonts
// uncomment and replace the $font and $font-family-custom-sans-serif value with any URL and font family name from Google Fonts

$font: ",400,600,700" !default;
$font-family-custom-sans-serif: "Nunito", sans-serif !default;
$font-family-base: $font-family-custom-sans-serif !default;

// Custom variables
// Variable to be overwritten come below

$body-bg: #fff;

// Own variable used in the own style of _styles.scss
// come below
$alert-padding-y:   1rem;
$alert-padding-x:   1.5rem;
$alert-color:       #FFF;
$alert-bg:          #000;
$alert-hover-bg:    lighten($alert-bg, 10%);
  • The _styles.scss got custom style
.alert {
    padding: $alert-padding-y $alert-padding-x;
    color: $alert-color;
    background-color: $alert-bg;

    &:hover {
        background-color: $alert-hover-bg;
  • And the font
// go to copy and paste the URL of the selected font from the @import tab
// (e.g: and peste it in the _variables.scss from the custom folder
// @import url('');

@import url(#{$font});

// Or a custom font ...

@font-face {
    font-family: "CUSTOM_FONT";
    src: url("CUSTOM_FONT.eot");
    src: url("CUSTOM_FONT.woff") format("woff"),
    url("CUSTOM_FONT.otf") format("opentype"),
    url("CUSTOM_FONT.svg#filename") format("svg");
  • Include the main scss file in your page component
import '../custom/custom.scss'
  • Use a scss processor in your build such as node-sass


The installation can be done as stated:

Discover More
React - Component (User-defined Element)

A component is a user-defined react element in the React tree. Components let you split the UI into independent, reusable pieces, and think each piece in isolation. Conceptually, components are like...

Share this page:
Follow us:
Task Runner