J1 Template themes are used to build Bootstrap V5 websites that work well on all screen sizes. The J1 Template system has many special features that you won’t find in other Jekyll themes.

15-30 Minutes to read.

Bootstrap themes change how a website looks. They are built on top of the basic rules and CSS styles that come with Bootstrap. Picking or changing a theme does not change what Bootstrap can do — it just changes things like colors, fonts, and font sizes.

Navbars

A navbar is a basic page item, usually placed at the top of your page to help visitors find their way around. Bootstrap offers many navigation features. They shrink down on small screens like phones, so they always stay easy to use.

Bootstrap Docs — Navbar

Styling the navbar is now very easy. You just mix theme classes with background-color helper classes. Use the navbar light class .navbar-light for light backgrounds, or the navbar dark class .navbar-dark for dark backgrounds. Then change the background colors with the .bg-* helper classes.

Example HTML code for NAV bars

<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
  <div class="container-fluid">
    <a class="link-no-decoration navbar-brand" href="javascript:void(0)">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
      data-bs-target="#navbarColor01" aria-controls="navbarColor01"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse ml-2" id="navbarColor01">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="link-no-decoration nav-link active" href="javascript:void(0)">Home
            <span class="visually-hidden">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="link-no-decoration nav-link" href="javascript:void(0)">Features</a>
        </li>
        <li class="nav-item">
          <a class="link-no-decoration nav-link" href="javascript:void(0)">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="link-no-decoration nav-link" href="javascript:void(0)">About</a>
        </li>
        <li class="nav-item dropdown">
          <a class="link-no-decoration nav-link dropdown-toggle" data-bs-toggle="dropdown"
            href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu">
            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Action</a>
            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Another action</a>
            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Separated link</a>
          </div>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control mt-1" type="text" placeholder="Search">
        <button class="btn btn-secondary btn-sm ml-3" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
  <div class="container-fluid">
    <a class="link-no-decoration navbar-brand" href="javascript:void(0)">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
      data-bs-target="#navbarColor02" aria-controls="navbarColor02"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse ml-2" id="navbarColor02">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="link-no-decoration nav-link active" href="javascript:void(0)">Home
            <span class="visually-hidden">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="link-no-decoration nav-link" href="javascript:void(0)">Features</a>
        </li>
        <li class="nav-item">
          <a class="link-no-decoration nav-link" href="javascript:void(0)">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="link-no-decoration nav-link" href="javascript:void(0)">About</a>
        </li>
        <li class="nav-item dropdown">
          <a class="link-no-decoration nav-link dropdown-toggle" data-bs-toggle="dropdown"
            href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu">
            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Action</a>
            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Another action</a>
            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Separated link</a>
          </div>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control mt-1" type="text" placeholder="Search">
        <button class="btn btn-secondary btn-sm ml-3" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light md-light">
  <div class="container-fluid">
    <a class="link-no-decoration navbar-brand" href="javascript:void(0)">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
      data-bs-target="#navbarColor03" aria-controls="navbarColor03"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse ml-2" id="navbarColor03">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="link-no-decoration nav-link active" href="javascript:void(0)">Home
            <span class="visually-hidden">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="link-no-decoration nav-link" href="javascript:void(0)">Features</a>
        </li>
        <li class="nav-item">
          <a class="link-no-decoration nav-link" href="javascript:void(0)">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="link-no-decoration nav-link" href="javascript:void(0)">About</a>
        </li>
        <li class="nav-item dropdown">
          <a class="link-no-decoration nav-link dropdown-toggle" data-bs-toggle="dropdown"
            href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu">
            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Action</a>
            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Another action</a>
            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Separated link</a>
          </div>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control mt-1" type="text" placeholder="Search">
        <button class="btn btn-secondary btn-sm ml-3" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Buttons

Buttons are eye-catching items that invite visitors to click on them to open pages or offers on your site. Well-made buttons work better than plain text links. When you use buttons, more people tend to visit the key pages on your site.

Bootstrap comes with several button styles ready to use. They cover most needs. You can use buttons on these HTML items:

Link items (anchor)
Form buttons (input)
Plain buttons (button)

Making a standard button in Bootstrap is very simple. Just add the basic button CSS class .btn to any HTML item. The next sections show the different kinds of buttons you can use and how to set them up.

Bootstrap Docs — Buttons

Active buttons

Active buttons have a darker background and border. When you press one, you see a ripple effect, so you know your click was picked up.

Example HTML code for 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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Disabled buttons

