Is it possible to convert a list-group into a dropdown menu using Bootstrap 4?

I'm currently using the latest version of Bootstrap 4 and facing a challenge with making my 'list-group' responsive. Despite searching for solutions, I have yet to find one that fits my specific needs.

The 'list-group' is intended to be a tab, displaying content on the left side. While it functions correctly on desktop screens, the design falls short on mobile devices. After some exploration, I noticed that implementing a dropdown menu above the content could be a viable solution. However, I am unsure how to convert my list into a dropdown without causing any issues.

Here is what it looks like currently, with a red background indicating the selected tab and a different shade of red when hovered over: list-group. Ideally, I would like to position it at the top of its content on mobile view so that clicking on the category title expands the submenu.

Below is the code snippet:

<div class="col-xl-3 ">
      <div class="list-group list-group-flush" id="list-tab" role="tablist">

        <h4> Lorem Ipsum </h4>
        </br>
        <a class="list-group-item list-group-item-action active" id="list-who-list" data-toggle="list" href="#list-who" role="tab" aria-controls="who">dolor sit amet quo te</a>
        <a class="list-group-item list-group-item-action" id="list-info-list" data-toggle="list" href="#list-info" role="tab" aria-controls="info">lorem prompta deseruisse</a>
        </br>
        <h4> Mei ipsum neglegentur ex</h4>
        </br>
        <a class="list-group-item list-group-item-action" id="list-contact-list" data-toggle="list" href="#list-contact" role="tab" aria-controls="contact">est probo</a>
        <a class="list-group-item list-group-item-action" id="list-where-list" data-toggle="list" href="#list-where" role="tab" aria-controls="where">nusquam eu</a>
        </br>
        <h4> Quo solum soleat</h4>
        </br>
        <a class="list-group-item list-group-item-action" id="list-get-list" data-toggle="list" href="#list-get" role="tab" aria-controls="get">adversarium id</a>
        <a class="list-group-item list-group-item-action" id="list-send-list" data-toggle="list" href="#list-send" role="tab" aria-controls="send">qui ex minim discere</a>

    </div>
  </div>

Essentially, I aim to reposition the entire list at the top of the tab on smaller screens such as mobile/tablet devices, converting the 'h4' elements into a dropdown menu where clicking on the title reveals the corresponding item.

Consideration has been given to creating a dropdown menu solely for small screens, though uncertainties remain regarding whether this approach constitutes a genuine solution or merely a temporary fix.

htmlcssresponsive-designbootstrap-4

Answer №1

Converting a list group into a dropdown is a simple process. The desired outcome is to have a dropdown menu with headers similar to what is shown in the Bootstrap documentation.

To achieve this, first remove the classes list-group-flush and list-group-item-action. Then rename all instances of list-group to dropdown:

<div class="col-xl-3 ">
      <div class="dropdown" id="list-tab" role="tablist">
        <h4> Lorem Ipsum </h4>
        </br>
        <a class="dropdown-item active" id="list-who-list" data-toggle="list" href="#list-who" role="tab" aria-controls="who">dolor sit amet quo te</a>
        <a class="dropdown-item" id="list-info-list" data-toggle="list" href="#list-info" role="tab" aria-controls="info">lorem prompta deseruisse</a>
        </br>
        <h4> Mei ipsum neglegentur ex</h4>
        </br>
        <a class="dropdown-item" id="list-contact-list" data-toggle="list" href="#list-contact" role="tab" aria-controls="contact">est probo</a>
        <a class="dropdown-item" id="list-where-list" data-toggle="list" href="#list-where" role="tab" aria-controls="where">nusquam eu</a>
        </br>
        <h4> Quo solum soleat</h4>
        </br>
        <a class="dropdown-item" id="list-get-list" data-toggle="list" href="#list-get" role="tab" aria-controls="get">adversarium id</a>
        <a class="dropdown-item" id="list-send-list" data-toggle="list" href="#list-send" role="tab" aria-controls="send">qui ex minim discere</a>
    </div>
  </div>

Next, modify the first occurrence of dropdown or class="dropdown" to be class="dropdown-menu show". Also, add a class dropdown-header to the h4 elements:

<div class="col-xl-3 ">
      <div class="dropdown-menu show" id="list-tab" role="tablist">
        <h4 class="dropdown-header"> Lorem Ipsum </h4>
        </br>
        <a class="dropdown-item active" id="list-who-list" data-toggle="list" href="#list-who" role="tab" aria-controls="who">dolor sit amet quo te</a>
        <a class="dropdown-item" id="list-info-list" data-toggle="list" href="#list-info" role="tab" aria-controls="info">lorem prompta deseruisse</a>
        </br>
        <h4 class="dropdown-header"> Mei ipsum neglegentur ex</h4>
        </br>
        <a class="dropdown-item" id="list-contact-list" data-toggle="list" href="#list-contact" role="tab" aria-controls="contact">est probo</a>
        <a class="dropdown-item" id="list-where-list" data-toggle="list" href="#list-where" role="tab" aria-controls="where">nusquam eu</a>
        </br>
        <h4 class="dropdown-header"> Quo solum soleat</h4>
        </br>
        <a class="dropdown-item" id="list-get-list" data-toggle="list" href="#list-get" role="tab" aria-controls="get">adversarium id</a>
        <a class="dropdown-item" id="list-send-list" data-toggle="list" href="#list-send" role="tab" aria-controls="send">qui ex minim discere</a>
    </div>
  </div>

These changes will transform your list group into a functional dropdown menu while preserving the structure of the original content.

Enjoy!

Answer №2

Considering that your list-group div only occupies 3 out of the 12 columns on a large screen, have you thought about using col-sm-12 instead?

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

