Issue with applying Bootstrap pagination on Codeigniter 4 encountered

I am currently in the process of migrating a website from Codeigniter 3 to Codeigniter 4. The existing Bootstrap pagination on a specific element works smoothly in the Codeigniter 3 version:

Link:

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

However, after incorporating the pagination class into other elements within CI4, I have been facing difficulties in getting it to apply as expected. Even though Bootstrap is correctly linked in the header, the transition to CI4 seems to have introduced some changes that are affecting the implementation.

New URL:

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

If anyone can provide insight on what might be missing or where the issue lies in my current approach, it would be greatly appreciated.

csstwitter-bootstrapcodeigniterbootstrap-4

Answer №1

It appears that you are not only transitioning from CodeIgniter version 3 to version 4, but also updating Bootstrap from version 2 to version 4.

In Bootstrap 2, pagination arrows and numbers were displayed in a row using display:inline, whereas in Bootstrap 4 this changed to display:flex. Your custom stylesheet currently enforces the use of display:inline for pagination, which conflicts with Bootstrap 4's styling.

To address this issue, you can modify the multiview.css file (line 19) by changing display:inline to display:flex. However, this may impact other styles on your site. Alternatively, a safer solution would be to update 

<ul class="pagination">
to 
<ul class="pagination d-flex">
to specifically enforce display:flex for pagination elements.

If you wish to include borders around the pagination items, follow the guidelines provided in the Bootstrap 4 documentation: https://getbootstrap.com/docs/4.0/components/pagination/

<ul class="pagination d-flex">
  <li class="prev action-pagination-update page-item">
    <a href="" class="page-link">«</a>
  </li>
  <li class="active page-item">
    <a class="page-link">
      <label for="from">From</label><input name="from" type="text" value="1"> – <label for="to">To</label><input name="to" type="text" value="54">
    </a>
  </li>
  <li class="next action-pagination-update page-item">
    <a href="" class="page-link">»</a>
  </li>
</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

Creating dynamic animations with CSS3 to make circles grow in size

I'm currently working on a project where I want circles to grow outwards from the center when the page loads, rather than from the top left corner. Here is the link to see what I have so far: My goal is to achieve this effect using CSS, but I'm ...

jqueryanimationcsscss-animations

Enhancing WordPress Menus with Icons in PHP

Is there a way to customize the HTML output of a menu created with wp_nav_menu()? I want to include < i > tags within the link < a > of each < li > item in the menu. I understand that I could achieve this using background-images in the C ...

phphtmlcsswordpressmenu

Having trouble getting the vertical menu animation to work with jQuery

Essentially, I am facing an issue with a <nav> element that is supposed to expand from left to right upon mouseover. However, sometimes when quickly moving the cursor over and then out of the element, it expands without animation, which should not be ...

jqueryhtmlcsstwitter-bootstrapjquery-animate

Using jQuery to remove the 'active class' when the mouse is not hovering

I recently came across this amazing jQuery plugin for creating slide-out and drawer effects: However, I encountered a problem. I want to automatically close the active 'drawer' when the mouse is not hovering over any element. The jQuery plugin c ...

jquerycssjquery-plugins

Achieve perfect alignment of Bootstrap checkboxes

Is there a way to vertically align checkboxes in a column with their labels? My goal is to have these elements centered on the page, but I want the checkboxes themselves to be aligned vertically. <div class="row"> <div class="span12 paginatio ...

htmlcsstwitter-bootstrapcheckboxvertical-alignment

Issues arising from JavaScript/jQuery dysfunction

I've successfully implemented this code in jsfiddle, but I'm struggling to make it work on my local files like index.html, index.css, index.js. Can someone please guide me on how to achieve this locally and not just on jsfiddle? Here's the j ...

javascriptjqueryhtmlcss

Combining multiple PNG images onto a base image in PHP

I need assistance in merging 24 images with single dashes highlighted into a base circle image using PHP GD, JS or CSS. All images are in PNG format. Your help would be greatly appreciated. ...

phpjquerycssgd

JavaScript expression not being processed

What could be the reason behind not receiving the value for dish.price, dish,description, etc.? Where am I making a mistake in this code snippet? <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="utf-8"> < ...

cssangularjshtmltwitter-bootstrap

(struggling beginner) Struggling to execute PHP on a website built with the Laravel framework

I have a PHP site that I developed. My client now wants to add some functionality, but whenever I try to set it up on my machine or host it on Hostinger, I keep encountering the following error: Warning: require(/home/u364558673/public_html/../bootstrap/a ...

phpmysqltwitter-bootstrap

Customize the appearance of the date input box in MUI KeyboardDatePicker

Currently, I am attempting to customize the appearance of the KeyboardDatePicker component including board color, size, font, and padding. However, none of the methods I have tried seem to be effective. Here is what I have attempted so far: 1 . Utilizing ...

cssreactjsdatematerial-uistyles

Need assistance with a coin flip using HTML and Javascript?

After spending hours trying to make the code work with the example provided, I find myself unable to get it functioning correctly. Is there anyone who can assist me in putting all of this together so that it runs smoothly? var result,userchoice; functio ...

javascriptjqueryhtmlcss

What could be causing my buttons to span the full width of the screen following a switch to Bootstrap

After upgrading my dependencies, I encountered a problem where these two buttons that used to be placed next to each other are now stacked on top of each other and taking up the full width: import { Button as BootstrapButton, Row, Container, Table } from & ...

bootstrap-4react-bootstrapbootstrap-5

Why Isn't the Element Replicating?

I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjustin ...

javascripthtmlcss

How can the border of the select element be removed when it is active in select2

After examining the CSS code, I am still unable to locate the specific property that is being applied to the main element. I am currently customizing the select2 library to suit my needs. However, I am stuck in the CSS as I cannot determine which property ...

javascripthtmlcssangularjsangularjs-select2

Hidden input field when inactive

Whenever I start typing in my input form, the text disappears after a moment. The only way to prevent this is by continuously pressing on a letter key on my keyboard. This issue began after I added a resizeInput attribute that adjusts the size of the inpu ...

jqueryhtmlcss

Employ jQuery for toggling CSS rotation

I have a plugin set up to handle the CSS3 attribute. It currently rotates 45 degrees when clicked, but doesn't rotate back when clicked again to hide the content. Any ideas on how to fix this? $("#faq dt").click(function() { $(this).next('dd ...

jquerycsstoggle

Covering a secret link with a backdrop image

I have set a background image in a column on my WordPress site. However, I want to make this image clickable by placing a transparent box over it, as background images cannot be linked directly. #container { background-image: url(https://www.quanser.c ...

htmlcsswordpress

Guide on implementing various styles for a class in Tailwind CSS when transitioning to dark mode with the help of Next.js 13.4 and next-theme

Is it possible to apply unique styles for a class in Tailwind CSS when transitioning to dark mode using Next.js 13.4 and next-theme? I am currently setting up a dark theme in Tailwind CSS with Next.js 13.4 utilizing next-theme. Within my globals.css file, ...

cssreactjsnext.jstailwind-css

Toggle the visibility of DIV content based on the current URL

In my HTML page, I have a div-reportControlPanel as shown below. Additionally, I have included another div-reportControlPanel1 with a different ID. <div id="reportControlPanel" class="pentaho-rounded-panel-bottom-lr pentaho-shadow"> <div id="prom ...

javascripthtmlcsspentaho

Using HTML5 and CSS to embed a video tag within a div container

I am currently using the Bootstrap modal plugin and I would like to incorporate a background animated mp4 video. How can I achieve this within the modal dialog where the video will be displayed from top to bottom? Below is the HTML code I have: <div cl ...

csshtml