Pager with Bootstrap 3 layout

Product name	Category
Product 131	Food
Product 132	Shoes
Product 133	Shoes
Product 134	Electronics
Product 135	Food
Product 136	Shoes
Product 137	Shoes
Product 138	Electronics
Product 139	Food
Product 140	Shoes

Razor code

<!-- Bootstrap3.cshtml view -->

@using MvcPaging.Demo.Models
@model IPagedList<Product>
@{
	Layout = null;
	ViewBag.Title = "Pager with Bootstrap 3 layout";
}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>@ViewBag.Title</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Le styles -->
		<link href="@Url.Content("~/Content/Css/bootstrap3.min.css")" rel="stylesheet">
		<style>
			body {
				padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
			}
		</style>
	</head>
<body>
	<a class="sr-only" href="#content">Skip navigation</a>

	<!-- Docs master nav -->
	<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>
			<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
				<ul class="nav navbar-nav">
					<li>@Html.ActionLink("Home", "Index", "Home", new { area = String.Empty }, null)</li>
					<li>@Html.ActionLink("About", "About", "Home", new { area = String.Empty }, null)</li>s
				</ul>
			</nav>
		</div>
	</header>
	<div class="container">
		<h1>@ViewBag.Title</h1>

		<table class="table table-striped">
			<thead>
				<tr>
					<th>Product name</th>
					<th>Category</th>
				</tr>
			</thead>
			<tbody>
				@foreach (var product in Model) 
				{
					<tr>
						<td>@product.Name</td>
						<td>@product.Category</td>
					</tr>
				}
			</tbody>
		</table>
		@Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount).Options(o => o
			.DisplayTemplate("Bootstrap3Pagination")
			.MaxNrOfPages(14)
			.AlwaysAddFirstPageNumber()
		)
	</div>
</body>

<!-- Bootstrap3Pagination.cshtml DisplayTemplate -->

@model PaginationModel
<ul class="pagination">
	@foreach (var link in Model.PaginationLinks)
	{
		@BuildLink(link)
	}
</ul>

@helper BuildLink(PaginationLink link)
{
	var liBuilder = new TagBuilder("li");
	if (link.IsCurrent)
	{
		liBuilder.MergeAttribute("class", "active");
	}
	if (! link.Active)
	{
		liBuilder.MergeAttribute("class", "disabled");
	}

	var aBuilder = new TagBuilder("a");
	if (link.Url == null)
	{
		aBuilder.MergeAttribute("href", "#");
	}
	else
	{
		aBuilder.MergeAttribute("href", link.Url);
	}

	// Ajax support
	if (Model.AjaxOptions != null)
	{
		foreach (var ajaxOption in Model.AjaxOptions.ToUnobtrusiveHtmlAttributes())
		{
			aBuilder.MergeAttribute(ajaxOption.Key, ajaxOption.Value.ToString(), true);
		}
	}

	if (link.DisplayText == "«")
	{
		aBuilder.InnerHtml = "&laquo;";
	}
	else if (link.DisplayText == "»")
	{
		aBuilder.InnerHtml = "&raquo;";
	}
	else
	{
		aBuilder.SetInnerText(link.DisplayText);        
	}
	liBuilder.InnerHtml = aBuilder.ToString();

	@Html.Raw(liBuilder.ToString())
}

Controller code

public ActionResult Bootstrap(int? page)
{
	int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
	return View(this.allProducts.ToPagedList(currentPageIndex, DefaultPageSize));
}