Responsive pagination with CSS

I have been working on a project and I am using the standard bootstrap pagination style from online documentation. However, I am facing an issue with the pagination not appearing correctly in the mobile version (it does not stay on one line without wrapping). Here is the code for the pagination:

<nav aria-label="Page navigation">
    <ul class="pagination ml-3">
        <li class="page-item disabled"><a class="page-link">Previous</a></li>
        <li class="page-item active"><a class="page-link">1</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=2">2</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=3">3</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=4">4</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=5">5</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=6">6</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=2">Next</a></li>
        <li class="page-item"><a class="page-link" href="blog?page_no=6">Last ››</a></li>
    </ul>
</nav>

Everything seems fine to me when I look at the code. But on the site itself, it looks terrible. https://i.sstatic.net/owOaf.png

If you have a moment to check the site, you'll see that it's within a 

<div class="container>
, so it should be working properly. I have followed all the guidelines in the documentation. Can anyone offer some assistance?

htmlcssbootstrap-4

Answer №1

To apply flex wrap properties to your pagination element, utilize the Bootstrap class flex-wrap

<ul class="pagination flex-wrap ml-3">
    ...
</ul>

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

Limit the size of images with CSS properties like max-height or max-width

What is the preferred method for restricting the size of an image and why? While max-width can be used to restrict the size of an element, this article recommends using it specifically for images within containers. If you have a web application with a ve ...

css

Identifying the length of a division element following its addition

I'm facing difficulties in detecting the length and index of the dynamically appended div. I have researched extensively and found a solution involving MutationObservers, but I am unsure if it is necessary for this particular issue. Let's focus ...

javascriptjqueryhtml

Sticky element on the left side vanishes while scrolling towards the right

My goal is to design a webpage with five distinct regions, out of which three are meant to be sticky. However, while implementing this feature, I encountered an issue - when the user scrolls to the right beyond the viewport width, the left sticky elements ...

htmlcsssticky

Ensuring the Angular Material bottom sheet (popover) stays attached to the button

Recently, I've been working on an Angular project where I successfully integrated a bottom sheet from Angular Material. However, I encountered an issue when trying to make the opened popup sticky to the bottom and responsive to its position, but unfor ...

cssangularsassangular-material

Is there a way to incorporate additional text into option text without compromising the existing values?

One challenge I'm facing is adding additional text to the options without changing their values upon selection. Would you be able to assist me with resolving this issue? I have come across the following HTML code: <select id="q_c_0_a_0_name"> ...

javascripthtmljqueryhtml-select

Is there a way to automatically submit an upload form once a file has been selected?

Need help with automatically submitting a file upload form when a file is selected. Is there a way to bypass the need for the user to click the Submit button? ...

javascripthtml

Registration form input field in ReactJS keeps losing focus with every keystroke

Currently, I am in the process of creating a registration form for a website. I have implemented the handleChange function to alter the input text in the regData state. However, I am encountering an issue where every time I type something into an input fie ...

javascriptcssreactjsregistration

Retrieve the HTML tag content as a string using jQuery

For my OSINT project, I am developing a tool that needs to extract text from a specific HTML code string. $("p").text(); I'm looking for a way to make my variable work with the above code. Any suggestions? Share your ideas! Solution: $.ajax({ ...

jqueryhtmljsonparsing

Interactive HTML button capable of triggering dual functionalities

I am working on a project where I need to create a button using HTML that can take user input from a status box and display it on another page. I have successfully implemented the functionality to navigate to another page after clicking the button, but I ...

javascripthtmlbuttonactiondisplay

What are some ways to customize text using Font-Awesome?

<i class="fa fa-envelope fa-lg"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aad8c5c8ccd8cbc4eacdc7cbc3c84ac9fbccdbdb">[email protected]</a> </i> I need assistance with changing the font type f ...

htmlcssfontsfont-awesome

New replacement for routerState.parent feature that has been deprecated in angular2

During my work with Angular 2 rc5, I encountered the following code snippet. this.router.routerState.parent(this.route).params.forEach((params: Params) => { url = params['url']; id = +params['id']; }); I had to resort to th ...

javascripthtmlangularjsangularangular2-routing

Switch out fontawesome icons for SVG icons

I'm looking to replace the Fontawesome icons on this template. The full HTML code is available here, but I only need to swap out one specific icon with an SVG. https://i.sstatic.net/k1DFZ.png <div class="col-md-4"> ...

htmlsvgiconsbootstrap-5font-awesome-5

What steps should I take to address the issues with my quiz project?

I've been working on a new project that involves creating a quiz game. I came across some code online and decided to customize it for my needs. However, I'm encountering some issues with the functionality of the game. Right now, the questions ar ...

javascripthtmlbuttondom-events

Display an icon button when a user edits the text in a text field, and make it disappear once clicked on

Figuring out how to incorporate a v-text-area with an added button (icon) that only appears when the text within the text area is edited, and disappears once it is clicked on, has proven to be quite challenging. Below is a simplified version of my code to ...

javascripthtmlvue.jsvuetify.js

White space in Bootstrap 4 grid caused by a full-width row

I have set up a bootstrap grid layout that includes ads, and I wanted to integrate a section for banners within it. After some experimentation, I managed to achieve this by inserting a container between the ads and the banners, each housed in their own row ...

htmlcssbootstrap-4

The header and footer elements must be included along with a main div to house the content on the webpage

I am currently working on building a website using HTML and CSS. I would like to create an index.php file that calls all the different parts of the page. For example, I want to include the header and footer, and also have the ability to replace content wit ...

phphtmlcss

Cease all playback of audio immediately

My goal is to ensure that any audio that has been played previously stops before a new audio clip starts playing. This will prevent overlapping clips on elements that may trigger the audio file multiple times. I have attempted to pause and reset the curre ...

javascripthtmldomaudio

Applying absolute positioning to the router-outlet element in Angular2 using CSS

I am working on a website with the following basic layout: <nav> Nav content here </nav> <router-outlet></router-outlet> I have a component that is being displayed in the router outlet, but I want it to appear on top of ...

cssangular

What is the most efficient method for populating *interconnected data-dependent* <select> dropdowns in a Rails application?

When users need to choose a car from our system, they are faced with multiple dropdown menus to select the year, make, model, and submodel. The challenge lies in the fact that these options are interdependent, making it necessary to retrieve data through s ...

htmlajaxperformancedrop-down-menudependencies

Swipe JS failing to swipe

After closing a related question, I encountered an issue with the swipe functionality of my slidershow using swipe JS. The slider is initiated as follows: $(document).on("pageshow", function(){ Slider = $('.slider').Swipe({ auto: 30 ...

javascriptjqueryhtmlioscordova