Using Bootstrap v4 to create an Inline Select with Text

Currently seeking an inline dropdown styled with Bootstrap v4 that resembles the following:

https://i.sstatic.net/ZTs8b.gif

I have experimented with several options, and so far the closest one is as follows:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

The issue at hand is that the toggler should not be a button, but perhaps a span instead. What CSS rules do we need to implement to achieve a similar look as depicted in the screencast above?

cssdropdownbootstrap-4

Answer №1

Understood, thank you!

  • Include d-inline-flex in the container's classes.

  • Replace the button with a span element, remove the btn class, and add the font-weight-bold class.

    <div class="dropdown d-inline-flex">
    Show posts by: <span class="dropdown-toggle font-weight-bold" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown selection
    </span>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>

Answer №2

Whenever an element uses data-toggle="dropdown", it will trigger the opening of the dropdown.

To see an example, visit 

  <h4 data-toggle="dropdown">
        Open Dropdown
  </h4>
  <ul class="dropdown-menu">
       <a class="dropdown-item" href="#">
           ...
       </a>
  </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

Every div must have at least one checkbox checked

Coding in HTML <div class="response"> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </div> <div class="response"> <input type="check ...

javascriptjquerycss

Exploring the growth of CSS offsetting alongside with AngularJS

I am working on an Angular app where I need to increase the left offset of a div by 90px every time the slideThis() function is called. In jQuery, I would typically achieve this using left: '+=90', but I'm struggling to find a similar method ...

javascriptjqueryhtmlcssangularjs

Issue with toggleClass functionality (potential coding glitch)

I am attempting to display my div once the button is clicked. Below is the code snippet: <div class="post-menu"> <button class="button"> <i class="uil uil-ellipsis-h"></i> </button> ...

htmljquerycss

The use of absolute positioning in conjunction with overflow:hidden

<div id="container" style="overflow:hidden; position:relative;"> <div id="content" style="position:absolute;"> </div> </div> Is it possible to display the content element which is larger than its parent container, while still k ...

htmlcss

Creating a div overlay triggered by the addition of a child tag

Using the Paypal zoid feature, I have a button that opens an iframe in the parent div when clicked. However, the iframe causes the other contents of the website to shift around, making it look messy. I'm wondering if there is a way to make the parent ...

javascriptcsspaypaldom-events

Is there a way to incorporate a subtle fading effect when transitioning between images?

I find this continuously changing image every 5 seconds to be a bit overwhelming without any smooth transition. Is there a way I can implement a short fade effect like what is possible in CSS? import React, { useEffect, useState } from "react"; ...

javascripthtmlcssreactjs

Guide to opening a link in a new tab within the same webpage

I have observed numerous web applications that feature a single web window with multiple links. When clicking on the links, the corresponding form opens in a new tab within the same web page of the application. I'm curious about how to achieve this fu ...

jqueryhtmlcssajaxjquery-ui

Align the footer vertically with Bootstrap 4, ensuring it stays in line with columns and rows

Seeking a solution to vertically align the 2 rows within the footer, both arranged using a Bootstrap grid. My attempt involved creating a content wrapper and utilizing a conventional flexbox solution: display: flex; align-items: center. However, this caus ...

cssbootstrap-4

Leverage CSS variables to dynamically create class names within SCSS

Can CSS variables be used to generate class names? I am incorporating SCSS in an Angular project and I am looking to base my class names on the @input color component property. I have stored the input in a CSS variable called --color-variable to utiliz ...

cssangularsass

Tips for loading a webpage directly to the center instead of the top position

Is there a way to make the page open at a specific div halfway down the page instead of starting from the top? Here is an example: <div id="d1"> <div id="d2"> <div id="d3"> <div id="d4"> <div id="d5"> <div id="d6"> Do ...

javascripthtmlcss

Create a simple carousel using only vanilla JavaScript, without relying on any external plugins

Currently, I am working on implementing a carousel using plain JavaScript without the use of any plugins. My goal is to have previous and next buttons that will control the sliding images. var firstval = 0; function ...

javascriptjqueryhtmlcss

Validating SASS based on class name

Hi there, I am fairly new to SASS and do not consider myself a programming expert. I have ten aside elements that each need different background colors depending on their class name. Even after going through the SASS documentation, I am still unable to f ...

cssclassvariablessassmixins

Is it possible to include a class in a 'label' element?

Forgive me if this is a simple question, but I'm curious - is it possible to add a class directly to a 'label' tag without needing to enclose it in a 'span' tag for styling? As I delve into "CSS: The Missing Manual," the book instr ...

cssclasslabelformsstyling

The loading of the bootstrap CSS file in React is encountering issues

My component code is as follows: import React from 'react'; import 'bootstrap/dist/css/bootstrap.css'; class Test extends React.Component{ render(){ return( <div> <button className="btn btn-danger"> ...

node.jsreactjsbootstrap-4electron

I have implemented the appropriate code to showcase a background color, yet it doesn't seem to be appearing on the screen. Additionally, I am utilizing Sass in this project

Could someone help me understand why the background color is not showing on my website? This is the CSS I am using html { font-size: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } *, *::before, *::after { -webkit-box-sizi ...

htmlcsssass

Diagram with Cascading Style Sheets and Hypertext Markup Language

As I work on creating a flowchart, here is the code that I have developed: #flowchart { width: 580px; text-align: center; font-family: sans-serif; font-size: .8em; margin: auto; } #flowchart a { ...

htmlcssrounded-cornersflowcharthtml-heading

Unveiling the Quirk of Foundation 5: Grid Encounters a Popping

Recently, I encountered an issue with Foundation 5. Whenever I attempt to apply the "position:fixed" property on a "div" element that is part of the Foundation Grid, it causes the div to break out of the grid and align itself with the left edge of the ro ...

csszurb-foundation

"Enhance Your Website with Custom CSS Backgrounds

Can anyone provide information on the popular CSS style currently seen in many websites? This style features a full-screen background with the website's content displayed on top under smaller dimensions. An example of this can be seen on a website li ...

htmlcss

Troubleshooting Bootstrap 5 Navbar Customization Problem: Vertical Display Instead of Horizontal Viewing

My current challenge involves customizing a Bootstrap 5 navbar to arrange three elements - a user avatar, a notifications panel, and a menu icon - in a horizontal layout. Despite my efforts, these elements are appearing in a vertical stack instead of horiz ...

cssbootstrap-5

Place the navigation elements vertically in a single column

My menu bar is structured as shown below <header> <nav> <a href="#">Home</a> <a href="#">Our Story</a> <a href="#">Tools</a> <a href="#">Technolo ...

phpjquerycsshtml