How can I resize or break the overflowing Bootstrap pagination within the parent div based on the resolution?

When utilizing boostrap4 theming for my pagination, a problem arises when loading the page on smaller resolutions than my monitor. The paginate section exceeds the parent div, resulting in an unsightly display.

Below is a snippet of my code:

<div class="col-12 col-md-6 col-lg-3">
    <h3 class="text-capitalize">Devices</h3>
    <ul id="pager_device" class="pagination-sm mt-1 pagination"><li class="page-item first disabled"><a href="#" class="page-link">First</a></li><li class="page-item prev disabled"><a href="#" class="page-link">Previous</a></li><li class="page-item active"><a href="#" class="page-link">1</a></li><li class="page-item"><a href="#" class="page-link">2</a></li><li class="page-item"><a href="#" class="page-link">3</a></li><li class="page-item"><a href="#" class="page-link">4</a></li><li class="page-item next"><a href="#" class="page-link">Next</a></li><li class="page-item last"><a href="#" class="page-link">Last</a></li></ul>
    <div id="pager_content_device">

        <div class="col-12 results item active">
            <div class="pt-4 border-bottom">
                <a class="page-url h4 text-primary" href="/config/device_details/460/118/">US-EDGE</a>
                <p class="page-description mt-1 text-muted"> Location: US <br> Serial: XXX <br> Version: 1<br> Install Date: 01/01/2019</p>
            </div>
        </div>

        <div class="col-12 results item">
            <div class="pt-4 border-bottom">
                <a class="page-url h4 text-primary" href="/config/device_details/5/1/">UK-EDGE</a>
                <p class="page-description mt-1 text-muted"> Location: UK <br> Serial: XXX <br> Version: 1<br> Install Date: 01/01/2019</p>
            </div>
        </div>
    </div>
</div>

Here are screenshots showcasing the issue on a phone and iPad resolution:

On a phone with a col width of 12, you can see it's causing problems https://i.sstatic.net/Rqhj6.png

When viewed on an iPad with multiple columns, the paginators overlap making it messy. https://i.sstatic.net/Z12eg.png

Answer №1

Feel free to implement the following code snippet:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>Pagination</h2>
    <ul class="pagination pagination-separate pagination-curved synchronized-links">
      <li class="page-item first disabled"><a href="#" class="page-link">First</a></li>
      <li class="page-item prev disabled"><a href="#" class="page-link">Prev</a></li>
      <li class="page-item active"><a href="#" class="page-link">1</a></li>
      <li class="page-item"><a href="#" class="page-link">2</a></li>
      <li class="page-item"><a href="#" class="page-link">3</a></li>
      <li class="page-item"><a href="#" class="page-link">4</a></li>
      <li class="page-item"><a href="#" class="page-link">5</a></li>
      <li class="page-item"><a href="#" class="page-link">6</a></li>
      <li class="page-item next"><a href="#" class="page-link">Next</a></li>
      <li class="page-item last"><a href="#" class="page-link">Last</a></li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to link variables and functions to an angularJS controller

When using the $scope object to bind functions and variables, and making changes accordingly in HTML, the code works fine. But when using a different object, it doesn't work as expected. Here is an example of a working code snippet: ...

Overriding Bootstrap's Sass variables

Struggling to customize Bootstrap variables in my main.scss file @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; $primary: green; ...

Step-by-step guide on achieving rounded borders with a gap:

Struggling to design blocks and elements with rounded corners that have a gap between the corner and the straight line. It's proving to be quite challenging :) Additionally, I need to create buttons that look like this, and If CSS alone doesn' ...

Convert your flexible designs into dynamic HTML with our Flex to HTML/A

Looking for a solution to transform Flex code into Html/Ajax code. Most of my Flex code includes datagrids, buttons, and text labels. ...

I attempted using the regex pattern (09)[0-9]{89}, but unfortunately it does not satisfy the validation criteria I need

I attempted to use a regex expression for validation in both HTML forms and server-side validation in Laravel. However, the expression I used (i.e (0\9)[0-9]{8\9}) did not fulfill the criteria for validation: The number must start with either 0 o ...