You can make a button look inactive (greyed out) by adding the disabled attribute to any <button> item.

Example HTML code for disabled Buttons

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

Outline buttons

Want a button without the strong background color? Use the outline button classes .btn-outline-* to take away all background colors and images from a button.

Example HTML code for outline Buttons

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

Want a button with a small menu attached? You can use buttons that open a dropdown (drop-down menu) when clicked.

Example HTML code for a group of Buttons

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">Primary</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button"
      class="btn btn-primary dropdown-toggle"
      data-bs-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false">menu
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Dropdown link</a>
      <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Dropdown link</a>
    </div>
  </div>
</div>

Button sizes

Besides the default size, you can also use small and large buttons.

Example HTML code for Button sizes

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

Pulsed button

Use this to draw attention to a button — for example, for a recommended action.

Example HTML code for a pulsed Button

  <button type="button" class="btn btn-primary pulsed-z2">Primary</button>

Block level button

You can make stacks of full-width block buttons like those in Bootstrap 4. Just mix some display and gap helper classes. Using helper classes instead of button-only classes gives you much more control over spacing, alignment, and how things look on different screen sizes.

Example HTML code for block level Buttons

<div class="d-grid gap-2">
  <button type="button" class="btn btn-primary btn-lg">Block level button</button>
  <button type="button" class="btn btn-secondary">Block level button</button>
</div>

Selections

The J1 Template supports two kinds of selection items: checkboxes and radio buttons. These replace the default Bootstrap toggle-buttons so they look nicer.

Checkboxes

Use checkboxes when you want visitors to be able to pick any number of options from a list of fixed choices.

Unchecked Checkbox

Checked Checkbox

Disabled Checkbox

Checked but disabled Checkbox

Example HTML code for Checkboxes

<div class="checkbox">
  <label>
    <input type="checkbox">
    Unchecked Checkbox
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" checked>
    Checked Checkbox
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" disabled>
    Disabled Checkbox
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" disabled checked>
    Checked but disabled checkbox
  </label>
</div>

Radio buttons

Use radio buttons when you want visitors to pick just one option from a list of fixed choices.

Unchecked Radio button

Checked Radio button

Disabled Radio button

Checked but disabled Radio button

Example HTML code for Radio Buttons

<div class="radio">
  <label>
    <input type="radio" name="radio">
    Unchecked Radio button
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="radio" checked>
    Checked Radio button
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="radio" disabled>
    Disabled Radio button
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" disabled checked>
    Checked but disabled Radio button
  </label>
</div>

Switches

You can use a different style instead of the standard J1 checkboxes: the Material Design switch. Switches work the same as checkboxes. Use them when you want visitors to pick any number of options from a list of fixed choices.

Unchecked Switch

Checked Switch

Disabled Switch

Checked but disabled Switch

Example HTML code for Switches

<div class="switch">
  <label>
    <input type="checkbox">
    Unchecked Switch
  </label>
</div>
<div class="switch">
  <label>
    <input type="checkbox" checked>
    Checked Switch
  </label>
</div>
<div class="switch">
  <label>
    <input type="checkbox" disabled>
    Disabled Switch
  </label>
</div>
<div class="switch">
  <label>
    <input type="checkbox" disabled checked>
    Checked but disabled Switch
  </label>
</div>

Floating Action Button (FAB)

Floating Action Buttons (FABs) were first used on Android phones, but they are now common on web pages too. On the web, FABs are usually for extra actions on a page — for example, jumping to a different part of the same page.

Google Material Design — Floating action buttons

Example HTML code for a Floating Action Button

<button type="button" class="btn btn-fab btn-primary" aria-label="fab-button">
  <i class="mdi mdi-plus"></i>
</button>

Raised FAB

To make floating action buttons look like they pop out (a 3D effect), add the extra CSS class for raising: raised-zX. J1 has 25 levels of raise, from 0 to 24.

Example HTML code for raised FABs

<button type="button" class="btn btn-fab btn-primary raised-z5" aria-label="fab-button">
  <i class="mdi mdi-plus"></i>
</button>
<button type="button" class="btn btn-fab btn-primary raised-z10" aria-label="fab-button">
  <i class="mdi mdi-plus"></i>
</button>
<button type="button" class="btn btn-fab btn-primary raised-z24" aria-label="fab-button">
  <i class="mdi mdi-plus"></i>
</button>

Pulsed FAB

Draw attention to a floating action button (FAB) with this small but eye-catching effect.

Example HTML code for a pulsed FAB

