Ensure consistent alignment of the Bootstrap pagination control

I have created a bootstrap pager using the code below.

<style>
.navigation-bar .pagination {
    margin-top: 0;
}
</style>
<div class="navigation-bar">
<span class="pull-left"><strong>Total record(s) 1000</strong></span>                                    
<ul class="pagination pull-right">                                        
    <li>
        <a href="#"><span class="glyphicon glyphicon-search"></span>&nbsp;Search</a>
    </li>
    <li>
        <a style="padding: 6px;"><div>Filter By<select><option>1</option><option>2</option><option>3</option></select></div></a>
    </li>
    <li>
        <a href="#"><span class="glyphicon glyphicon-fast-backward"></span>&nbsp;First</a>
    </li>
    <li>
        <a href="#"><span class="glyphicon glyphicon-backward"></span>&nbsp;Previous</a>
    </li>
    <li>
        <a href="#"><span></span>&nbsp;1</a>
    </li>
    <li>
        <a href="#"><span></span>&nbsp;2</a>
    </li>
    <li>
        <a href="#"><span></span>&nbsp;3</a>
    </li>
    <li>
        <a href="#"><span class="glyphicon glyphicon-forward"></span>&nbsp;Next</a>
    </li>
    <li>
        <a href="#"><span class="glyphicon glyphicon-fast-forward"></span>&nbsp;Last</a>
    </li>
</ul>

The issue is that the drop-down control is not at the same height as the others.

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

Plunker

Please share your suggestions with me.

To see more details of my problem, please use Chrome and zoom to 110%

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

htmlcsstwitter-bootstrap

Answer №1

accustomed to this particular style

.pagination.pull-right > li:nth-of-type(2) > a{float:left;line-height:32px;}

Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
.navigation-bar .pagination {
margin-top: 0;
}
.pagination.pull-right > li:nth-of-type(2) > a{float:left;line-height:32px;}
  </style>
</head>
<body>

<div class="navigation-bar">
<span class="pull-left"><strong>Total record(s) 1000</strong></span>                                    
<ul class="pagination pull-right">                                        
<li>
<a href="#"><span class="glyphicon glyphicon-search"></span>&nbsp;Search</a>
</li>
<li>
<a style="padding: 0px;"><div>Filter By<select><option>1</option><option>2</option><option>3</option></select></div></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-fast-backward"></span>&nbsp;First</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-backward"></span>&nbsp;Previous</a>
</li>
<li>
<a href="#"><span></span>&nbsp;1</a>
</li>
<li>
<a href="#"><span></span>&nbsp;2</a>
</li>
<li>
<a href="#"><span></span>&nbsp;3</a>
</li>
...

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

CSS - starting fresh with animations