Python web scraping for IMDb data

I am currently working on analyzing data from a previous Harvard CS 109 course and I'm having trouble extracting the ratings from the top 250 most voted movies in the dataset. It seems like there are two instances of td.ratingColumn, one containing th ...

pythonhtmlcssweb-scraping

Concealing dropdown choices in a form with CSS only

My CSS skills are pretty limited, and despite my efforts to find a solution to my problem, I've come up short. I'm trying to tweak a CSS stylesheet to customize an advanced search form tied to a database. Unfortunately, I can't make any chan ...

cssforms

Best practices for removing css styles from a div element when selecting another within a Polymer application

Seeking assistance, can anyone help me? I have an iron-list with individual entries each containing a "settings" icon. When this icon is clicked, a panel slides in from the right. The issue I am facing is that I want the panel to close automatically when ...

javascripthtmlcsspolymer

Is there a way to adjust the spacing between cards in Bootstrap?

I am attempting to replicate the layout shown in the attached picture. How can I adjust this property? Expected output: I would like the elements to be closer together and centered on the page, but I am struggling to achieve this. I have tried adjusting ...

htmlcssbootstrap-5

Display radio buttons depending on the selections made in the dropdown menu

I currently have a select box that displays another select box when the options change. Everything is working fine, but I would like to replace the second select box with radio buttons instead. Can anyone assist me with this? .sub{display:none;} <sc ...

javascriptjqueryhtmlcssdrop-down-menu

Adjusting dimensions using JavaScript for sections

Can you explain why <section> elements do not support width and height attributes like <canvas> elements? (JSFiddle) ...

javascripthtmlcssdom

Is there a way for me to identify the scrolling height and dynamically adjust the title using jQuery?

I am in the process of creating a list of shops from different countries for my website. I want to implement a feature that detects when the user has scrolled to a specific area so I can update the title at the top accordingly. My idea is to assign classe ...

jqueryhtmlcssscrollhtml-lists

Tips for enlarging an image element without causing the header to expand

I'm looking to enhance a logo image within a header element by expanding it on hover or creating a pulse effect. I thought of increasing the max-width and adding a transition for simplicity. However, my main concern is how to make only the img element ...

htmlcssbootstrap-4

Steps for adding information to a sub tag within an XML document

Imagine having this example tag <root> <foo> </foo> </root> with the following html form <form action="foo.php method="post"> <input type="text" name="something"> <input type=" ...

phphtmlxml

How can I ensure that Bootstrap Navbar elements are all aligned in a single line?

https://i.sstatic.net/pkxyI.pngI'm experiencing an issue with my code, and I suspect it might be related to Bootstrap. I've tried using align-items-center but it doesn't seem to work as expected. Changing the display property to inline or in ...

javascripthtmlcssreactjsnavbar

What are some of the top languages, libraries, and modules used to create a web application for constructing templates?

Our company specializes in creating websites for membership-based associations. Currently, we utilize custom DLL's created with CodeGear Delphi to connect with a SQL Server database and implement a unique HTML template language. Essentially, our templ ...

htmliistemplates

Is it possible to utilize AngularJs Directives in order to add a styling to a pseudo Element?

As I continue my journey to learn Angular, a roadblock has appeared while trying to create a directive. My goal is to construct a Directive that extracts the URL from a data-attribute ('background-image') and uses it as a background-image for a ...

javascriptjqueryhtmlcssangularjs

Mastering the Cache-Manifest file configuration for optimal performance

I am experiencing a problem where even though I have my cache manifest, my website is not functioning correctly. Currently, I am working with Visio 2012, using asp.net MVC. Here are the steps I have taken so far: I created a file called Manifest.manifes ...

asp.net-mvchtmlfirefoxcache-manifest

Creating a see-through backdrop without the need for a background image

How can I create a div with a transparent background? I attempted to use background-color and opacity, but unfortunately, the border and text inside also became transparent. Check out an example here. Is there a way to achieve this without relying on a tr ...

htmlcsstransparentbackground-color

Finding the Xpath for an element that contains only a span tag, with identical attributes except for the text within

I am struggling to find the xpath for a button element that says 'Cancel'. <div class="uipresk"> <button class="something" role="button" type="button"> <span class="thisthing">OK</span> </button> ...

c#htmlxmlseleniumxpath

Change the value of a boolean cell within my database table

I have a task where I need to dynamically update the status of the show_msg parameter based on user actions. When the submit button is pressed, I want to set it as TRUE if the checkbox is checked, and FALSE if not. The main HTML code includes a popup wind ...

javascripthtmlruby-on-railsajax

Can you suggest a method to align this form to the center?

Take a look at this image Hello there! I am trying to center the login form on my webpage and I have added this code to my index file: Here is the complete code snippet: <section class="row" justify-content-center> <section class="col-12-sm ...

cssbootstrap-4

Guide on making a button display an image, then switch back to the initial image when clicked again

Currently, I have this neat feature on my website where there's a button that toggles the image/background color - kind of like a dark mode switch. The background change is working fine, but I'm encountering some challenges with organizing the im ...

javascripthtmlcss

The html-docx-js package generates incomprehensible text

Has anyone successfully utilized html-docx-js recently? I attempted the following code snippet: var newHTML = "<!DOCTYPE html><html><head lang='en'><meta charset='UTF-8'><title>Report</title& ...

javascripthtmlnpmms-worddocx

Position the Bootstrap footer element at the bottom of the page

On a custom HTML page that I created, I decided to include a footer using Bootstrap. In this example, it demonstrates how the footer can be positioned at the bottom of the page without being placed inside a container element (directly within the body eleme ...

htmlcsstwitter-bootstrap