Upgrading Pagination from Bootstrap 3 to Bootstrap 4: A Step-by-

I am currently transferring an application from Bootstrap 3 where the previous pager had this appearance:

https://i.sstatic.net/0gqIo.png

Here is the code snippet for the old pager:

<nav>
    <ul class="pager">
        <li class="previous disabled"><a href="#"><span class="glyphicon glyphicon-arrow-left"></span></a></li>
        <li>1/402</li>
        <li class="next"><a href="#"><span class="glyphicon glyphicon-arrow-right"></span></a></li>
    </ul>
</nav>

After consulting the Bootstrap 4 documentation, I have transitioned to the following structure:

<nav>
    <ul class="pagination">
            <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1"><span class="fa fa-arrow-left"></span></a></li>
        <li class="justify-content-center">1/395</li>
            <li class="page-item"><a class="page-link" href="#"><span class="fa fa-arrow-right"></span></a></li>
    </ul>
</nav>

This now renders as shown below:

https://i.sstatic.net/Ukye1.png

If anyone knows how to position the buttons at both ends of the screen and make them round in shape, your help would be greatly appreciated.

Thank you

EDIT 1: With the assistance of ZimSystem, the desired button shape is almost achieved, but there is still a rendering issue where the buttons appear as half circles instead of full circles.

https://i.sstatic.net/vWeQw.png

cssbootstrap-4twitter-bootstrap-4

Answer №1

Here is a way to accomplish this task:

<nav>
    <ul class="pagination justify-content-between">
        <li class="page-item flex-last"><a class="page-link rounded-circle" href="#"><span class="fa fa-arrow-right"></span></a></li>
        <li class="justify-content-center">1/395</li>
        <li class="page-item disabled flex-first"><a class="page-link rounded-circle" href="#" tabindex="-1"><span class="fa fa-arrow-left"></span></a></li>
    </ul>
</nav>

This code uses justify-content-between to stretch the flexbox pagination across the full width and adds rounded-circle to create rounded links similar to version 3.x.

Check out this link for more information.

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

Attempting to superimpose a CSS triangle arrow onto a Google Map

I'm currently working on incorporating a CSS arrow on top of a Google map as a design element. The concept involves a horizontal stripe with a downward arrow placed halfway through, and I aim to have this arrow overlay the Google map. Here is a snipp ...

htmlcssgoogle-maps

CSS: Maintain rounded corners on body border even when scrolling

I am attempting to create a body border on my webpage with rounded corners at the top to simulate the MacOS interface in the browser, similar to the image shown here: https://i.sstatic.net/ECSU9.jpg The issue arises when I scroll, and the top corners van ...

cssreactjs

I require the flexbox children to be arranged in a regular manner

How can we set flexbox children to default layout behaviors? Let's make them behave like the disobedient kids they are. .wrapper { This should be a row } .column { Make all heights equal display: flex; } .child { Back to regular display...wit ...

cssflexboxchildren

Trouble displaying CSS content image in Internet Explorer

Usually, I use Chrome as my default browser. However, I recently decided to test whether my website functions properly on other browsers as well. In Chrome, the header displays my logo with great quality using content:url. But when I tried accessing my w ...

cssinternet-explorergoogle-chrome

The height property in the CSS is causing the parent element to break and cannot be confined

Here is the HTML code that I am currently working with: <div id="div1"> <p id = "a"> <! -- content --> </p> <p id='b'> <! -- content --> </p> </div> Additionally, th ...

cssheight

Troubleshooting problems with CSS menus and submenus, along with addressing browser pixel issues specific to Web

Find my custom css menu here: Custom CSS Menu On hovering over "about us", the "our clergy" sub-menu appears automatically. I need it to show only when hovering over "our clergy". This screenshot is from Firefox, but webkit browsers like Chrome show a sl ...

wordpressmenucss

When using jQuery, adding a class does not always trigger CSS animation

