Backstay

stay extending from ship's mastheads to the side of the ship
SCSS from NPM

First, install the bootstrap and bootstrap-themes NPM packages into your Node.js project:

Now add the following to your .scss file (adjust the path to node_modules/ if your SCSS file is not in the root directory, e.g. ../node_modules/):

Source Code

Download the complete source code of all our themes from our GitHub Repository.

Using SCSS

Refer to the Theming Bootstrap Guide on how to customize Bootstrap using SCSS Variables.

Customizing our themes is similar -- just make sure to change the value of the variables before importing backstay/variables.

For example, here's how you can change the font to Fira Sans, the blue color value, the secondary color value, and the body background:

For a list of all the variables in our theme, refer to backstay/_variables.scss and backstay/_overrides.scss.

Button

Dropdown

Badge

Primary
Secondary
Success
Info
Warning
Danger
Dark

Alert

Success! This alert box indicates a successful or positive action.
Info! This alert box indicates a neutral informative change or action.
Warning! This alert box indicates a warning that might need attention.
Danger! This alert box indicates a dangerous or potentially negative action.
Primary! This alert box indicates an important action.
Secondary! This alert box indicates a less important action.
Dark! This alert box is Dark!

Form

We'll never share your email with anyone else.
Remember: The password is case-sensitive.
Looks good!
Looks good!
@
This username is already taken!
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
@
@example.com
https://example.com/users/
$
.00
Notes

Navbar

Table

Plain
#NameStarsForks
1Bootstrap135k66k
2Semantic UI46k5k
3Bulma36k3k
4Foundation28k6k
Dark
#NameStarsForks
1Bootstrap135k66k
2Semantic UI46k5k
3Bulma36k3k
4Foundation28k6k
Striped
#NameStarsForks
1Bootstrap135k66k
2Semantic UI46k5k
3Bulma36k3k
4Foundation28k6k
Striped + Dark
#NameStarsForks
1Bootstrap135k66k
2Semantic UI46k5k
3Bulma36k3k
4Foundation28k6k
Bordered
#NameStarsForks
1Bootstrap135k66k
2Semantic UI46k5k
3Bulma36k3k
4Foundation28k6k
Bordered + Dark
#NameStarsForks
1Bootstrap135k66k
2Semantic UI46k5k
3Bulma36k3k
4Foundation28k6k
Hover
#NameStarsForks
1Bootstrap135k66k
2Semantic UI46k5k
3Bulma36k3k
4Foundation28k6k
Hover + Dark
#NameStarsForks
1Bootstrap135k66k
2Semantic UI46k5k
3Bulma36k3k
4Foundation28k6k
Small
#NameStarsForks
1Bootstrap135k66k
2Semantic UI46k5k
3Bulma36k3k
4Foundation28k6k
Small + Dark
#NameStarsForks
1Bootstrap135k66k
2Semantic UI46k5k
3Bulma36k3k
4Foundation28k6k

Breadcrumb

Pagination

Progress

Plain
With Label
75%
25%
50%
100%
75%
25%
50%

Card

Default Card
Special title treatment

With supporting text below as a natural lead-in to additional content.

Do Something
Primary Card
Special title treatment

With supporting text below as a natural lead-in to additional content.

Do Something
Secondary Card
Special title treatment

With supporting text below as a natural lead-in to additional content.

Do Something
Success Card
Special title treatment

With supporting text below as a natural lead-in to additional content.

Do Something
Info Card
Special title treatment

With supporting text below as a natural lead-in to additional content.

Do Something
Warning Card
Special title treatment

With supporting text below as a natural lead-in to additional content.

Do Something
Danger Card
Special title treatment

With supporting text below as a natural lead-in to additional content.

Do Something
Dark Card
Special title treatment

With supporting text below as a natural lead-in to additional content.

Do Something
Light Card
Special title treatment

With supporting text below as a natural lead-in to additional content.

Do Something
Code released under the MIT License.
Made by Utkarsh Kukreti for Bootstrap-Themes.com.
Built on Bootstrap with fonts from Google.