使用Bootstrap进行PHP和MYSQL的分页

I have a lot of data in my database (with images, descriptions and so on) what is not reasonably to leave in one page. How can I make a pagination using php, mysql and bootstrap?

 <?php

    $query = "SELECT Title, Painter_Name, Description, Year, Image FROM paintings, painters WHERE painters.ID = paintings.Painter_ID";

        $query_run = mysqli_query($connection, $query);

        while($row = mysqli_fetch_assoc($query_run)) {
      $title = $row['Title'];
      $painter = $row['Painter_Name'];
      $description = $row['Description'];
      $image = $row['Image'];
      $year = $row['Year'];
    ?>

      <div id="contatiner">

    <?php
      echo "
      <div class=\"row\">
        <div class=\"offset-sm-2 col-sm-8 offset-sm-2\"> 
            <div class=\"card\">
              <div class=\"card-block\">
                <h4 class=\"card-title text-sm-center\">$title ($year)</h4>
                <h6 class=\"card-subtitle text-sm-center text-muted\">$painter</h6>
              </div>
              <p class=\"text-sm-center\"><img style=\"width:300px; height:300px;\" src=\"$image\" alt=\"Card image\"></p>
              <div class=\"card-block\">
                <p class=\"card-text text-sm-center\">$description</p>
                <p class=\"text-sm-center\"><a href=\"#\" class=\"card-link\">Add to favorites</a></p>
              </div>
            </div>
        </div>
      </div>
         ";
        }
    ?>
    </div>

<nav class="text-xs-center">
    <ul class="pagination">
        <li class="page-item">
            <a href="#" class="page-link" 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 href="#" class="page-link" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>

I have browsed the Internet and don't even now what to start with...

Thanks in advance!

You can query with a limit and an offset: https://dev.mysql.com/doc/refman/5.5/en/select.html

With two arguments, the first argument specifies the offset of the first row to return, and the second specifies the maximum number of rows to return. The offset of the initial row is 0 (not 1):

SELECT * FROM tbl LIMIT 5,10; # Retrieve rows 6-15

For instance, page 1 is offset 0, limit 10, and per page you increase the offset and limit by 10 (or whatever you want).

You can give the page id with a $_GET var, or use a different style; MVC or get a part of the url.