Upgrade button-group to dropdown on small screens using Bootstrap 4

I am currently developing a web application and incorporating Bootstrap 4 for certain components such as forms and tables. Within the design, I have included buttons grouped together to display various actions. Below is an example code snippet:

<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" btn-group">
  <a href='#' class="btn btn-sm btn-outline-danger"><i class="fa fa-key"></i> Change Password</a>
  <a href='#' class="btn btn-outline-dark btn-sm "><i class="fa fa-pencil-alt"></i> Edit</a>
</div>

This setup appears as shown in the following desktop view: desktop view

However, when viewed on mobile devices, the buttons extend beyond the screen boundary, visible in the accompanying image below: mobile view

My query pertains to simplifying this layout by converting these buttons into a dropdown menu resembling the structure outlined here:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
  <button type="button" class="btn btn-outline-success btn-sm dropdown-toggle " data-toggle="dropdown" id="5b4f95e9a64b5" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-cog"></i> Options
  </button>
  <div class="dropdown-menu" aria-labelledby="5b4f95e9a64b5" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(63px, 31px, 0px);">
    <a href='#' class="dropdown-item"><i class="fa fa-key"></i> Change Password</a>
    <a href='#' class="dropdown-item"><i class="fa fa-pencil-alt"></i> Edit</a>
  </div>
</div>

The conventional approach of displaying each option separately based on device type seems excessive, especially for multiple scenarios. Any suggestions or alternative methods would be greatly appreciated.

javascriptjquerycssbootstrap-4

Answer №1

Feel free to create the DOM structure for your dropdown menu, making sure to set the display property for the dropdown to d-md-none, and for the button group to d-none d-md-flex. This configuration will show the dropdown on mobile devices while hiding it on desktops, and vice versa for the button group. Check out this code snippet for an example:

<!-- CSS files -->
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<!-- JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


<!-- Dropdown for mobile -->
<div class="dropdown d-md-none">
<button type="button" class="btn btn-outline-success btn-sm dropdown-toggle " data-toggle="dropdown" id="5b4f95e9a64b5" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-cog"></i> Options
</button>
<div class="dropdown-menu" aria-labelledby="5b4f95e9a64b5" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(63px, 31px, 0px);">
<a href='#' class="dropdown-item"><i class="fa fa-key"></i> Change Password</a>
<a href='#' class="dropdown-item"><i class="fa fa-pencil-alt"></i> Edit</a>
</div>
</div>

<!-- Button group for desktop -->
<div class="d-none d-md-flex btn-group">
<a href='#' class="btn btn-sm btn-outline-danger"><i class="fa fa-key"></i> Change Password</a>
<a href='#' class="btn btn-outline-dark btn-sm "><i class="fa fa-pencil-alt"></i> Edit</a>
</div>

Edit - It's surprising how old this discussion thread is.

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

Assign a value to the input field based on changes made in another input field

I am brand new to the world of JavaScript and currently grappling with setting a value in an input field based on the onchange event of another input field. Here is my code sample for input field 1: <input type='text' onchange='methodTh ...

javascripthtmldom-eventsonchange

Easily transfer files from your browser application to your Windows applications such as Outlook or printer queues using a simple drag and

I am attempting to transfer a downloaded file from a web browser to a Windows application (such as Outlook or a printer queue) by dragging and dropping. While I can successfully drop the file onto the desktop or any other file explorer location, I face iss ...

javascriptjqueryajaxwindowsdrag-and-drop

I'm working on separating the functionality to edit and delete entries on my CRM model, but I'm having trouble finding a way to connect these buttons with my data fields

I am encountering some difficulties while trying to implement separate functionality for editing and deleting items on my CRM model. I have already created the necessary API in Angular, but I am struggling to bind these buttons with my field. Any assistanc ...

javascriptnode.jsangulartwitter-bootstrap-3

Guide to setting up Date Range Validator within MVC 4

Is there a way to limit the user from inputting a date outside of a specific range in my MVC 4 application? I'd appreciate any advice on how to achieve this. ...

c#javascriptasp.net-mvcvalidation

Displaying validation messages within text inputs in jQuery Mobile using jQuery Validate

I'm new to utilizing jQuery mobile, and I've implemented the jQuery Validate plugin for form validation. Everything seems to be functioning correctly, however, the validation messages are appearing directly next to the input text boxes instead of ...

jqueryjquery-mobilejquery-validate

How can a functional component be created in VueJS using x-templates?

