Bootstrap - React

About

React - Component (User-defined Element) for Bootstrap

Articles Related

Example

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> 
      <p> 
        Change this and that and try again.
      </p>
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  )
}

Library

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.

List:

Saas Customization

Bootstrap can be customized via Saas variable as stated here

Example:

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: https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-precompiled-sass
@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: "https://fonts.googleapis.com/css?family=Nunito:300,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 https://fonts.google.com copy and paste the URL of the selected font from the @import tab
// (e.g: https://fonts.googleapis.com/css?family=Nunito) and peste it in the _variables.scss from the custom folder
// @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

@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

Installation

The installation can be done as stated:

[in the create-react-app
at the next sauce:
- with next-sass
- with the help of the sample sass app
and the theming bootstrap documentation See section above.