Bootstrap (and Material)

There are two Bootstrap themes, both of which use Bootstrap version 5.

Choosing your theme

The default Bootstrap theme is based off the default settings that ship with Bootstrap. It’s recommended if you want a simple, practical starting point or if you want to use your own theme.

The Material theme is based on Creative Tim’s Material Kit and Material Dashboard products. It’s flashier than the default theme, though is more opinionated and less compatible with other products.

You can watch a 3-minute tour of the Material theme here:

Customizing the default theme

Pegasus’s file structure is based on the Bootstrap documentation. Any of the variables used in Bootstrap can be changed by modifying the assets/styles/site-bootstrap.scss file.

A complete list of available variables can be found in ./node_modules/bootstrap/scss/variables.

Try adding the following lines to your file (after importing functions) to see how it changes things:

// Configuration
@import "~bootstrap/scss/functions";

$primary: #2e7636;  // change primary color to green
$body-color: #00008B;  // change main text to blue

// rest of file here...

You’ll have to run npm run dev to see the changes take. For more details on building the CSS files, see the front end documentation.

The Bootstrap documentation has much more detail on customizing your theme!

Customizing the Material theme

The Material theme can be customized according to the Material Dashboard documentation. The theme files live in the assets/material-dashboard folder. You can see the modifications that have been made for Pegasus support on Github here. In particular, a few bugs have been fixed, and the unused pro files have been removed.

Creative Tim offers pro versions of Material Dashboard and Material Kit which are helpful if you want to have access to more pages / components. These should integrate seamlessly with the Pegasus theme.