Bootstrap

From David's Wiki
Jump to navigation Jump to search
\( \newcommand{\P}[]{\unicode{xB6}} \newcommand{\AA}[]{\unicode{x212B}} \newcommand{\empty}[]{\emptyset} \newcommand{\O}[]{\emptyset} \newcommand{\Alpha}[]{Α} \newcommand{\Beta}[]{Β} \newcommand{\Epsilon}[]{Ε} \newcommand{\Iota}[]{Ι} \newcommand{\Kappa}[]{Κ} \newcommand{\Rho}[]{Ρ} \newcommand{\Tau}[]{Τ} \newcommand{\Zeta}[]{Ζ} \newcommand{\Mu}[]{\unicode{x039C}} \newcommand{\Chi}[]{Χ} \newcommand{\Eta}[]{\unicode{x0397}} \newcommand{\Nu}[]{\unicode{x039D}} \newcommand{\Omicron}[]{\unicode{x039F}} \DeclareMathOperator{\sgn}{sgn} \def\oiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x222F}\,}{\unicode{x222F}}{\unicode{x222F}}{\unicode{x222F}}}\,}\nolimits} \def\oiiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x2230}\,}{\unicode{x2230}}{\unicode{x2230}}{\unicode{x2230}}}\,}\nolimits} \)

Bootstrap is the most popular CSS framework.
It has an excellent set of examples on it's website for all of its functionality.

Getting Started

Add bootstrap using npm

npm i bootstrap

Import bootstrap into your main scss file or include it as a css stylesheet.

@import '~bootstrap/scss/bootstrap';

Additions and Alternatives

Bootstrap Native

Bootstrap Native replaces the JS portion of Bootstrap 4/5 with a vanilla JS implementation.
It allows you to use Bootstrap's interactive portions without requiring JQuery or popper.js.
Since most existing Bootstrap's JS api uses JQuery commands, this is not a drop-in replacement for Bootstrap.
Note that bootstrap 5 no longer uses jquery.