Bootstrap Class Part 2

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</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 class="page-link" href="#">Next</a></li>
</ul>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><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 class="page-link" href="#">Next</a></li>
</ul>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Previous</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 class="page-link" href="#">Next</a></li>
</ul>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">Previous</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 class="page-link" href="#">Next</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">Previous</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 class="page-link" href="#">Next</a></li>
</ul>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<!-- Default (left-aligned) -->

<ul class="pagination" style="margin:20px 0">

  <li class="page-item">...</li>

</ul>

<!-- Center-aligned -->

<ul class="pagination justify-content-center" style="margin:20px 0">

  <li class="page-item">...</li>

</ul>

<!-- Right-aligned -->

<ul class="pagination justify-content-end" style="margin:20px 0">

  <li class="page-item">...</li>

</ul>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<ul class="breadcrumb">

  <li class="breadcrumb-item"><a href="#">Photos</a></li>

  <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>

  <li class="breadcrumb-item"><a href="#">Italy</a></li>

  <li class="breadcrumb-item active">Rome</li>

</ul>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<ul class="list-group list-group-flush">

  <li class="list-group-item">First item</li>

  <li class="list-group-item">Second item</li>

  <li class="list-group-item">Third item</li>

  <li class="list-group-item">Fourth item</li>

</ul>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<ol class="list-group list-group-numbered">

  <li class="list-group-item">First item</li>

  <li class="list-group-item">Second item</li>

  <li class="list-group-item">Third item</li>

</ol>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<ul class="list-group list-group-horizontal">

  <li class="list-group-item">First item</li>

  <li class="list-group-item">Second item</li>

  <li class="list-group-item">Third item</li>

  <li class="list-group-item">Fourth item</li>

</ul>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<div class="list-group">

  <a href="#" class="list-group-item list-group-item-action">Action item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>

</div>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<ul class="list-group">

  <li class="list-group-item d-flex justify-content-between align-items-center">

    Inbox

    <span class="badge bg-primary rounded-pill">12</span>

  </li>

  <li class="list-group-item d-flex justify-content-between align-items-center">

    Ads

    <span class="badge bg-primary rounded-pill">50</span>

  </li>

  <li class="list-group-item d-flex justify-content-between align-items-center">

    Junk

    <span class="badge bg-primary rounded-pill">99</span>

  </li>

</ul>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<div class="card">
  <div class="card-body">Basic card</div>
</div>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<div class="card">

  <div class="card-body">

    <h4 class="card-title">Card title</h4>

    <p class="card-text">Some example text. Some example text.</p>

    <a href="#" class="card-link">Card link</a>

    <a href="#" class="card-link">Another link</a>

  </div>

</div>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<div class="card" style="width:400px">

  <img class="card-img-top" src="img_avatar1.png" alt="Card image">

  <div class="card-body">

    <h4 class="card-title">John Doe</h4>

    <p class="card-text">Some example text.</p>

    <a href="#" class="btn btn-primary">See Profile</a>

  </div>

</div>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<div class="card" style="width:500px">

  <img class="card-img-top" src="img_avatar1.png" alt="Card image">

  <div class="card-img-overlay">

    <h4 class="card-title">John Doe</h4>

    <p class="card-text">Some example text.</p>

    <a href="#" class="btn btn-primary">See Profile</a>

  </div>

</div>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx