title: Set active page in bootstrap pager (pagination)
body: <p>i am using bootstrap pager for pagination. For some reason, i prefare the pager over the pagination feature. when i put the <code>&lt;ul class="pager"&gt;</code> inside the pagination class. It does not work and get mess up instead. I remove the pagination and the pager is working fine. I am generating my links dynamically like below.</p>
  
  <pre><code>&lt;ul class="pager"&gt;
       &lt;li class="previous disabled"&gt;&lt;a href="#"&gt;&amp;larr; Previous&lt;/a&gt;&lt;/li&gt;
         &lt;li class="disabled"&gt;&lt;span&gt;&amp;laquo;&lt;/span&gt;&lt;/li&gt;
         &lt;li&gt;@Html.PageLinks(Model.PagingInfo, x =&gt; Url.Action("List", new {page = x}))&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="next"&gt;&lt;a href="#"&gt; Next &amp;rarr;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>my <code>PageLinks</code> is the html helper below.</p>
  
  <pre><code>public static MvcHtmlString PageLinks(this HtmlHelper html,
                                                PagingInfo pagingInfo,
                                                Func&lt;int, string&gt; pageUrl)
          {
              StringBuilder result = new StringBuilder();
              for (int i = 1; i &lt; pagingInfo.TotalPages; i++)
              {
                  TagBuilder tag = new TagBuilder("a"); //Construct an &lt;a&gt; tag
                  tag.MergeAttribute("href", pageUrl(i));
                  tag.InnerHtml = i.ToString();
                  if (i == pagingInfo.CurrentPage)
                      tag.AddCssClass("active");
  
                  result.Append(tag.ToString());
  
              }
  
              return MvcHtmlString.Create(result.ToString());
  
          }
  </code></pre>
  
  <p>My problem is i want to set the active selection property as returned from the htmlhelper method. I want to change the color when active. try adding </p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .li .active{
      background-color : blue
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>to my layout head tag. It does not work. try everything just to get an effect , but it fails. I try adding to my bootstrap.css bcos i notice under <code>.pager</code> there is no active property. It does not respond also.Please how do i achieve this? how do i make it work? any help would be appreciated.</p>
  
  <p><strong>Update</strong></p>
  
  <p>Actually i wanted to use the pagination class but it was not working totally. I try the default example yet it does not work.  When i try the default example from boot strap , this is how it displays. However, the pager class works, so i have no option than to use the pager. </p>
  
  <p><a href="https://imgur.com/WIUC0s8" rel="nofollow noreferrer"><img src="https://i.imgur.com/WIUC0s8.jpg?1" title="source: imgur.com" /></a></p>