I am facing an issue with a CSS animation that I created. Everything seems to be working correctly, but I need to complete it by setting the input type to reset the animation. Below is the CSS code snippet that should reset the animation: $('button& ...

javascriptjquerycssanimationreset

The AngularJS plugin "chosen" is experiencing issues with the "chosen:updated" feature, despite functioning

After successfully integrating the selected plugin into my AngularJS app, my app.js file now has the following code: myApp.directive('chosen', function() { var linker = function (scope, element, attr) { scope.$watch('countriesL ...

javascriptangularjshtmljquery-chosen

You may only insert a single image into a container

My goal is to display two images side by side with text centered between them. However, when I add the first image using CSS and the background property, I run into issues adding a second image as it overrides the first one. Placing the images directly in ...

htmlcssimagecss-position

Using Angular with Bootstrap to implement a typeahead feature

I've been working on getting my Typeahead feature to function properly: <div *ngFor="let item of items; index as i"> <input type="text" name="name{{i}}" [(ngModel)]="item.name" [ngbTypeahead]="searchItem" /> </div> Within the c ...

angulartwitter-bootstrapbootstrap-4ng-bootstrapbootstrap-typeahead

Exporting HTML content into an Excel spreadsheet while ensuring that the leading is

public void ConvertHtmlToExcel(string htmlContent, string fileName, out string errorMessage) { errorMessage = ""; try { fileName = fileName == "" ? "Exp ...

c#html.netexcel

Alter the page's color scheme completely

I am currently facing an issue with my button that creates a popup and darkens the background of my page. While this functionality works, it does not affect any bootstrap containers. I am using bootstrap 4 and react for this project. https://i.sstatic.net/ ...

cssreactjsbootstrap-4stylingreact-bootstrap

What could be preventing my PHP function from being executed when the button is clicked?

My PHP block has all the working get functions as expected. <?php function getTitle() { $connection = new PDO('mysql:host=x.x.x.x;dbname=x;charset=utf8', 'x', 'xxxx'); $query = $connection->query("SELE ...

javascriptphphtmlmysql

The menu item fails to respond to clicks when hovering over the header background image

I'm having an issue with the Menu Link not working. I can click on the menu item when it's placed inside the body, but when I try to place it over the background header image, it stops working. Any help would be greatly appreciated. <div clas ...

javascripthtmlcss

Choose all the inputs with the value attribute specified

How can I select all input textboxes in my form that have the required class and no value using jQuery? Currently, I am using: $('input[value=""]', '.required') The issue I am facing is that even when a user enters a value in the text ...

javascriptjqueryhtml

Ways to align a bootstrap 4 row both vertically and horizontally in the center amidst other rows

Assume there is a main menu followed by three rows. The first row should be at the top and the third at the bottom, while the second row needs to be centered both vertically and horizontally. As you scroll down, the main menu should be able to hide while ...

htmlcssbootstrap-4

Creating a social media icon effect similar to Squarespace: A step-by-step guide

I am attempting to create social icon effects similar to those found on Squarespace for my project. You can see examples of what I mean by visiting: If you look at the social icons, when you hover over one icon, the others become transparent or turn grey ...

javascriptjqueryhtmlcsssquarespace

I'm having an issue with a jQuery navigation plugin that is causing the entire page to refresh. Does anyone

My website includes a jquery slider plugin that I use for navigating between slides. I decided to apply absolute positioning for the previous/next slide navigation, but now I am facing an issue where the navigation refreshes the entire page. Can someone ...

jqueryhtmlcssjquery-pluginscarousel

How can I implement a hover effect without triggering a click event?

My structure is pretty basic, here it is: .container { height: 100vh; width: 100%; pointer-events: none; } .click-layer { background-color: #ccc; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto; } .box { ...

javascripthtmlcssreactjs

Exploring Django: A guide to iterating through nested JSON data within HTML

Learning about json is new to me and I am currently working with a nested json object called jresult in my django view.py. I have passed this object to an html file and now I want to display it on the webpage. In view.py: return render(request,'home ...

htmljsondjango

Break the line after every space in words within an element

I have a table/grid view with two words in the <td> like "C2 Sunday". I need a line break after C2 so that it appears as: C2 Sunday Is there a way to achieve this? Please assist me with this issue. Currently, it is showing as "C2 Sunday" and I wou ...

htmlcssasp.netgridviewhtml-table

Delay Time for Closing Sub Menus When Multiple Dropdowns are Opened

My issue involves a multi-level drop-down menu that is solely constructed using CSS. The problem I am facing is that there is a delay of one second before the drop-down closes when the mouse is moved away. This delay causes multiple drop-down menus to stac ...

javascriptjqueryhtmlcssdropdown

Challenge with the contrast of text color on dark mode with a backdrop of light color texture (image)

Currently, I am using Bootstrap 4 and I have set a light coloured .png image as the background for the navbar and body. The footer area has a dark background with off-white text colour. By default, the text colour is black to complement the light-coloured ...

cssbootstrap-4browseraccessibilitydarkmode

Solving the issue of localizing the Datetime picker

My date input seems to be saving incorrectly in the database. When I enter a date like 18/02/2020, it gets saved as 17/02/2020 22:00:00. Is this a time zone issue? How can I fix this problem and thank you. Also, if I want to save the date with UTC, how do ...

htmlangulardatedatepicker

The issue of body height not functioning properly when using a skeleton

Greetings! This is my debut question on Stack Overflow, and I am hopeful that someone can provide me with some guidance. I have encountered a hiccup while working on my webpage using the Skeleton framework. The issue at hand is setting the "height" to 100 ...

htmlcssheightskeleton-css-boilerplate

Encountering the "Thread 1: signal SIGABRT" error while trying to run a website on an app in Xcode

I've encountered an issue while setting up an app on my website. Everything was running smoothly until I tried to run the app and got hit with the error message: "Thread 1: signal SIGABRT". import UIKit @UIApplicationMain class AppDelegate: UIRespon ...

htmliosswiftxcode