Bootstrap made it easy to define breadcrumb navigation. Just use the class
"breadcrumb" and your breadcrumb navigation will be created. But before that
don't forget to include bootstrap.css file in your page.
Click here to
learn detail about bootstrap and download the required files.
<ul class="breadcrumb"> <li><a href="#">Home</a> <span class="divider">|</span></li> <li><a href="#">About Us</a> <span class="divider">|</span></li> <li class="active">Our Mission</li> </ul>
<nav aria-label="Page navigation example"> <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> </nav>
.active
class to make pagination active and .disabled
class to make it inactive.
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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 <span class="sr-only">(current)</span></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> </nav>
.pagination-lg
, .pagination-sm
or
.pagination
according to your use. <nav aria-label="Page navigation example"> <ul class="pagination pagination-lg"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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> </ul> </nav> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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> </ul> </nav> <nav aria-label="Page navigation example"> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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> </ul> </nav>