Looking to create a functional component in VueJS with a template as a single-file component? Utilizing x-templates means your component will be stored in a .html file. Want to transform the given component into a functional component? <!-- my_compone ...

javascripthtmlvue.js

What is the best way to arrange images in a 3 by 3 grid, beginning at position 0, using JavaScript to control navigation through button clicks?

When I click on button 1, it starts at image 1 because the counter is set to 0. Clicking on button 2 takes me to image 4 with a counter value of 3, while clicking on button 3 leads to image 7 with a counter value of 6. The process should also work in reve ...

javascripthtmlcssimage

Sorting through mongoose information on the front end using EJS depending on a dropdown pick

Beginner embarking on my inaugural project here. I have developed 2 Mongoose schematics and models for managing categories and products. The products are nested within the corresponding categories model. Using Node and Express, I successfully sent all ca ...

javascripthtmlexpressmongooseejs

Struggling to retrieve the value from ng-model?

Currently, I am utilizing this account due to being logged into Facebook on my other account and not having access to my phone for the verification code process. On another note, I am struggling to retrieve the value from an ng-model despite numerous atte ...

javascriptangularjs

Safari having trouble auto-playing Vimeo iframe embed

Update 6/26/23: Seems like a mysterious change occurred, as now the Vimeo video on project pages is playing automatically for me in Safari without any specific reason. It's working fine on Chrome too. Not sure if Vimeo made an update or if it's r ...

javascripthtmlangulariframevimeo

Updating and managing the CSS style for button states

In my asp.net application, I have 5 list items functioning as tabs on a Masterpage. When a user clicks on a tab, I want to redirect them to the corresponding page and visually indicate which tab is active by changing its class. What is the most effective ...

cssbutton

Using iTextSharp in .Net to convert the action result into a downloadable pdf file via ajax

I have been successfully using iTextSharp to convert a razor view into a downloadable PDF via a C# controller. While the current implementation is functioning perfectly, I am seeking a way to transmit a model from a view to the PDF controller and enable th ...

javascriptc#jqueryajaxitext

Maintain and refresh the chosen option in the dropdown menu

Currently, I am working on designing a form that has a dropdown menu. My goal is to save the option that the user selects upon submission, so that when they return to the page in the future, their selected option remains as the default. I envision somethi ...

phpjquerymysqldrop-down-menu

Conceal the slider image without removing it

Is there a way to hide the slider background image on mobile screens? @media screen and (max-width: 800px){ .home #mainSliderWrapper { background-image: none; } .stlye { background-image: none; } .img--holder { background-image:none; } } I tr ...

htmlcss

Concealing the print option while utilizing PDFObject in conjunction with PDF.js

When displaying a file using pdf.js, I encountered issues with the print button and other functionalities. I was able to hide the buttons using CSS for Chrome, but not for Internet Explorer, where I had to resort to using JavaScript. While the JavaScript ...

javascriptjquerycsspdf.jspdfobject

Executing various axios requests to retrieve diverse data and populating multiple sections of the user interface in React Native

I am struggling to display various categories of movies on the same screen, such as "POPULAR MOVIES", "RECOMMENDED MOVIES", and "NEWEST MOVIES". I have been able to retrieve data for the "POPULAR MOVIES" section using an API call, but I'm unsure of th ...

javascriptreactjsdatabasereact-nativeaxios

Using AJAX to communicate with a MySQL database and create a countdown timer using JavaScript

I have been trying to display data from a database using Ajax and incorporate countdown timers with times also fetched from the same database. It has been a struggle for me for almost 24 hours now. You can check out the main code here where you will notic ...

phpjavascriptmysqlajaxcountdown

Navigate only within the tbody section of the Material UI Table by scrolling

Utilizing the material-ui Table component to build a table with a sticky header presents a challenge. The default behavior is for the scroll to encompass both the thead and tbody of the table. However, I specifically require the scroll functionality to be ...

cssmaterial-ui

Conceal excessive content on elements set in a stationary position

How can we prevent overflow of a fixed div within a container? Initially, I attempted nesting fixed elements inside each other, but that did not solve the issue. The only solution that comes to mind is using "inverted" masks: other fixed divs that hide eve ...

csswebpositionoverflow

Issue with Material UI dropdown not selecting value on Enter key press

I have encountered an issue with the material UI dropdown component that I am using. When I navigate through the dropdown options using arrow keys and press enter, the selected value does not get highlighted. Below is the code snippet for the dropdown: ...

javascriptreactjsdrop-down-menumaterial-ui