Agency

J1 Template themes are used for multifunctional Bootstrap V5 websites to create fully responsive web pages. The Template system offers various unique functionalities compared to other Jekyll themes and templates.

15-30 Minutes to read

Bootstrap themes are used to customize the appearance of a website founded on the basic rules and definitions of Bootstrap’s CSS styles. The use or change of a theme does not alter the functionality of the underlying Bootstrap framework but modifies, for example, the color scheme, fonts, or font sizes.

Navbars

A navbar is an elementary page element, usually integrated at the top of your page for navigation. Bootstrap offers many navigation functions that are minimized on smartphones and thus always remain easy to use.

Bootstrap Docs — Navbar

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from the navbar light class .navbar-light for use with light background colors, or the navbar dark class .navbar-dark for dark background colors. Then, customize with the background utilities .bg-*.

Navbar
  • Home (current)
  • Features
  • Pricing
  • About
  • Dropdown
    Action Another action Something else here
    Separated link
Navbar
  • Home (current)
  • Features
  • Pricing
  • About
  • Dropdown
    Action Another action Something else here
    Separated link
Navbar
  • Home (current)
  • Features
  • Pricing
  • About
  • Dropdown
    Action Another action Something else here
    Separated link
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 important visual anchors that encourage visitors to click on them to call up to click on certain pages and offers on a website. Well-designed buttons are usable instead of simple text links. With the use of buttons, a higher visiting rate of important pages of a site is achievable.

The Bootstrap framework offers different buttons out of the box, which is sufficient for most use cases. Buttons are suitable for the following HTML elements:

  • Anchor links (anchors)

  • Form buttons (input)

  • General buttons (button)

Defining a standard button in Bootstrap is very simple: assign the base CSS class for buttons .btn to an HTML element. The following sections describe the different types of available buttons and how they are to be defined.

Bootstrap Docs — Buttons

Active buttons

Active buttons will appear with a darker background and border. If pressed, a ripple effect is shown for feedback.

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

Disabled buttons

Buttons look inactive by adding the disabled boolean attribute to any <button> element.

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

In need of a button, but not a hefty background color they bring? Replace the default modifier with the button outline classes .btn-outline-* to remove all background images and colors on any 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>

Dropdown buttons

In need of a button having a little menu, buttons with a (nested) dropdown (menu) can be used.

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
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

Beside the default size, small and large buttons are available.

Example HTML code for Button sizes
<button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-raised">Default button</button>
<button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>

Pulsed button

Draw attention to a button, e.g for a recommended action.

Example HTML code for a pulsed Button
  <button type="button" class="btn btn-primary btn-raised pulsed-z2">Primary</button>

Block level button

Create responsive stacks of full-width block buttons like those in BS@4 with a mix of display and gap utilities. By using utilities instead of button specific classes, you have much greater control over spacing, alignment, and responsive behaviors.

Example HTML code for block level Buttons
<div class="d-grid gap-2">
  <button type="button" class="btn btn-primary btn-lg btn-raised">Block level button</button>
  <button type="button" class="btn btn-secondary btn-raised">Block level button</button>
</div>

Selections

J1 Template support two selection elements: checkboxes and radio buttons. These selection elements replace the default Bootstrap toggle-buttons for a better style.

Checkboxes

Checkboxes are used if you want users to select any number of options from a list of preset (available) options.

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

Radio buttons are used if you want to limit users to just one selection from a list of preset (available) options.

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 an alternative to standard J1 checkboxes: the Material Design styled element switch. Switches behave the same as checkboxes to want users to select any number of options from a list of preset (available) options.

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 are adopted navigation elements from mobile devices (Android) but are used today quite often for web pages as well. Floating action buttons (FABs) for the web typically provide additional actions for a page, for example, in-page navigation.

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 put a 3D effect on floating action buttons, buttons can be raised by adding the additional CSS classes raised raised-zX. J1 supports 25 levels of raising HTML elements ranging 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 floating action buttons (FAB) with this subtle but captivating 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 sized, mini 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

Mini FAB buttons can be raised as well by adding the the additional CSS classes raised raised-zX. J1 supports 25 levels of raising HTML elements ranging 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 (FAB), all Bootstrap button color classes can be applied.

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 look inactive by adding the disabled boolean attribute to the <button> element.

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 feature of Bootstrap for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles, and much more.

The base for all typography features is the default font family. J1 is using Roboto for the default font at a font size of 16px. This setting is different from the standard Bootstrap configuration using the font family of Helvetica for the default.

Bootstrap Docs — Typography

Headings

HTML headings provide valuable information by highlighting important topics and the structure of the document. The HTML5 standard offers six levels of heading tags, ranging from <h1> through <h6>. The lower the heading level, the higher its importance. Therefore <h1> tag defines the most important heading, whereas the <h6> tag defines the least important heading in a document.

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 element <blockquote> specifies a section with content quoted from another source. Blockquotes are generally displayed with indented left and right margins, along with a little extra space added above and below.

For Bootstrap, are more complex styling of cites is available with the blockquote elements <blockquote> respectively the additional CSS class for blockquote elements .blockquote.

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

Someone famous in history

Tables

Creating a design for tables is challenging. The approach used by J1 Template is based on pure CSS on top of the classic Bootstrap styles for simplicity and portability to be viewed best on all devices and browsers.

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

For collecting structured data, forms are essential. So-called Web forms, in short forms, are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is sent, e.g., to a web server for processing.

