Page Bootstrap 4

Question

Buenas pessoal,

I have a relatively simple doubt, but I haven’t found anything on the Internet to answer me.

I am implementing a page with bootstrap 4: https://v4-alpha.getbootstrap.com/components/pagination/

But my content is static in HTML, does not come from json database and etc. I need to implement a pagination on static content, but I don’t know how bootstrap pagination works. On the bootstrap site I didn’t find any complete example with paging working.

I wanted to know how the html structure should look to hide the items and make them appear as the user clicks on page 1, 2, 3 and so on.

Does anyone have any idea?

Hug!

Answer 1

I’m not sure I understand the question, but come on,

Bootstrap obeys the class orientation: "Page navigation", "pagination", "page-item" and "page-link". An example can be found at the following Bootstrap site link:

Bootstrap site

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
  <a class="page-link" href="#" aria-label="Previous">
    <span aria-hidden="true">&laquo;</span>
    <span class="sr-only">Previous</span>
  </a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
  <a class="page-link" href="#" aria-label="Next">
    <span aria-hidden="true">&raquo;</span>
    <span class="sr-only">Next</span>
  </a>
</li>
</ul>
</nav>

Now just replace the href="#" with the static link you want.

I believe this is what you want to do. in example:

<li class="page-item"><a class="page-link" href="AQUI FICA O CAMINHO PARA PÁGINA ESTÁTICA">1</a></li>

I hope I helped, hugs!