Post
Ask Question

How To Create DropDown And Pagination In Bootstrap 4

Introduction

In this article, I am going to explain how to use the Bootstrap 4 dropdowns and pagination in your project. A dropdown menu is a toggle-able menu that allows users to choose a value from the predefined list. The dropdown is done with HTML markup, while Bootstrap handles the JavaScript behind it. The Bootstrap 4 dropdown may contain a list of links that can be used in navbars. Bootstrap 4 has built-in pagination classes that can be created using CSS classes. A single page is divided into multiple pages and the user can navigate from one page to another page using the pagination component.

To use Bootstrap 4 in your project, you need to have the following downloaded or cdn scripts. It should be added in a <head> tag.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Dropdowns

DropDown can be used as a contextual menu and in the navbars. An example of contextual menu usage can be using the dropdown in textarea with different options. In navbar, it contains a list of links for certain categories.

To create DropDowns in Bootstrap 4, add the following classes.

  1. Add the class .dropdown menu to the <div> tag.
  2. Add the class like .dropdown-item to display item to <a> tag.

Add the following code to create the responsive DropDowns in your project.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">press 1</a>
    <a class="dropdown-item" href="#">press 2</a>
    <a class="dropdown-item" href="#">press 3</a>
  </div>
</div>

Split Button DropDowns

Split button dropdowns and dropdown buttons use similar style but split button dropdown adds primary action along with the dropdown. Split buttons have primary actions on the left and toggle on the right that displays the dropdown.

Add the following code to create the responsive Split Button Dropdowns in your project.

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Action phase 2</a>
    <a class="dropdown-item" href="#">Else</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Add Info</a>
  </div>
</div>

The output of responsive drop-down

Responsive Drop-down

The output of responsive Split Button Dropdowns

Split Button

Pagination

Pagination is used to provide information to the user about the number of available pages in the project. Pagination is important in multi-page webpages, where the user gets knowledge about available pages in prior versions.

To create pagination in Bootstrap 4, add the following classes.

  1. Add the class .pagination menu to the <ul> tag.
  2. Add the class like .page-item to display item to the <li> tag.
  3. Add the class like .page-link to <a>tag to navigate to particular page.
  4. Add the class like .active to specify the current page and .disabled to disable the option.
  5. Add the class like .pagination-lg and .pagination-sm to create large and small pagination.

Add the following code to create the responsive pagination in your project.

<div class="container-fluid">
  <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>
</div>

The output of responsive pagination

Responsive Pagination 

Summary

In this basic article, you saw how to use dropdowns and pagination to create a responsive webpage using Bootstrap 4. Hope you found this article interesting. For any feedback, please post your comment at the bottom of this article. Thank you!


Similar Articles