Refreshing a div using ajax technology

I am attempting to use Ajax to update an h3 element with the id data. The Ajax call is making a get request to fetch data from an API, but for some reason, the HTML content is not getting updated. This is how the JSON data looks: {ticker: "TEST", Price: 7 ...

Interactive JavaScript Linkage

Recently, I came across some code that I inherited (definitely not mine!) which uses a session variable in the HTML header to link to a specific javascript file. For example: <SCRIPT language="javascript" src="../JavaScript/<%=Session("jsFileName") ...

JavaScript can be used to manipulate buttons and interact with them on a webpage

In my search for examples for my webpage, I stumbled upon a strange JQuery selector. Could someone please explain how this works and if I can use it to target unique indexed IDs in HTML? //The mysterious selector that puzzles me //What does "^" actually ...

What is the best way to showcase accurate information retrieved from mySQL?

I'm currently facing an issue with querying a database and displaying the results. The query is supposed to be based on input from an HTML form. Strangely, when I input a name like "John" into the form, even though there are 2 entries in the table wit ...

Having issues making div elements with javascript

I am having trouble generating new divs when a specific div is clicked. Despite my efforts, nothing seems to be happening and the console isn't showing any errors. I've searched online for solutions but haven't found anything that addresses ...

Store the content of an HTML div using HTML5 Drag and Drop functionality in a MYSQL database

Here's a simple scenario: I have 3 small divs (1, 2, 3) and I want to place them inside 3 other divs (4, 5, 6). That's no issue, but then I need to store the data in MySQL, such as 4-1, 5-2, 6-3 for instance. I can use JavaScript to display the n ...

It is not possible to invoke a function within the AJAX success method

When trying to display an error message in my notify (toast) div using jQuery in Ajax success, I am encountering difficulties. Despite decoding the response from the URL properly, only .show() and .hide() functions seem to work. Although I have used conso ...

Struggling to extract the values from a KendoDropDown using Selenium

When using the selenium web driver, we are trying to retrieve a set of option values such as Last 30 days, Last 60 days, etc. Attempts have been made to locate these elements using a CSS selector. var timeperiodcss = "span.k-widget.k-dropdown.k-header se ...

Exploring an Array Based on User's Input with JavaScript

Looking to implement a search functionality for an array using AJAX. The array is pre-populated with values, and the user will input a value in a HTML text box. If the entered value is found in the array, it should display "Value found", otherwise "not f ...

Toggle child checkboxes when parent checkbox is clicked in angularjs

Can anyone help me figure out how to automatically select child checkboxes when the parent checkbox is clicked? In the code below, I have a parent checkbox in the table header and child checkboxes in the table body. When the parent checkbox is selected, ...

The visibility of buttons can be controlled based on the selected radio option

I have just completed setting up 4 buttons (add, edit, delete, cancel) and a table that displays data received via ajax. Each row in the table contains a radio button identified by the name "myRadio". When a radio button is clicked, I need the buttons to ...

Is there a way to output several lines from a JSON file in print form?

I'm working with HTML code that displays multiple lines from a JSON file, but it only shows one line at a time. How can I modify the code to display all users' information? <!DOCTYPE html> <html> <head> <script> function ...

Utilizing Google Script to extract information from Gmail emails and transfer it to Google Sheets

I am facing a challenge with extracting data from an email and inputting it into a Google Sheet. While most of my code is functioning properly, I'm struggling with the regex section due to lack of expertise in this area. Below is a snippet of the HTM ...

ISO 8 takes a different approach by disregarding the meta viewport tag and autonomously adjusts the website layout to

<meta name="viewport" content="width=device-width,initial-scale=0"> I am facing an issue with my code not running on iPhone 6 and causing a problem with the responsiveness of my site. Any suggestions on what steps I should take? The site is constru ...

Using Puppeteer and Scrapy, this innovative Web Crawler with Scraper combines the power of both

As a newcomer to web technologies, I am faced with the task of crawling and scraping numerous websites that utilize a combination of React, JavaScript, and HTML. These sites collectively contain approximately 0.1 to 0.5 million pages. My plan is to use Se ...