Currently facing a peculiar issue. I am utilizing jQuery to load articles from JSON and would like to dynamically add a class of 'animate' to each loaded element. $.each(jsonArticles, function (i, article) { var $articleHTML = $( ' ...

javascriptjquerycsscss-animations

Contrasting hierarchy of text-decoration and text-shadow in Firefox compared to Chrome

When viewing this HTML/CSS code in Firefox and Chrome, the text-decoration and text-shadow properties appear to be swapped between browsers. .foo { font-size:2em; text-decoration:underline LightBlue 1ex; text-decoration-skip-ink:none; ...

htmlcssgoogle-chromefirefox

In Chrome Inspector console, a never-ending JavaScript loop is triggered by a modification in the htaccess file to create pretty URLs, specifically when

Brand new to the world of .htaccess modifications and handling clean URLs. I currently have a php/bootstrap/mysql/javascript page at: http://localhost/modules/posts/questions_all.php. I am interested in redirecting pages such as http://localhost/modules/ ...

javascript.htaccessbootstrap-4pretty-urls

Creating a custom CSS overlay for a jQueryUI widget

Having some trouble darkening the widget overlay provided by jQueryUI's "dialog". Despite trying to override the CSS used by jQuery, specifically the class ui/widget-overlay, I can't seem to apply my own styles successfully in my stylesheet. I a ...

jqueryhtmlcssjquery-uijquery-ui-dialog

Continuous CSS animations with enduring final state

I have a div element serving as the main container for my webpage. Inside this, there is another div element which functions as a curtain - when activated, it covers the entire page with a dark semi-transparent layer similar to a lightbox. This deactivates ...

animationcsspersistence

Tips for shading an HTML element's background without creating stark edges

Is it possible to darken a div while blending all edges in CSS? In the example below, I have attempted to achieve this effect but can only get the top and bottom edges to blend. Is there a solution where you can also hide the left and right edges of the c ...

css

Creating a cohesive design by ensuring buttons match the appearance of other elements, and vice versa

During the process of building a website, I encountered a challenge in making buttons work seamlessly with other elements to ensure uniformity in appearance. This issue often arises in menus, where some buttons are functional while others are simply li ...

htmlcss

What is the best way to create a search bar that overlaps with a filter button?

Desired Ui Looking to create a search bar with a button positioned to the right of it, partially overlapping a banner. Above these elements is a title; however, one issue I'm encountering is that the title covers the search bar when the page size is r ...

htmlcssuser-interfacebootstrap-4

Adjusting CSS to realign images on various screen types

I am facing an issue with displaying a background image on a static web page. The height appears differently on various LCD screens. How can I ensure that the height adjusts to approximately 80% of the area? I have tried giving a percentage in the style fo ...

htmlcsstwitter-bootstrapbootstrap-4

What is the method for dynamically assigning a CSS class to an ASP.NET control through programming?

I was curious about how I could dynamically apply a CSS class to an ASP.NET Control (specifically a TextBox) through C# on the backend. For instance: <asp:TextBox ID="firstName" CssClass="input left" runat="server" Text="First Name" /> I want to ad ...

c#asp.netcss

Positioning of the navigation menu

After customizing my Bootstrap navbar, I noticed that when the responsive size changes to mobile, the burger menu opens on the left side. Is there a way to move it to the right? Any help would be appreciated. Here is the HTML code: <!DOCTYPE html> ...

htmlcssbootstrap-4

CSS grid-box experiencing issues due to interference from bootstrap styling

When attempting to create a grid, I noticed that the first image element is not showing up in the first position as expected. Instead, it appears in the second position, leaving the first spot blank. After inspecting the issue, I realized that the styles f ...

htmlcsstwitter-bootstrapbootstrap-4grid

Did I accidentally overlook a tag for this stylish stripe mesh Gradient design?

I've been attempting to replicate the striped animated Gradient mesh using whatamesh.vercel.app. I've set up the JS file, inserted all the gist code into it, and placed everything in the correct locations, but unfortunately, it's not functio ...

javascripthtmlcss

Video not visible in program (CSS, EXPRESS)

I am struggling to add a video to my page. The default method of creating a path for it isn't working for me. I believe I need to place the path somewhere else, but I'm not sure where. I have attempted to include the video in the same folder as ...

cssnode.jsexpress