Proboot

An opinionated Bootstrap 5 theme for web apps

Get started Source code

Get started

Proboot is built on Bootstrap 5 and distributed as SCSS source code. Start by installing it with npm:

npm i --save proboot

From here, it is simple to customize and use. Just import it in your SCSS file:

@import 'proboot/scss/proboot';

If you need to further customize the SCSS, you can override any variables before including proboot, and the changes will take effect across Proboot and Bootstrap. You can also include individual components from Proboot just like with Bootstrap, if you don't need all of them.

// Our own local variables
$primary: '#800f02';
@import 'variables';

// Bootstrap core (this can be replaced with individual components)
@import 'bootstrap/scss/bootstrap';

// Proboot variables and a few components
@import 'proboot/scss/variables';
@import 'proboot/scss/core';
@import 'proboot/scss/alert';
@import 'proboot/scss/button';

Using without SCSS

If you'd prefer to include a traditional CSS file, it is also included in the npm releases:

<link rel="stylesheet" href="/node_modules/dist/css/proboot.css">

Using without npm

If you don't want to install with npm, you can use a CDN-hosted compiled CSS file instead:

<link rel="stylesheet" href="https://unpkg.com/proboot@0.4/dist/css/proboot.css">

Alternatively, just download the compiled CSS from the GitHub repo.

Components

Proboot includes some of the components from early versions of Tabler that didn't require additional JavaScript.

Buttons

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Alerts

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>

Form components

Since Proboot 0.2 select groups support different content lengths in each item.

Toggle switch

Heads up! Switches changed in Proboot 0.2 to use Bootstrap's switch component. HTML from before 0.2 will need to be updated.

<div class="selectgroup">
    <label class="selectgroup-item">
        <input type="radio" name="value" value="50" class="selectgroup-input" checked>
        <span class="selectgroup-button">S</span>
    </label>
    <label class="selectgroup-item">
        <input type="radio" name="value" value="100" class="selectgroup-input">
        <span class="selectgroup-button">M</span>
    </label>
    <label class="selectgroup-item">
        <input type="radio" name="value" value="150" class="selectgroup-input">
        <span class="selectgroup-button">L</span>
    </label>
    <label class="selectgroup-item">
        <input type="radio" name="value" value="200" class="selectgroup-input">
        <span class="selectgroup-button">XL</span>
    </label>
</div>

<div class="form-check form-switch">
    <input type="checkbox" class="form-check-input" id="customSwitch1">
    <label class="form-check-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="form-check form-switch">
    <input type="checkbox" class="form-check-input" disabled id="customSwitch2">
    <label class="form-check-label" for="customSwitch2">Disabled switch element</label>
</div>
Some components and defaults are not yet documented. The old Tabler documentation includes some of that information.