center the selection text in a Bootstrap dropdown

I'm currently working on a bootstrap 4.3.1 dropdown select box, but I'm having trouble centering the text ('nothing selected') in the select box.

$(function() {
    $('.selectpicker').selectpicker();
 });
<link href="https://www.sailwbob.com/bootstrap/bootstrap.min.css" rel="stylesheet"/>
<link href="https://www.sailwbob.com/bootstrap/bootstrap-select.min.css" rel="stylesheet"/>



<select id='test' multiple data-style="bg-white border border-dark pill px-4 py-3   " data-selected-text-format="count" class="selectpicker justify-content-center  w-50">
            <option>United Kingdom</option>
            <option>United States</option>
            <option>France</option>
            <option>Germany</option>
            <option>Italy</option>
        </select>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.sailwbob.com/bootstrap/bootstrap.bundle.min.js"></script>
<script src="https://www.sailwbob.com/bootstrap/bootstrap-select.min.js" </script>

cssbootstrap-4text-align

Answer №1

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    overflow: hidden;
    text-align: center;
}

Instead of adding text-center class to the filter-option-inner-inner div, consider adding it to the parent div:

<div class="filter-option-inner-inner text-center">Nothing selected</div>

You can also add the text-center class to the parent div:

<div class="filter-option-inner text-center"></div>

Another option is to add the text-center class to the "grand-parent" div:

<div class="filter-option text-center"></div>

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

Implementing dynamic styling with Alpine JS when hovering

I am working with 2 color pickers, one for background and one for text. These are connected to the styles of a button <button :style="`background-color: ${bg_colour}; color: ${text_colour};`">TEST BUTTON</button> Everything is funct ...

cssalpine.js

Ways to create a self-contained video viewer

Is it possible to create a self-contained video player similar to jwplayer or the YouTube video player using just HTML, CSS, and JavaScript? I know that I can build a video player by utilizing the video tag along with some custom javascript and css, but ho ...

javascripthtmlcssyoutubevideo-player

The jQuery animate function fails to execute the specified animation (changing margin-left from -200 to +200)

I've been attempting to achieve a sliding effect for some text coming in from the left using .animate, but it's not working as expected. Styling (CSS) .body #header > a { font-family: Georgia, Courier, Verdana; font-size: 30px; p ...

jqueryhtmlcss

Selecting classes using JQuery on a pair of input elements and a pair of buttons

Currently, I am utilizing JQuery with two input text elements (set as readonly) and two buttons. The goal is for only input 1 to become read/write when button 1 is clicked, and for only input 2 to become read/write when button 2 is clicked. If the correspo ...

javascriptjqueryhtmlcss

Having difficulty navigating the website due to the inability to scroll

I am experiencing a problem on this website where I am unable to scroll. Visit www.Batan.io After loading the website for the first time, the trackpad (mac) works fine initially but then the scroll function stops working. Although the sidebar works, chan ...

htmlcssscroll

When attempting to display or hide elements within a function, the foreach loop only chooses the last variable when referencing the `div`

As I navigate through a straightforward foreach loop to retrieve "blog posts", the page displays basic information about each post along with a 'reply' and 'delete' button. Clicking on the 'reply' button reveals a small form b ...

javascriptphphtmlcsssql

Troubles with Borders and Padding in HTML Elements

Hello everyone, I'm currently facing an issue trying to neatly fit a textbox, select menu, and button all within the same sized div. Each element seems to have strange borders/margins causing them not to display properly (the button ends up below the ...

htmlcss

Hover effect within nested CSS styling applied to the list item element

I have structured my HTML as follows: <div id="chromemenu" class="chromestyle"> <ul> <li><a rel="dropmenu1" href="#" class="">Buy</a></li> <li><a rel="dropmenu2" href="#" class="">Sell</a>< ...

jqueryhtmlcsscss-selectors

A guide to integrating the YouTube player and Facebook API with Bootstrap 3

Hello everyone! Hey there, I'm Cody, a student and amateur web designer. I recently got the opportunity to work on a website for a family friend. I've been using bootstrap3 to ensure the site is responsive, but I've run into an issue while ...

htmlcssfacebookyoutubeembed

Toggling the `toggleClass` on a fixed element when clicking a link (such as in an off canvas menu) can

As per the following markup code, there is a sticky navigation bar (menu-bar) that reveals an off-canvas menu using CSS transitions when the button is clicked by adding a class (slide-wrapper__open) to the HTML element. HTML <div class="menu-bar"& ...

jqueryhtmlcss

How to preserve alternating row styles when exporting Angular Data Table to Excel with .withButtons?

Utilizing Angular DataTable to display a list of data, with alternate row background color and border styles defined. An issue arises when exporting the Data table to excel as the alternate row style and border styles are lost. Only the raw data is includ ...

cssangularjs

Align three or more Font Awesome icons in a row at the center

When it comes to center aligning an icon, I typically use margin: auto;, text-align: center;, or left: 50%; transform: translateX(-50%);. However, I've run into a hurdle trying to center align three icons together. I thought applying these techniques ...

htmlcssless

The concept of transparency in CSS being utilized on a nested div element

Seeking clarity on the opacity property in CSS. My dilemma involves a header with a title, tinted with an opacity of .3 (in addition to a transition effect - irrelevant to the inquiry). Referencing the gif below: https://i.sstatic.net/LXwPv.gif I apprec ...

htmlcsscolorsopacity

Prevent CSS from affecting child tables

Here is my CSS and HTML setup: .comTable { width: 95%; cellpadding: 2px; margin: auto; border-collapse: collapse; } .comTable td { text-align: left; } .comTable td:first-child { text-align: right; wi ...

csscascade

Exploring an illustration of Bootstrap

As a newcomer to html and css, I am currently working on building a website using the following example template: http://getbootstrap.com/docs/4.1/examples/dashboard/. My issue is that when I zoom in by pressing cmd + '+' or Ctrl + '+', ...

cssbootstrap-4

Utilizing Image Sprites to Enhance Your Website's

Would it be more advantageous to utilize image sprites in CSS, or opt for numerous individual image files instead? Is there a clear preference between using multiple images over one sprite, or vice versa? ...

htmlcsscss-spritesmockups

Is the styling of inline form elements compromised by validation in Bootstrap 4?

I'm facing an issue with validating an inline form field using Bootstrap 4. Whenever the validation is triggered, the width of the inline form field jumps. You can see the problem in action by clicking Enter without entering a value on this fiddle: h ...

csstwitter-bootstrapbootstrap-4

When viewing submenus of the selected menu item, they will display in the same color as

There is a menu item on the site labeled portfolio with 3 sub menus that have been added as links in the WordPress menu. When we click on the portfolio menu, the text color of the sub menus also changes. I have commented out the CSS for the current menu it ...

cssmenunavigationsubmenu

The CSS flex display is not evenly aligned on the second row

I recently started learning about display: flex, and I'm still trying to get the hang of it. As you can see in the screenshot below, even after removing some content, the last two items are not behaving like the first row. I've tried different th ...

css

Create a unique trapezoidal design using only CSS styling

Imagine having two div elements beautifully displayed as shown below. Despite consulting The Shapes of CSS, the method to create the unique yellow shape featured in the image below still remains a mystery. Is it feasible to replicate this shape using techn ...

htmlcsscss-shapes