Bootstrap Buttons:

Bootstrap Show Next Item Title in Pagination Button

Separating the content of the website is one of the most interesting elements of any page. If you like to engage your visitors, it is better to do so. This post contains the Bootstrap Show Next Item Title in Pagination Button that has the same purpose. If you choose this Bootstrap Pagination Button, you can increase the attraction of your page. As a result, you will increase the number of your users. This HTML Next Button Code helps you to improve your page in a short time.

As you see in the preview of the JavaScript Pagination Button, this code has a simple design with blue text. You can see some titles on the right side of the page and there are two fields on the left side. All of these sections in this Next Item Button Code have a blue color. Two fields on the left side are designed for moving to the next and previous title. If you click on the “Next” button, you will move forward and see the next page. As you choose the “Prev” category, you can see the previous text easily. The color of the selected title is blue and after clicking, it changes to red.

Bootstrap Pagination Button

HTML Next Button Code

Javascript Pagination Button

Next Item Button Code

<!-- This script got from frontendfreecode.com -->
<div class="container-fluid container-fluid-max-xl mt-5">
    <div class="row">
        <div class="col-8">
            <div class="btn-group">
                <button id="btnPrevTab" type="button" class="btn btn-outline-primary text-left">
                    <div>Prev</div>
                    <div class="btn-text"></div>
                </button>
                <button id="btnNextTab" type="button" class="btn btn-outline-primary text-right">
                    <div>Next</div>
                    <div class="btn-text"></div>
                </button>
            </div>
        </div>
        <div class="col-4">
            <ul class="nav nav-stacked">
                <li class="nav-item"><a class="active nav-link" href="#1">Details</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Categorization</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Site Template</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Configuration</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Identification</a></li>
            </ul>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.active {
  color: red;
}
.btn .btn-text {
  font-size: 13px;
  color: #00748b;
  text-decoration: none;
}
.btn:hover .btn-text {
  text-decoration: underline;
}

/**** Variables ****/
var tocTabs = $('ul li a');
var pageSize = 1;
var currentPage = 1;
var pagedResults = [];
var totalResults = tocTabs.length;
var fullFace = Math.max(document.documentElement.clientWidth, window.innerWidth);
var total = tocTabs.length;
var selected = $("ul li.active");
/**** Functions ****/
function updateList() {
    // Grab the required section of results from the tocTabs list
    var end = currentPage * pageSize;
    var start = end - pageSize;
    pagedResults = tocTabs.slice(start, end);
    // Disable the previous button if we are on the first page
    if (currentPage <= 1) {
        $("#btnPrevTab").prop("disabled", true);
        $("#btnPrevTab").find('.btn-text').text('');
    } else {
        // Enable the previous button if we are not on the first page
        $("#btnPrevTab").prop("disabled", false);
        var previous = $('ul').find('a.active').closest('li').prev().find('a').text();
        $("#btnPrevTab").find('.btn-text').text(previous);
    }
    // Disable the next button if we are on the last page
    if (currentPage * pageSize >= totalResults) {
        $("#btnNextTab").prop("disabled", true);
        $("#btnNextTab").find('.btn-text').text('');
    } else {
        // Enable the next button if we are not on the last page
        $("#btnNextTab").prop("disabled", false);
        var next = $('ul').find('a.active').closest('li').next().find('a').text();
        $("#btnNextTab").find('.btn-text').text(next);
    }
}
/**** On Page Load ****/
$(function () {
    updateList();
    $('#btnPrevTab').on('click', function () {
        $(".nav-stacked").find("a.nav-link.active").removeClass('active').parent().prev("li").find("a.nav-link").addClass('active');
        if (currentPage > 1) currentPage--;
        updateList();
        // alert('previous');
    });
    $('#btnNextTab').on('click', function () {
        $(".nav-stacked").find("a.nav-link.active").removeClass('active').parent().next("li").find("a.nav-link").addClass('active');
        if ((currentPage * pageSize) <= totalResults) currentPage++;
        updateList();
        // alert('next');
    });
});

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@clayui/css@3.0.0/lib/css/atlas.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/clay/lib/js/clay.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@clayui/css@3.0.0/lib/css/atlas.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/clay/lib/js/clay.js'></script>
<style>
.active {
  color: red;
}
.btn .btn-text {
  font-size: 13px;
  color: #00748b;
  text-decoration: none;
}
.btn:hover .btn-text {
  text-decoration: underline;
}
</style>

</head>
<body>
<div class="container-fluid container-fluid-max-xl mt-5">
    <div class="row">
        <div class="col-8">
            <div class="btn-group">
                <button id="btnPrevTab" type="button" class="btn btn-outline-primary text-left">
                    <div>Prev</div>
                    <div class="btn-text"></div>
                </button>
                <button id="btnNextTab" type="button" class="btn btn-outline-primary text-right">
                    <div>Next</div>
                    <div class="btn-text"></div>
                </button>
            </div>
        </div>
        <div class="col-4">
            <ul class="nav nav-stacked">
                <li class="nav-item"><a class="active nav-link" href="#1">Details</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Categorization</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Site Template</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Configuration</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Identification</a></li>
            </ul>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
/**** Variables ****/
var tocTabs = $('ul li a');
var pageSize = 1;
var currentPage = 1;
var pagedResults = [];
var totalResults = tocTabs.length;
var fullFace = Math.max(document.documentElement.clientWidth, window.innerWidth);
var total = tocTabs.length;
var selected = $("ul li.active");
/**** Functions ****/
function updateList() {
    // Grab the required section of results from the tocTabs list
    var end = currentPage * pageSize;
    var start = end - pageSize;
    pagedResults = tocTabs.slice(start, end);
    // Disable the previous button if we are on the first page
    if (currentPage <= 1) {
        $("#btnPrevTab").prop("disabled", true);
        $("#btnPrevTab").find('.btn-text').text('');
    } else {
        // Enable the previous button if we are not on the first page
        $("#btnPrevTab").prop("disabled", false);
        var previous = $('ul').find('a.active').closest('li').prev().find('a').text();
        $("#btnPrevTab").find('.btn-text').text(previous);
    }
    // Disable the next button if we are on the last page
    if (currentPage * pageSize >= totalResults) {
        $("#btnNextTab").prop("disabled", true);
        $("#btnNextTab").find('.btn-text').text('');
    } else {
        // Enable the next button if we are not on the last page
        $("#btnNextTab").prop("disabled", false);
        var next = $('ul').find('a.active').closest('li').next().find('a').text();
        $("#btnNextTab").find('.btn-text').text(next);
    }
}
/**** On Page Load ****/
$(function () {
    updateList();
    $('#btnPrevTab').on('click', function () {
        $(".nav-stacked").find("a.nav-link.active").removeClass('active').parent().prev("li").find("a.nav-link").addClass('active');
        if (currentPage > 1) currentPage--;
        updateList();
        // alert('previous');
    });
    $('#btnNextTab').on('click', function () {
        $(".nav-stacked").find("a.nav-link.active").removeClass('active').parent().next("li").find("a.nav-link").addClass('active');
        if ((currentPage * pageSize) <= totalResults) currentPage++;
        updateList();
        // alert('next');
    });
});
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS