---
title: "Other"
group: bootstrap-ui
---
<div class="row">
  <div class="col-sm-12 col-lg-10 offset-lg-1">
    <div class="row">
      <div class="col-12 col-sm-6">
        <h5 id="Breadcrumbs">Breadcrumbs</h5>
        <div class="mb-4">
          <div>
            <nav aria-label="breadcrumb" class="">
              <ol class="breadcrumb">
                <li aria-current="page" class="active breadcrumb-item">Home</li>
              </ol>
            </nav>
            <nav aria-label="breadcrumb" class="">
              <ol class="breadcrumb">
                <li class="breadcrumb-item">
                  <a href="#">Home</a>
                </li>
                <li aria-current="page" class="active breadcrumb-item">Library</li>
              </ol>
            </nav>
            <nav aria-label="breadcrumb" class="">
              <ol class="breadcrumb">
                <li class="breadcrumb-item">
                  <a href="#">Home</a>
                </li>
                <li class="breadcrumb-item">
                  <a href="#">Library</a>
                </li>
                <li aria-current="page" class="active breadcrumb-item">Data</li>
              </ol>
            </nav>
          </div>
        </div>
        <h5 id="Collapse">Collapse</h5>
        <div class="mb-4">
          <div>
            <p>
              <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                Link with href
              </a>
              <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                Button with data-target
              </button>
            </p>
            <div class="collapse" id="collapseExample">
              <div class="card card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
            </div>
          </div>
        </div>
        <h5 id="Pagination">Pagination</h5>
        <div class="mb-4">
          <nav aria-label="Page navigation example" class="">
            <ul class="pagination">
              <li class="page-item">
                <a aria-label="First" class="page-link" href="#">
                  <span aria-hidden="true">«</span>
                  <span class="sr-only">First</span>
                </a>
              </li>
              <li class="page-item">
                <a aria-label="Previous" class="page-link" href="#">
                  <span aria-hidden="true">‹</span>
                  <span class="sr-only">Previous</span>
                </a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">3</a>
              </li>
              <li class="page-item">
                <a aria-label="Next" class="page-link" href="#">
                  <span aria-hidden="true">›</span>
                  <span class="sr-only">Next</span>
                </a>
              </li>
              <li class="page-item">
                <a aria-label="Last" class="page-link" href="#">
                  <span aria-hidden="true">»</span>
                  <span class="sr-only">Last</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <h5 id="Disabled-and-active-states">Disabled and active states</h5>
        <div class="mb-4">
          <nav aria-label="Page navigation example" class="">
            <ul class="pagination">
              <li class="page-item disabled">
                <a aria-label="First" class="page-link" href="#">
                  <span aria-hidden="true">«</span>
                  <span class="sr-only">First</span>
                </a>
              </li>
              <li class="page-item disabled">
                <a aria-label="Previous" class="page-link" href="#">
                  <span aria-hidden="true">‹</span>
                  <span class="sr-only">Previous</span>
                </a>
              </li>
              <li class="page-item active">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">3</a>
              </li>
              <li class="page-item">
                <a aria-label="Next" class="page-link" href="#">
                  <span aria-hidden="true">›</span>
                  <span class="sr-only">Next</span>
                </a>
              </li>
              <li class="page-item">
                <a aria-label="Last" class="page-link" href="#">
                  <span aria-hidden="true">»</span>
                  <span class="sr-only">Last</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <h5 id="Sizing">Sizing</h5>
        <div class="mb-4">
          <nav aria-label="Page navigation example" class="">
            <ul class="pagination pagination-lg">
              <li class="page-item">
                <a aria-label="First" class="page-link" href="#">
                  <span aria-hidden="true">«</span>
                  <span class="sr-only">First</span>
                </a>
              </li>
              <li class="page-item">
                <a aria-label="Previous" class="page-link" href="#">
                  <span aria-hidden="true">‹</span>
                  <span class="sr-only">Previous</span>
                </a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">3</a>
              </li>
              <li class="page-item">
                <a aria-label="Next" class="page-link" href="#">
                  <span aria-hidden="true">›</span>
                  <span class="sr-only">Next</span>
                </a>
              </li>
              <li class="page-item">
                <a aria-label="Last" class="page-link" href="#">
                  <span aria-hidden="true">»</span>
                  <span class="sr-only">Last</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <div class="mb-4">
          <nav aria-label="Page navigation example" class="">
            <ul class="pagination pagination-sm">
              <li class="page-item">
                <a aria-label="First" class="page-link" href="#">
                  <span aria-hidden="true">«</span>
                  <span class="sr-only">First</span>
                </a>
              </li>
              <li class="page-item">
                <a aria-label="Previous" class="page-link" href="#">
                  <span aria-hidden="true">‹</span>
                  <span class="sr-only">Previous</span>
                </a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">3</a>
              </li>
              <li class="page-item">
                <a aria-label="Next" class="page-link" href="#">
                  <span aria-hidden="true">›</span>
                  <span class="sr-only">Next</span>
                </a>
              </li>
              <li class="page-item">
                <a aria-label="Last" class="page-link" href="#">
                  <span aria-hidden="true">»</span>
                  <span class="sr-only">Last</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
      <div class="col-12 col-sm-6">
        <h5 id="Popovers">Popovers</h5>
        <div class="mb-4">
          <div>
            <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
              Popover on top
            </button>

            <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
              Popover on right
            </button>

            <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
            sagittis lacus vel augue laoreet rutrum faucibus.">
              Popover on bottom
            </button>

            <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
              Popover on left
            </button>
          </div>
        </div>

        <h5 id="Tabs">Tabs</h5>
        <div class="mb-4">
          <div>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
              </li>
            </ul>
            <div class="tab-content" id="myTabContent">
              <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
              <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
              <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
            </div>
          </div>
        </div>
        <h5 id="Tooltips">Tooltips</h5>
        <div class="mb-4">
          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
            Tooltip on top
          </button>
          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
            Tooltip on right
          </button>
          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
            Tooltip on bottom
          </button>
          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
            Tooltip on left
          </button>
        </div>

        <h5>Spinners</h5>
        <div class="mb-4">
          <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <div class="spinner-border text-secondary" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <div class="spinner-border text-success" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <div class="spinner-border text-danger" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <div class="spinner-border text-warning" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <div class="spinner-border text-info" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <div class="spinner-border text-light" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <div class="spinner-border text-dark" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>


        <div class="media">
          <img src="images/unsplash/1.jpg" width="64" class="mr-3" alt="...">
          <div class="media-body">
            <h5 class="mt-0">Media heading</h5>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </div>
        </div>

      </div>
    </div>
  </div>
</div>