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.
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
A complete list of available variables can be found in
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
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.