New Feature in Bootstrap 4 Beta: Double dropdown icons now available in Options Menu

I'm facing an issue with the way Bootstrap is displaying my options menu. Here's a screenshot for reference:

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

I'm unsure of what's causing this problem. I've omitted labels in this case, but they don't seem to solve the issue either.

Here's the code snippet:

        <nav class="sidebar col-sm-4 col-md-3 d-inline align-self-auto">
        <div class="form-group">
            <select class="custom-select mt-2">
                <option selected>Марка</option>
                <option value="1">БМВ</option>
                <option value="2">Рено</option>
                <option value="3">Форд</option>
            </select>

I'd appreciate any help on resolving this issue as I aim to create a visually appealing website. I'm currently using Bootstrap 4.0.0.b and compiling CSS with gulp.

Thank you in advance.

htmlcssgulptwitter-bootstrap-4

Answer №1

Have you tried incorporating the following custom CSS code? Although, it's worth noting that Bootstrap usually handles this automatically. Have you noticed if the select element on Bootstrap's website displays a double arrow as well? Also, which browser are you currently using?

.custom-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Edit:

Exercise caution when applying the above solution. These CSS properties are typically included in bootstrap.min.css, and the Custom Select feature appears correctly in their demonstration here: https://getbootstrap.com/docs/4.1/components/input-group/#custom-select

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

Ensure that you're utilizing the correct version of Bootstrap and there are no conflicting styles overriding Bootstrap's CSS.

Answer №2

For anyone in search of a dropdown menu, all the necessary information can be found at this link:

https://getbootstrap.com/docs/4.0/components/dropdowns/

If you're seeking something different, the documentation provides everything you need, including code snippets and examples :)

Check out some standard side-menu templates here:

Answer №3

My issue was resolved by eliminating the reference to Bootstrap CDN. I suggest you also try deleting the Bootstrap CDN link.

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

Interactive Dropdown-Buttons dynamically inserted

I have been utilizing a third-party library called Materializecss from this link: My issue arises when attempting to create a Dropdown feature upon clicking a button. It works perfectly fine when I manually place the button in the HTML and click on it, tr ...

jqueryhtmlmaterialize

Creating a Website Optimized for Mobile Devices

As a beginner web developer, I am in the process of creating a mobile-friendly website system. Currently, I am utilizing Bootstrap for responsiveness, PHP5, MySQL, and occasionally Ajax/JQuery. Recently, I came across JQuery Mobile. While I have been usin ...

jqueryhtmlcssajaxtwitter-bootstrap

Tips for making a div with a single triangular side using Reactjs

Hey there, I'm looking to design a header similar to the one shown in this image. Can someone provide guidance on how I can achieve this UI using React.js? https://i.sstatic.net/zmW5x.jpg ...

htmlcssreactjs

Attempting to display a larger version of an image sourced from miniature versions fetched with the assistance of PHP and

I'm dealing with the challenge of displaying thumbnails fetched from a database. PHP is successfully interacting with and presenting my thumbnails. I'm currently faced with the issue of passing the id from the database to the imageID in my JavaSc ...

javascriptphphtmlcss

Tips for looping through an HTML document using Python to extract information from Wikipedia

I am working on developing a tool to extract data from the Wikipedia API. Within an XML file named wikiepedia.html, I have several links that I want to parse through line by line in order to retrieve information which can then be formatted into JSON. The ...

pythonhtmljsonweb

Using Typescript in React to render font colors with specific styling

Attempting to utilize a variable to set the font color within a react component, encountering an error with my <span>: Type '{ style: "color:yellow"; }' is not assignable to type 'HTMLProps<HTMLSpanElement>' The use of yel ...

javascriptcssreactjstypescriptreact-redux

Custom pagination page size in AngularJS trNgGrid

I have been working on developing an Angular table using trNgGrid. It's functioning fine, but I am looking to incorporate custom pagination where the user can choose the number of page items to display per page. I checked out the TrNgGrid Global Opti ...

htmlangularjspaginationgrid

Ways to elegantly re-establish a websocket connection?

I've been working on a single-page application that utilizes HTTP and Websockets. When the user submits a form, I start streaming a response back to the client. Here's a snippet of the client-side code: var html = `<!DOCTYPE html> <met ...

javascripthtmlgo

Troubleshooting Problems with Positioning and Floating in HTML and CSS

I'm facing some challenges with clearing floats (or it could be something else?). My goal is to have the #newsbar div free from the previous floats so that its width can extend 100% across the page/browser. I believe I've tried everything within ...

htmlcss

Adjust the placement of image when changing the size of the window

Is there a way to prevent an image with a fixed position from covering up page content when the browser window is resized? <div > <img id="img1" class="wrapperImage"></img> </div> <style type="text/css"> .wrapperImag ...

htmlcss

The website is failing to extend and reveal content that is being concealed by jQuery

I'm currently diving into the world of Javascript and jQuery, attempting to create a functionality where upon clicking the submit button, the website dynamically expands to display search information. Although the feature is still in progress, I am ut ...

javascriptjqueryhtmlcss

Having trouble with your contact form sending messages?

Looking for some assistance with the Contact form on this Codepen page: https://codepen.io/ssbalakumar/pen/uzDIA The form is displaying correctly on my website, but when I try to submit it, the page reloads and I'm unsure where the message is being ...

html

Is there a way to hide the navbar items in Bootstrap 5 until the screen width reaches a specific size?

As I work on creating a navigation bar with Bootstrap 5, I am seeking a way to hide the navbar items until the screen width reaches a specific size. ...

htmlcsstwitter-bootstrapbootstrap-5

Massive HTML Table Containing Rows upon Rows

Currently, I have a server that can provide me with a list of objects in json format, and my goal is to showcase them in a table on the client side. Initially, I thought about dynamically modifying the DOM after receiving data from the server. Building th ...

javascripthtmljsondom

Divs that overlap and share the same font may exhibit variations in letter spacing

In my design, I have a div that overlays another div with the exact same offsets and font properties. The upper div has a transparent background and typically covers the text of the underlying div. However, I recently noticed an issue with my script where ...

htmlcss

Eliminate the text color from the navigation bar links

I have implemented a navigation bar using Bootstrap. I utilized .bg-danger to include a red background color. However, the links in the navbar are displaying blue instead of black as expected with the use of .navbar-light. How can I prevent the links from ...

htmlcsstwitter-bootstrapbootstrap-4

Explore a Variety of Albums with our Bootstrap LightBox Gallery

I'd like to incorporate this code into my gallery website, but I'm encountering a couple of issues. Firstly, when one album's slides finish, I want it to loop back to the first image. Additionally, there seems to be an intermittent problem w ...

javascripthtmltwitter-bootstrapbootstrap-4

Glass-pane or angular/HTML overlay on a designated element

Is there a way to create a glass-pane effect, like an hourglass symbol on a semi-transparent layer, within the boundaries of an HTML element E? The goal is to have the glass-pane only overlap the area within E's boundaries. When the glass-pane is ac ...

javascriptjqueryhtmlcssangularjs

Ways to implement multi-file loading on a website using separate HTML segments

Currently, I am working on a website for my local community. Each page contains similar content like header, navigation bar, and footer. I want to streamline this process by storing these common elements as separate HTML files. Is it possible to link the ...

html

Presentation with multi-directional animations

Curious to know if it's possible to create a unique slideshow that scrolls in multiple directions? The concept is to display various projects when scrolling up and down, and different images within each project when scrolling left and right. Is this i ...

javascripthtmlcsssliderslideshow