CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
No1Lives4Ever
No1Lives4Ever

Reputation: 6883

Highlight page in bootstrap Pagination

I using twitter bootstap for showing the pages number. This is my code:

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">2</a></li>
        <li class="contain-copies"><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

I want to highlight page number "3". So a created the css-class contain-copies and put this code in it:

.contain-copies
{
    background-color: yellow;
}

I was expected to get output that looks like this: enter image description here

But it's not working. How should I do this?

Thank you.

Upvotes: 1

Views: 1112

Answers (2)

Head In Cloud
Head In Cloud

Reputation: 2051

Try this

.pagination>li.contain-copies >a{background-color:yellow }


.pagination>li.contain-copies >a{
background-color:yellow ;
}
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">2</a></li>
        <li class="contain-copies"><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

Upvotes: 2

user3688059
user3688059

Reputation: 170

Try with:

.contain-copies
{
    background-color: yellow !important;
}

Upvotes: 0

Related Questions