Tips for creating a responsive 'List group' in Bootstrap

Currently, I am utilizing Bootstrap's 'List group' and facing a challenge in making it responsive. In mobile view, I would like the list to display as a dropdown button similar to a navbar.

I have attempted using nav classes, but unfortunately, it is not producing the desired outcome. Here is my code snippet:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#side-menu-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>    
<ul class="list-group collapse navbar-collapse" id="#side-menu-collapse">
  <li class="list-group-item dropdown-toggle">Cras justo odio</li>
  <li class="list-group-item dropdown-toggle">Dapibus ac facilisis in</li>
  <li class="list-group-item dropdown-toggle">Morbi leo risus</li>
  <li class="list-group-item dropdown-toggle">Porta ac consectetur ac</li>
  <li class="list-group-item dropdown-toggle">Vestibulum at eros</li>
</ul>
csstwitter-bootstraptwitter-bootstrap-3

Answer №1

You have the ability to achieve this using a media query. By modifying the collapse class when the screen size is not equal to XS.

Bootply : https://www.bootply.com/L5BYCOwsZG

CSS :

@media screen and (min-width: 768px) {  
    .custom-collapse .collapse {
            display:block;
    }  
}

HTML :

<div class="custom-collapse">
  <button class="collapse-toggle visible-xs " type="button" data-toggle="collapse" data-parent="custom-collapse" data-target="#side-menu-collapse">
      <span class="">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
  </button> 
  <ul class="list-group collapse" id="side-menu-collapse">
    <li class="list-group-item dropdown-toggle">Cras justo odio</li>
    <li class="list-group-item dropdown-toggle">Dapibus ac facilisis in</li>
    <li class="list-group-item dropdown-toggle">Morbi leo risus</li>
    <li class="list-group-item dropdown-toggle">Porta ac consectetur ac</li>
    <li class="list-group-item dropdown-toggle">Vestibulum at eros</li>
  </ul>
</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

Expanding the reach of the navigation bar

Hello Everyone, Is there a way to stretch my navigation bar so that the links are evenly spaced out across the browser window instead of being clustered together? I want it to be responsive rather than fixed in size. This is my HTML code: <div class= ...

javascripthtmlcss

Display the phrase "Kindly hold on, please do not close the windows" during Ajax loading

I have implemented a partial view in my projects. Below is the Ajax code I am using: $("#btnAdd").on("click", function () { var formData = new FormData(); var dhnFiles = $("#fileDHN")[0].files; if (dhnFiles.length == 0) { ...

cssajaxmodel-view-controllerbootstrap-4

Steps to convert a half image card into a full image card using HTML and CSS

Hey there, I'm currently working on a website project for my college but I've run into an issue with the image card layout. Can anyone advise me on how to ensure that the background image of the card fills the entire space instead of being partia ...

javascripthtmlcssbootstrap-4

Is it possible to utilize arrow functions in Vue while using style binding?

As I venture into the world of Vue JS HTML templates, I am exploring how to bind styles using arrow functions. My goal is to toggle the visibility of a div that originates from the Vuex store. Below is my current attempt at achieving this. The main_activi ...

javascripthtmlcssvue.jsvuejs2

Section separators within ordered lists

I am currently working on creating a "reference document" section within a Webhelp Responsive website that I have developed using a DITA map. My goal is to display a typical document list with unique reference numbers ([1], [2], [3]...[N]) followed by rele ...

htmlcsshtml-lists

Determining the anchor in view using javascript: A guide

I've created a navigation tab with links to different sections of the page, each identified by unique ids: <section id="1"></section> <section id="2"></section> <section id="3"></section> These sections are then l ...

javascripthtmlcss

Arrangement of items in a grid with various sizes

I have encountered a challenge that I cannot seem to overcome. In my grid system, there are 18 identical items/boxes. I am looking to remove 4 of those items/boxes and combine them into one large item/box. Refer to the wireframe below for guidance on how ...

htmlcss

How to troubleshoot and resolve a sticky invisible border issue

I'm working with a table that has sticky <td>'s as headers. Unfortunately, the table's <tr> and <thead> elements cannot be made sticky. The problem I'm facing is that when the header becomes sticky, the borders disapp ...

htmlcss

Arranging Data Table

I'm working on sorting my bootstrap-datatable using the HTML5 attribute data-order, but it doesn't seem to be functioning correctly. I want the largest Work Order Number to be displayed first. Could someone assist me and point out what mistake I ...

javascriptjqueryhtmltwitter-bootstrapdatatables

Find the height of the viewport using jQuery, subtracting (n) pixels

Apologies if the topic seems puzzling, I couldn't find a better way to explain it. I utilized jQuery to adjust the height of a div to match the size of the viewport. var slidevh = function() { var bheight = $(window).height(); $(".container" ...

javascriptjqueryhtmlcss

Concerns regarding the efficiency of JavaScript (Odin Project, Etch-a-Sketch) are arising

Currently, I am delving into Javascript on the Odin Project, tackling the Etch-a-Sketch exercise. This involves creating a board where you can draw with your cursor. As part of the exercise, there's a requirement to add a resize button that allows use ...

javascripthtmlcssperformance

Modify the background color attributes within the provided array

Pagination functionality: I am looking to modify the background color when a user clicks on any element within an array. Currently, the code below allows me to achieve this effect. However, I would like the previously clicked element and all other elemen ...

javascriptjquerycssarrays

What is the best way to modify React state?

Can someone help me troubleshoot an issue with toggling React state after a button click? I want to be able to change "Work From Office" to "Work From Home" and vice versa, but it's only working once. Is there a way to achieve this using an if stateme ...

htmlcssreactjs

Is it possible to create a property that will only affect specific child elements?

Imagine you have the following snippet of code! <div class="container"> <div class="container__first">I might be a box!</div> <div class="container__second">I could be a circle!</div> </div> .container { ...

css

Visual Delights on the Menu

I am having trouble adding a "Home" picture to my menu. It keeps showing up as a blank square, even though I have tried using both .png and .jpg formats. Here is the code that I am currently using: <div id='cssmenu'> <link rel= ...

htmlcssmenu

Google Calendar iFrame experiencing overflow issues after rotation on iOS devices

I've managed to successfully embed a Google calendar into a website using an iframe. Everything is scaling properly on various browsers, however, I've encountered an issue with the calendar overflowing vertically when rotating an iPhone from port ...

htmlcss

Implementing the @media rule using Javascript

I'm trying to use JavaScript to add an image dynamically, but I want to remove it when the viewport is 600px or wider. This is my approach so far: var img = document.createElement('img'); // (imagine here all the other fields being defined ...

javascripthtmlcss

Guide on incorporating the font-awesome library in your project

Forgive me if this sounds like a silly question, but I am completely new to javascript and its libraries. I stumbled upon a similar issue as described in this thread, where the accepted solution included the following line: <link rel="stylesheet" href ...

htmlcssfont-awesome

collection of HTML elements whether they are filled or not

In my form, there is a field called Work_Location[] which is an array. I need to determine whether it is empty or not. Here is the JavaScript code: var ele=document.myForm.elements['Work_Location[]']; alert(ele.length); if(ele.length==0) { a ...

javascripthtmlcssarrays

Changing background position when modal is opened in Bootstrap 4

As shown below : https://live-example.bss.design/ (live example) Whenever I open a modal (by clicking on sign up in the top menu, then on the button), the background shifts because the modal sets the body overflow to hidden. Is there a way to prevent th ...

csstwitter-bootstrapbootstrap-4bootstrap-modal