CODEWITHSUNDEEP
csslaravel
Don'tDownvoteMe
Don'tDownvoteMe

Reputation: 501

Laravel v5.2 Pagination Display

I am using Laravel v5.2 and while displaying records I am using pagination. Pagination is working fine but I want to display it in an elegant format without using bootstrap, I am not able to figure out how to do the same. Presently, pagination links look as below(vertically):

enter image description here

I have tried to add some inline css along but the thing doesn't work except for positioning the same where I want.

<div style="position:absolute; top:300px; float:left;">{{$t->links()}}</div>

HTML that got rendered after page load:(for pagination)

<div style="position:absolute; top:300px; float:left;">
<ul class="pagination">
<li class="disabled"><span>&laquo;</span></li> 
<li class="active"><span>1</span></li><li><a href="http://localhost/laravel-7/blog/public/t?page=2">2</a></li>
<li><a href="http://localhost/laravel-7/blog/public/t?page=3">3</a></li>
<li><a href="http://localhost/laravel-7/blog/public/t?page=2" rel="next">&raquo;</a></li>
</ul>
</div>

Upvotes: 2

Views: 2078

Answers (1)

Andrew Myers
Andrew Myers

Reputation: 2786

Laravel puts a pagination class on the list, and that makes it easy to target the CSS. There are three important selectors you'll be using: .pagination, .pagination li, and .pagination a. These deal with the list itself, the items, and the links within the items.

Let's get started with some basic styling.

.pagination {
  list-style: none;
  padding-left: 0;
}

This removes the bullet points from all the list items, and some padding that is usually there by default.

Next, we make all the parts be on one line:

.pagination li {
  display: inline-block;
}

That's pretty good, but they're crowded together, so let's space them out:

.pagination li + li {
  margin-left: 1rem;
}

That targets every list item that has a previous list item and puts space to the left.

Now, I'm assuming that there will be a decently wide horizontal space that this pagination is in. To make things centered, add text-align: center to the .pagination.

That's the basics of it. If you don't want the links to look like plain links, you can mess with .pagination a:

.pagination a {
  text-decoration: none;
  padding: 0.2rem 0.4rem;
  color: red;
  border: 1px solid red;
  border-radius: 2px;
}

You'll probably want to do some :hover, :focus, and :active styling, but this should get you started.

Here it is all together:

.pagination {
  list-style: none;
  padding-left: 0;
  text-align: center;
}

.pagination li {
  display: inline-block;
}

.pagination li+li {
  margin-left: 1rem;
}

.pagination a {
  text-decoration: none;
  padding: 0.2rem 0.4rem;
  color: red;
  border: 1px solid red;
  border-radius: 2px;
}
<div style="position:absolute; width: 300px; top:300px; float:left;">
  <ul class="pagination">
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1</span></li>
    <li><a href="localhost/laravel-7/blog/public/t?page=2">2</a></li>
    <li><a href="localhost/laravel-7/blog/public/t?page=3">3</a></li>
    <li><a href="localhost/laravel-7/blog/public/t?page=2" ; rel="next">&raquo;</a></li>
  </ul>
</div>

Upvotes: 4

Related Questions