Here are some examples to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

Be sure to use an appropriate type attribute on all inputs (e.g., email for the email address or the number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Bootstrap Docs — Forms

We'll never share your email with anyone else.

Textual form controls-like inputs <input>, selects <select>, and textarea elements <textarea> are styled with the form control class .form-control. Included are styles for general appearance, focus state, sizing, and more.

For file inputs, swap the form control class .form-control to the form control file class .form-control-file.

Navs

Navigation available in Bootstrap shares general markup and styles, from the base navigation class .nav class to the active and disabled states. Swap modifier classes to switch between each style.

The base NAV CSS style .nav is built with a flexbox and provides a strong foundation for building all navigation components. It includes some style overrides, for example to work with lists, link padding for larger hit areas, and basic disabled styling.

Bootstrap Docs — Navs

Tabs

Tabs takes the basic nav from above and adds the tabs class .nav-tabs to generate a tabbed interface. Use them to create tabbable regions with the Bootstrap V5 tab JavaScript plugin.

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

Take that same HTML as Tabs, but use the NAV pills class .nav-pills instead.

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.

Breadcrumbs

Breadcrumbs indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Separators are automatically added in CSS through ::before and content.

  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data

Pagination

We use a large block of connected links for our pagination, making links hard to miss and easily scalable   --   all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »

Indicators

With Bootstrap, indicators are elememts to raise the users awareness. Alerts are dynamic elememts that can be used to indicate success or something went wrong. Contrasting Badges, static BS elememts, to raise attention e.g for something *new.

Alerts

Alerts provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.

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 count and labeling components. They scale to match the size of the immediate parent element by using relative font sizing and em units.

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

Bootstrap Docs — Badge

Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark

Progress

Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

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 flexible and powerful component for displaying a series of content within an single HTML element.

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

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.

Bootstrap Docs — Card

Simple cards

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Action · Footer Link

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Action · Footer Link

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Action · Footer Link

Dialogs

Dialogs are important, interactive UI (user interface) components in Bootstrap to inform visitor of an website.

Modals

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

Bootstrap Docs — Modal

Table 1. Modal types
Type Description Launch Example

Base

Lauch the modal by clicking the button below. It will slide down and fade in from the top of the page.
Modal title

Modal body text goes here.

Static backdrop

This model is set to static and is will not close when clicking outside it (the backdrop).
Modal title

Modal body text goes here.

Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo and resize your browser for the height.
The Extremes of Good and Evil

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business is will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business is will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.

Scrollable long content

It#s also possible to create a scrollable modal that allows scroll the modal body. Try the demo and scroll the content.
The Extremes of Good and Evil

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business is will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business is will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.

Vertically centered

For important messages, center the modal.
Modal title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Tooltips and Popovers

Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

Modal title

Popover in a modal

This button triggers a popover on hover or click.

Tooltips in a modal

This link and that link have tooltips on hover.
Example HTML code for a base Modal
<!-- Trigger Button (modal) -->
<div class="ml-0">
  <button type="button"
    class="btn btn-primary btn-raised"
    data-bs-toggle="modal"
    data-bs-target="#exampleSimpleModal">
    Launch Example
  </button>
</div>
<!-- Modal -->
<div id="exampleSimpleModal"
  class="modal fade top"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleSimpleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button"
          class="btn btn-primary btn-flex btn-raised mr-2">
          Do nothing
        </button>
        <button
          type="button"
          class="btn btn-secondary btn-flex btn-raised"
          data-bs-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Tooltips and Popovers

Popovers and Tooltips rely on the 3rd party library Popper.js for positioning. To make them properly positioned, the Javascript library popper.min.js has to be included before bootstrap.js in order to make popovers and tooltips to work.

Bootstrap Docs — Tooltips

Example HTML code for Tooltips
  <button type="button" class="btn btn-primary btn-raised"
    data-bs-toggle="tooltip"
    data-bs-placement="top"
    title="Tooltip on top">Top
  </button>
  <button type="button" class="btn btn-primary btn-raised"
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    title="Tooltip on bottom">Bottom
  </button>
  <button type="button" class="btn btn-primary btn-raised"
    data-bs-toggle="tooltip"
    data-bs-placement="right"
    title="Tooltip on right">Right
  </button>
  <button type="button" class="btn btn-primary btn-raised"
    data-bs-toggle="tooltip"
    data-bs-placement="left"
    title="Tooltip on left">Left
  </button>

Bootstrap Docs — Popovers

Example HTML code for Popovers
  <button type="button" class="btn btn-primary btn-raised"
    title="Popover Title"
    data-container="body"
    data-bs-toggle="popover"
    data-bs-placement="top"
    data-bs-trigger="hover focus"
    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Top
  </button>
  <button type="button" class="btn btn-primary btn-raised"
    title="Popover Title"
    data-container="body"
    data-bs-toggle="popover"
    data-bs-placement="bottom"
    data-bs-trigger="hover focus"
    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Bottom
  </button>
  <button type="button" class="btn btn-primary btn-raised"
    title="Popover Title" data-container="body"
    data-bs-toggle="popover"
    data-bs-placement="right"
    data-bs-trigger="hover focus"
    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Right
  </button>
  <button type="button" class="btn btn-primary btn-raised"
    title="Popover Title"
    data-container="body"
    data-bs-toggle="popover"
    data-bs-placement="left"
    data-bs-trigger="hover focus"
    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Left
  </button>