Welcome!

Getting started on your next project is easy - simply install with NPM or include the CDN links on your webpage.

Node Package

Recommended for modern web applications.

npm install csh-material-bootstrap@5.3.10

To include the js/css, you can link to them with the package exports. Bootstrap is a dependency of csh-material-bootstrap, so no need to install it independently

// the css
import 'csh-material-bootstrap/css'; 
// bootstrap js, required for interactive functionality
import 'bootstrap';

Sass

You can also import the sass directly in a .scss file, assuming your build tool will process our exports correctly

@use 'pkg:csh-material-bootstrap';

CDN

Use CSH Material Bootstrap without a package manager.

CSS

 <link rel="stylesheet"
  href="https://assets.csh.rit.edu/csh-material-bootstrap/5.3.10/dist/css/csh-material-bootstrap.min.css"
  media="screen">

JS

Required for most interactive functionality, unless using an alternative implementation such as Reactstrap.

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
  crossorigin="anonymous"></script>

Theme switchers

To use theme switching, include the color-modes.js script in your website or include it from the node package.

<script src="https://assets.csh.rit.edu/csh-material-bootstrap/5.3.10/dist/css/csh-material-bootstrap.min.css" crossorigin="anonymous"></script>

import 'csh-material-bootstrap/color-modes.js';

You can use either bootstrap icons or svg icons, the script will work with both.

In a navbar

Floating

Navbars

Vanillajs Datepicker

To use vanillajs-datepicker as a fancy datepicker instead of the default one in a browser, install the package and bootstrap css will do the rest. You must set buttonClass: "btn" when initializing the datepicker!

// js
import { Datepicker } from 'vanillajs-datepicker';
import 'vanillajs-datepicker/css/datepicker-bs5.css';

const datepickerEl = document.querySelector('input#datepickerDemo');
const datepicker = new Datepicker(datepickerEl, {
  buttonClass: 'btn',
  todayButton: true,
  clearButton: true
});

<!-- demo html, does NOT have to be exactly this to funciton, you just need an id on an input. -->
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3 input-group">
  <span class="input-group-text" id="datepickerDemoLabel">Demo Date</span>
  <input type="text" id="datepickerDemo" class="form-control bg-body-tertiary" aria-describedby="datepickerDemoLabel">
</form>

Sweet Alert 2

To use sweet alert 2 to get fancy alerts, you must install the Sweet alert 2 package. CSH bootstrap contains styles to make sweetalert2 alerts match with our bootstrap. It's worth noting that sweetalert2 does have a bootstrap-5 theme, but it does not respect bootstrap-5 variables ):

The buttons are not styled automatically, because sweet alert lets you provide custom classes using customClass the above alert was styled this way, called with the code below.

Swal.fire({
  title: "It works!",
  theme: 'bootstrap-5',
  icon: "success",
  text: "Own'er? I barely know her",
  showCloseButton: true,
  showCancelButton: true,
  reverseButtons: true,
  customClass: {
    cancelButton: "btn btn-danger",
    confirmButton: "btn btn-primary"
  }
});

However, you can also define a custom object to replace the Swal object that overrides these classes. That way you don't have to define it every time.

bsSwal = Swal.mixin({
  customClass: {
    confirmButton: "btn btn-success",
    cancelButton: "btn btn-danger"
  }
});

bsSwal.fire({
  title: "It works!",
  theme: 'bootstrap-5',
  icon: "success",
  text: "Own'er? I barely know her",
  showCloseButton: true,
  showCancelButton: true,
  reverseButtons: true
});