<button type="button" class="btn btn-fab btn-primary pulsed-z3" aria-label="fab-button">
  <i class="mdi mdi-plus"></i>
</button>

Mini FAB

A smaller mini version of the floating action button (FAB) is also available.

Example HTML code for a Mini FAB

<button type="button" class="btn btn-danger btn-fab btn-fab-sm" aria-label="fab-button-small">
  <i class="mdi mdi-plus"></i>
</button>

Mini FAB raised

You can also raise Mini FAB buttons by adding the raised CSS class: raised-zX. J1 has 25 levels of raise, from 0 to 24.

Example HTML code for a raised mini FAB

<button type="button" class="btn btn-fab btn-fab-sm btn-primary raised-z5 mr-3" aria-label="fab-button">
  <i class="mdi mdi-plus"></i>
</button>

Colors

For floating action buttons (FABs), you can use any of the Bootstrap button color classes.

Example HTML code for colored FAB Buttons

<button type="button" class="btn btn-fab btn-primary" aria-label="fab-button-primary">
  <i class="mdi mdi-plus"></i>
</button>
<button type="button" class="btn btn-fab btn-secondary" aria-label="fab-button-secondary">
  <i class="mdi mdi-plus"></i>
</button>
<button type="button" class="btn btn-fab btn-danger" aria-label="fab-button-danger">
  <i class="mdi mdi-plus"></i>
</button>
<button type="button" class="btn btn-fab btn-info" aria-label="fab-button-info">
  <i class="mdi mdi-plus"></i>
</button>
<button type="button" class="btn btn-fab btn-success" aria-label="fab-button-success">
  <i class="mdi mdi-plus"></i>
</button>
<button type="button" class="btn btn-fab btn-warning" aria-label="fab-button-warning">
  <i class="mdi mdi-plus"></i>
</button>
<button type="button" class="btn btn-fab btn-dark" aria-label="fab-button-dark">
  <i class="mdi mdi-plus"></i>
</button>
<button type="button" class="btn btn-fab btn-light" aria-label="fab-button-light">
  <i class="mdi mdi-plus"></i>
</button>

Disabled FAB

FAB buttons can be made inactive (greyed out) by adding the disabled attribute to the <button> item.

Example HTML code for disabled FAB Buttons

<button type="button" class="btn btn-fab btn-primary disabled" aria-label="fab-button">
  <i class="mdi mdi-plus"></i>
</button>

Typography

Typography is a Bootstrap feature for styling and shaping the text on your pages. With it, you can build custom headings, in-line subheadings, lists, paragraphs, text alignment, fancy font styles, and much more.

All typography features start with the default font family. J1 uses Roboto as its default font, at a size of 16px. This is different from the usual Bootstrap setup, which uses Helvetica by default.

Bootstrap Docs — Typography

Headings

HTML headings are helpful because they show important topics and the structure of your page. HTML5 has six heading sizes, from <h1> to <h6>. The lower the number, the more important the heading. So <h1> is the most important heading on a page, and <h6> is the least important.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 3 with muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Blockquotes

The HTML <blockquote> item shows text taken from another source. Blockquotes are usually shown with extra space on the left and right, plus some extra space above and below.

In Bootstrap, you can style quotes in fancier ways using the <blockquote> item along with the extra CSS class .blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in history

Tables

Designing tables can be tricky. The J1 Template uses plain CSS on top of the usual Bootstrap styles. This keeps things simple and makes the tables look good on any device or browser.

Bootstrap Docs — Tables

Type	Column heading	Column heading	Column heading
Active	Column content	Column content	Column content
Default	Column content	Column content	Column content
Primary	Column content	Column content	Column content
Secondary	Column content	Column content	Column content
Success	Column content	Column content	Column content
Danger	Column content	Column content	Column content
Warning	Column content	Column content	Column content
Info	Column content	Column content	Column content
Light	Column content	Column content	Column content
Dark	Column content	Column content	Column content

Forms

Forms are how you collect info from visitors. Web forms (or just forms) are one of the main ways a visitor talks to your website or app. With a form, a visitor can enter info, which is then sent to a web server to be handled.

Below are a few examples that show off Bootstrap’s form styles. Keep reading to learn about the classes you need, how to lay out a form, and more.

Make sure to set the right type for each input. For example, use email for an email address and number for numbers. This way you can take advantage of newer features like email checking, number pickers, and more.

Bootstrap Docs — Forms

You can style text-based form items — like <input>, <select>, and <textarea> — with the form control class .form-control. This class adds styles for the look, focus state, size, and more.

