Skip to main content

Bootstrap

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

React Bootstrap#

superplate uses react-bootstrap component library for bootstrap plugin. React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery.
Refer to official documentation for detailed usage. →

  • Some stylesheet is required to use React Bootstrap components.
pages/_app.tsx
import "bootstrap/dist/css/bootstrap.min.css";

Using Components#

  • Import from react-bootstrap
import { Button } from 'react-bootstrap';
  • Or import individual components
import Button from 'react-bootstrap/Button';
  • Customize components with props
src/components/main/index.tsx
<Button    href="https://pankod.github.io/superplate/"    target="_blank"    variant="primary"    size="lg">    Docs</Button>
  • Bootstrap utility classes can also be used with components
src/components/cards/index.tsx
<Container className="my-5 flex-grow-1">    ...</Container>

Using Sass with Bootstrap#

tip

If you also add sass/scss under CSS Preprocessors during creation phase, you can easily customize Bootstrap. Bootstrap’s source sass files are added under src/styles directory.
See Sass/SCSS doc →

If sass/scss plugin is not selected, Sass can be added later to customize Bootstrap,

  • Add a custom scss file app.scss under src/styles
src/styles/app.scss
@import "./_variables";@import "./_bootstrap";
  • Add scss files for overriding variables and Bootstrap source Sass file imports
src/styles/_variables.scss
// Override Default Variables// https://getbootstrap.com/docs/4.6/getting-started/theming/#variable-defaults
$primary: #6610f2;$secondary: #fd7e14;
src/styles/_bootstrap.scss
// Option A: Include all of Bootstrap
// @import "~bootstrap/scss/bootstrap";
// Add custom code after this
// Option B: Include parts of Bootstrap
// Required@import "~bootstrap/scss/functions";@import "~bootstrap/scss/variables";@import "~bootstrap/scss/mixins";
// Include custom variable default overrides here
// Optional@import "~bootstrap/scss/reboot";@import "~bootstrap/scss/type";@import "~bootstrap/scss/images";@import "~bootstrap/scss/code";@import "~bootstrap/scss/grid";
  • import in _app.tsx
pages/_app.tsx
- import "bootstrap/dist/css/bootstrap.min.css";+ import "src/styles/app.scss";
  • install sass
npm install sass

Adding Bootstrap to your project later#

If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.

  • Install react-bootstrap and bootstrap packages
npm install react-bootstrap bootstrap

Refer to official documentation on installation for detailed usage. →