JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container">
        <div class="row">
            <h1>Pagination Responsive</h1>
            <div class="col-md-6">
                <nav>
                  <ul class="pagination">
                    <li>
                      <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">7</a></li>
                    <li><a href="#">8</a></li>
                    <li><a href="#">9</a></li>
                    <li><a href="#">10</a></li>
                    <li>
                      <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
            </div>
        </div>
    </div>

JavaScript

/*
 * A plugin for making Bootstrap's pagination more responsive
 * https://github.com/auxiliary/rpage
 */

(function ($){
    jQuery.fn.rPage = function () {
        var $this = $(this);
        for(var i = 0, max = $this.length; i < max; i++)
        {
        	new rPage($($this[i]));
        }

        function rPage($container)
        {
        	this.label = function()
        	{
        		var active_index = this.els.filter(".active").index();
        		var rp = this;
        		this.els.each(function(){
        			if (rp.isNextOrPrevLink($(this)) == false)
        			{
        				$(this).addClass("page-away-" + (Math.abs(active_index - $(this).index())).toString());
        			}
        			else
        			{
        				if ($(this).index() > active_index)
        				{
        					$(this).addClass("right-etc");
        				}
        				else
        				{
        					$(this).addClass("left-etc");
        				}
        			}
        		});
        	}

        	this.makeResponsive = function()
    	    {
    	    	this.reset();
    	    	var width = this.calculateWidth();

    	    	while (width > this.els.parent().parent().outerWidth() - 10)
    	    	{
    	    		var did_remove = this.removeOne();
    	    		if (did_remove == false)
    	    		{
    	    			break;
    	    		}
    	    		width = this.calculateWidth();
    	    	}
    	    }

        	this.isNextOrPrevLink = function(element)
        	{
                return (
                    element.hasClass('pagination-prev')
                    || element.hasClass('pagination-next')
                    || element.text() == "»"
                    || element.text() == "«"
                );
        	}

        	this.isRemovable = function(element)
        	{
        		if (this.isNextOrPrevLink(element))
        		{
        			return false;
        		}
        		var index = this.els.filter(element).index();
        		if (index == 1 || this.isNextOrPrevLink($container.find("li").eq(index + 1)))
       ...