For file inputs, swap the .form-control class for the file input class .form-control-file.

Default file input example

Multiple files input example

Disabled file input example

Small file input example

Large file input example

Navs

Navigation items in Bootstrap all share the same base setup and styles — from the basic nav class .nav to the active and disabled states. Just swap out a class to change between styles.

The basic NAV CSS style .nav uses flexbox, which is a strong base for building all navigation items. It includes a few style tweaks — for example, to work nicely with lists, to make link click areas bigger, and basic styling for disabled items.

Bootstrap Docs — Navs

Tabs

Tabs use the basic nav from above and add the tabs class .nav-tabs to turn it into tabs. Use them with the Bootstrap V5 tab JavaScript add-on to make clickable tab sections.

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

Pills

Use the same HTML as for Tabs, but swap in the NAV pills class .nav-pills.

This is some placeholder content the Disabled tab's associated content.

Breadcrumbs

Breadcrumbs show where the current page sits in your site’s structure. Bootstrap adds the small separator marks between the items for you using CSS.

The separators are added through the CSS ::before and content features.

Pagination

We use a wide block of connected links for our page numbering. They are easy to spot, easy to use, and have big click areas. Page numbering is built with HTML list items, so screen readers can tell visitors how many links there are. Wrap it in a <nav> item so screen readers and other helper tools know it is for navigation.

Indicators

In Bootstrap, indicators are small items used to catch your visitor’s attention. Alerts are pop-up messages that show success or report that something went wrong. Badges are small static items used to highlight something — for example, to point out something new.

Alerts

Alerts are messages that give visitors feedback after doing something. A few different alert styles are available to fit the situation.

Alerts work for any length of text. They can also have a close button if you want. To style them right, use one of the eight alert classes (for example, .alert-success). To make them close when clicked, use the alerts jQuery add-on.

Bootstrap Docs — Alerts

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Badges

Badges are small items used to show counts or labels. They grow or shrink to match the size of the item they sit next to (using relative font sizes).

Just note: depending on how you use them, badges may confuse screen readers and other helper tools. The badge style is a visual hint, but screen reader users hear only the badge’s text. So in some cases, badge text may sound like random extra words or numbers at the end of a sentence, link, or button.

Bootstrap Docs — Badge

Primary Secondary Success Danger Warning Info Light Dark

Scrollbars

Chromium-based browsers — like Chrome, Edge, Safari, and Opera — support the webkit ::-webkit-scrollbar style. With it, you can change how the browser’s scrollbar looks.

Custom webkit-based scrollbars do not work in the Firefox browser.

Default scrollbar (J1 Template)

::-webkit-scrollbar {
	width: 12px;
	background-color: $grey-100;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px $darken-300;
  border-radius: 0px;
  background-color: $grey-100;
}
::-webkit-scrollbar-thumb {
	-webkit-box-shadow: inset 0 0 6px $lighten-300;
	background-color: $grey-800;
}

The J1 Template comes with the following scrollbars ready to use.

Progress

Bootstrap’s progress bars can be stacked, given animated backgrounds, and labeled with text. They are built from two HTML items, plus some CSS to set the width and a few extra options. We do not use the HTML5 <progress> item. This way, you can stack progress bars, animate them, and put text labels on top.

Bootstrap Docs — Progress

Basic

Example HTML code for a basic Progressbar

<div class="progress">
  <div  class="progress-bar" role="progressbar"
    style="width: 25%;"
    aria-valuenow="25"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-label="Progress Bar">
  </div>
</div>

Contextual alternatives

Example HTML code for a progressbar of type SUCCESS

<div class="progress">
  <div  class="progress-bar bg-success" role="progressbar"
    style="width: 25%;"
    aria-valuenow="25"
    aria-valuemin="0"
    aria-valuemax="100" aria-label="Progress Bar">
  </div>
</div>

Multiple bars

Striped

Animated

Lists

Lists are a handy way to show a group of items inside one HTML item.

An item
A second item
A third item
A fourth item
And a fifth one

Cards

Bootstrap cards are boxes for your content. They come in many styles and with many options. You can add headers and footers, all kinds of content, background colors, and other layout options.

If you used Bootstrap 3, cards take the place of the old panels, wells, and thumbnails. You can get the same look as those by using extra class names on cards.

Cards use very little HTML and styling, but you still get many ways to make them your own. They use flexbox, which makes them easy to line up and mix with other Bootstrap items. They have no spacing around them by default, so use spacing helper classes as needed.

Bootstrap Docs — Card