Bootstrap 5 - Collective border surrounding entire drop-down menu

My goal is to wrap the entire bootstrap dropdown in a single shared border. The examples provided by Bootstrap have the toggle button with its own border and the subsequent dropdown-menu with another border. I am looking to have both the toggle button and the menu enclosed within a singular border when toggling the dropdown menu.

Is there a way to achieve this within Bootstrap, or should I consider using a different approach?

Attempts to encase these elements in a parent element with its own border have been unsuccessful.

htmlcssdrop-down-menu

Answer №1

An Elegant Approach Using Pure CSS

To achieve a sleek design for your dropdown, adjust the display property and experiment with different border styles.

.dropdown {
    display:  inline-block;
}
    
.dropdown .btn {
    background:  none;
    color: #000;
    border: 1px solid #000;
}
    
.dropdown-menu {
    border: 1px solid #000;
    transform: translateX(0px) translateY(36px) !important;
    width: 100%;
    border-top: none;
    border-radius: 0 0 4px 4px;
}
    
.dropdown .btn:focus,
.dropdown .btn:hover {
    outline: none;
    box-shadow: none;
}
    
.dropdown .btn.show {
    border-radius: 4px 4px 0 0;
    border-bottom: none;
}

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

Reveal concealed material by hovering over a div

Is there a way for me to replicate the animation found on this website: When hovering over the blue and green circles, they exhibit a captivating animation. I would like to achieve a similar effect with my design: What tools or techniques should I utiliz ...

htmlcssanimation

"Eliminate specific time increments like days, hours, and minutes when the timer reaches zero in a jQuery countdown

Utilizing jQuery countdown, I am attempting to eliminate days/hours/minutes when the timer reaches 00 using the update callback function .on('update.countdown', function(event) {. It is almost working correctly. However, there is just one issue: ...

javascripthtmljquerycountdownjquery-countdown

Tips for customizing font color in asp:menu sourced from sitemap

I'm trying to change the font color of an asp:menu that reads items from a sitemap. I've tried using a ccsClass but it didn't work! Here is my code: <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" StaticDisplayLe ...

asp.netcssaspmenu

ng-repeat and $scope problem

I am having an issue with my page where I display 3 images in a row using Ng-repeat. When I click on any image, it only shows the first image that was displayed in that particular row. Template: <div id="galscrolldiv" class="row" ng-repeat="image in i ...

javascripthtmlangularjs

Tips for positioning the bootstrap navbar correctly inside a container

I am having some trouble with my HTML page layout. I have a fixed Bootstrap navbar and a container with a width of 1000px. I'm trying to place the navbar inside the container, but it's not working as expected. The navbar is still taking up the fu ...

htmlbootstrap-4

Establishing the initial value for an input file form

Similar Question: Dynamically set value of a file input I'm currently working with an HTML form that includes a file input field, and I'm attempting to set the initial value for the file path in the form. I've tried changing the "value" ...

javascripthtml

Issue with React rendering numbers without displaying div

In my user interface, I am attempting to display each box with a 1-second delay (Box1 after 1 second, Box2 after another 1 second, and so on). https://i.sstatic.net/FdTkY.png However, instead of the desired result, I am seeing something different: https ...

javascripthtmlcssreactjsreact-dom

Embracing Divs Similar to the Grid Selector in Windows Phone

Can someone help me create square divs in HTML 5, similar to the example shown? I have written this HTML5 Code - what should I include in the CSS file to achieve the desired outcome? (If Bootstrap can be used, please provide the necessary classes instead ...

csshtml

Capturing Vuejs data for various pathways

Currently, I am developing a Vue file that contains the following code: <router-link :to="{name: 'detailed'}" tag='li' @click='getData("test")'> testing</router-link> In the script section, the code looks like th ...

javascripthtmlvue.js

Unexpected server error encountered during navigation of php pages

I am using PHP to retrieve data from a MySQL table and display it in an HTML table. Each row in the table has a 'remove' button that triggers a PHP script (remove.php) to delete the corresponding row from the database table and return to admin.ph ...

phphtmlmysqlmysqliwamp

Utilizing PHP and HTML div tags to connect and manipulate a MySQL database

Struggling with incorporating HTML div tags into a booking system. I have the user input fields for city, date, and pet type set up, but getting lost when it comes to passing this information to a SQL database using PHP. Can someone provide guidance on how ...

phphtmlcsssql

Rzslider not functioning properly due to CSS issues

I am facing an issue where rzslider is not appearing in my app. However, when I copy the code to an online editor, it works perfectly fine. Below is the code snippet: var app = angular.module('rzSliderDemo', ['rzModule', 'ui.boo ...

javascriptangularjshtmlcssangular-material

CSS GRID: The Default row and column gaps are automatically included

I'm trying to position the images side by side without any gaps using CSS Grid. However, I noticed that there is a default gap between the columns and rows. Here is the code I used: <div class="grid-container"> <figure class="grid_item gr ...

htmlcsscss-grid

Can you determine someone's age by choosing options from dropdown menus?

Hey there. I've been working on a little project for my job, and I put together a simple HTML text file. I'm looking to extract the date of birth from dropdown menus in order to calculate the person's age and then proceed with some other fun ...

javascripthtmlcss

The method of document.getElementsByName does not provide any results

I am a beginner in using python flask and understanding the MVC concept. My goal is to display the selected option in a dropdown list. Below is my list defined in a .py function. @app.route('/', methods=['GET']) def dropdown2(): ...

htmlflaskmodel-view-controller

Determining the exact position of an image with resizeMode set to 'contain' in React Native

I am currently developing an object detection app using React Native. The process involves sending an image to the Google Vision API, which then returns a JSON file containing coordinates and sizes of objects detected within the image. My goal is to draw r ...

javascriptcssreact-native

Using jQuery to create overlapping images

Currently, I am working on an effect that involves overlapping images. The idea is that when a bar is clicked and dragged, the image underneath should reveal by adjusting its width. While my code functions, there are some glitches present. One issue is tha ...

javascripthtmljquerycss

Having trouble understanding why the content in my div becomes cramped when the div collapses

Currently, I am working on a portfolio page in React. One issue I'm facing is that when I collapse a div, the content gets scrunched up and I can't figure out what's causing it. I tried using "white-space: nowrap;" but it doesn't seem t ...

cssreactjs

Use XMLHttpRequest to load and display a PDF file within the web browser

Can XMLHttpRequest be used to send the filename by POST method and open a PDF in the browser? xmlhttp.open("POST","pdf.php",true); //CHANGE xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("file="+input); ...

phphtmlajaxpdfxmlhttprequest

Why does tagging P trigger popups in the DIV when the DIV contains another DIV?

JSBIN HTML <p> <div>123</div> </p> CSS p div{ background:#f00; } Encountering an odd issue here. When I input the HTML structure as shown below: <p></p><div>123</div> The CSS code fails to produce ...

htmlcss