Components

Alerts

<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-warning" role="alert">
  <h5 class="alert-heading mb-0">Alert Title</h5>
  A simple warning alert with <a href="#" class="alert-link">an example link</a>
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Breadcrumbs

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Buttons

Bootstrap provided several color variants of buttons. We don't recommend you to use all of them. Instead, you should use as less variants as possible.

Only the following color variants are recommended:

Filled

Bordered

Cards

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere

Dropdowns

<div class="dropdown">
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item active" href="#">Another action</a>
    <a class="dropdown-item disabled" href="#">Something else here</a>
  </div>
</div>

Footer

With only copyright information

<footer class="footer">
  <div class="container">
    &copy; 2011&ndash;2020 openSUSE contributors
  </div>
</footer>

With links

<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        &copy; 2011&ndash;2020 openSUSE contributors
      </div>
      <div class="col-sm-6 text-sm-right">
        <ul class="list-inline mb-0">
          <li class="list-inline-item"><a href="#">Source code</a></li>
          <li class="list-inline-item"><a href="#">Privacy</a></li>
          <li class="list-inline-item"><a href="#">Support</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Inputs

Text, search, email, password inputs have the same appearance. They are just single element components.

Selects, checkboxs, radio buttons and file inputs should use custom control.

List Group

Please don't use contextual classes.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Modals

Tables

<div class="table-responsive">
  <table class="table">
    <caption>
      List of users
    </caption>
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>