Is there a way to eliminate the black border on my CSS/HTML using Bootstrap?

First and foremost, I want to clarify that the border does not appear when I test it in VSCode on my local machine's server, however, hosting with NameCheap reveals it.

This is what I am attempting to eliminate: Dropdown Menu Item with Border

Upon inspecting the Chrome web console, this is what is displayed: Chrome Dev Console Shows div has a color attribute when it does not

How can I remove this border? Admittedly, my code is somewhat disorganized, and I am in the process of learning more about CSS and Bootstrap.

Below is the code for my index.html page:

.dropdown, .dropleft, .dropright, .dropup {
    position: relative;
}

.dropdown-toggle {
    white-space: nowrap
}

... (the rest of the CSS code follows)

<!DOCTYPE html>
<html>
... (the remainder of the HTML code) 
</body>
</html>

UPDATE: After removing the style from the navbar, here is the outcome:

Navbar color tag removed

htmlcssbootstrap-4

Answer №1

The visible border is a result of the .dropdown-menu class applying 

border: 1px solid rgba(0,0,0,.15);
.

To eliminate this border, apply the following CSS rules:

.dropdown-menu.show {
    border: none;
}

Answer №2

Consider taking out the background-color:#6C3400; property from the dropdown-menu class.

Include the following css instead:

.dropdown-menu.show {
    border: 0;
}
a.dropdown-item {
    color: #FFFFFF;
}

Answer №3

.dropdown, .dropleft, .dropright, .dropup {
    position: relative;
}

.dropdown-toggle {
    white-space: nowrap
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
}

.dropdown-toggle:empty::after {
    margin-left: 0
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #6c3400;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 0
}

.dropdown-menu-left {
    right: auto;
    left: 0
}

.dropdown-menu-right {
    right: 0;
    left: auto
}

@media (min-width:576px) {
    .dropdown-menu-sm-left {
        right: auto;
        left: 0
    }

    .dropdown-menu-sm-right {
        right: 0;
        left: auto
    }
}

@media (min-width:768px) {
    .dropdown-menu-md-left {
        right: auto;
        left: 0
    }

    .dropdown-menu-md-right {
        right: 0;
        left: auto
    }
}

@media (min-width:992px) {
    .dropdown-menu-lg-left {
        right: auto;
        left: 0
    }

    .dropdown-menu-lg-right {
        right: 0;
        left: auto
    }
}

@media (min-width:1200px) {
    .dropdown-menu-xl-left {
        right: auto;
        left: 0
    }

    .dropdown-menu-xl-right {
        right: 0;
        left: auto
    }
}

.dropup .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: .125rem
}

.dropup .dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
}

.dropup .dropdown-toggle:empty::after {
    margin-left: 0
}

.dropright .dropdown-menu {
    top: 0;
    right: auto;
    left: 100%;
    margin-top: 0;
    margin-left: .125rem
}

.dropright .dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
}

.dropright .dropdown-toggle:empty::after {
    margin-left: 0
}

.dropright .dropdown-toggle::after {
    vertical-align: 0
}

.dropleft .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: .125rem
}

.dropleft .dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: ""
}

.dropleft .dropdown-toggle::after {
    display: none
}

.dropleft .dropdown-toggle::before {
    display: inline-block;
    margin-right: .255em;
    vertical-align: .255em;
    content: "";
}

.dropleft .dropdown-toggle:empty::after {
    margin-left: 0
}

.dropleft .dropdown-toggle::before {
    vertical-align: 0
}

.dropdown-menu[x-placement^=bottom], .dropdown-menu[x-placement^=left], .dropdown-menu[x-placement^=right], .dropdown-menu[x-placement^=top] {
    right: auto;
    bottom: auto
}

.dropdown-divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: white;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: transparent
}

.dropdown-item.disabled, .dropdown-item:disabled {
    color: #6c757d;
    pointer-events: none;
    background-color: transparent
}

.dropdown-menu.show {
    display: block;
    color: #6c3400;
}

.dropdown-header {
    display: block;
    padding: .5rem 1.5rem;
    margin-bottom: 0;
    font-size: .875rem;
    color: #6c757d;
    white-space: nowrap
}

.dropdown-item-text {
    display: block;
    padding: .25rem 1.5rem;
    color: white
}
<!DOCTYPE html>
<html>
    <head>
        <title>Alysa and Jordan Plus Two | Home </title>
            <link rel="stylesheet" href="https://cdn.usebootstrap.com/bootstrap/4.3.1/css/bootstrap.min.css">
      </head>
    <body style="background-image: url(img/background.png); background-size:cover;">

          <nav class="navbar navbar-expand-lg navbar-fixed-top navbar-dark" >
             <a class="navbar-brand" href="#">Jordan and Alysa Plus Two</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" >
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                  <ul class="navbar-nav">
                      <li class="nav-item active" >
                        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                      </li>
                      <li class="nav-item">
                          <a class="nav-link" href="photo_gallery.html">Photo Gallery</a>
                      </li>
                      <li class="nav-item">
                          <a class="nav-link" href="registry.html">Registry</a>
                      </li>

                      <div class="dropdown">
                        <a class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            About Us
                        </a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item no-border" href="#">Baby B Memorial</a>
                        </div>
                      </div>

                      <li class="nav-item">
                          <a class="nav-link" href="#">Contact Us</a>
                      </li>
                  </ul>
              </div>
          </nav>

          ... Remaining HTML code for the page ...

Removing 

style="background-color:#6C3400;"
from the dropdown-menu will eliminate the border.

Answer №4

To enhance the styling of the div below, consider adding a separate CSS class instead of using inline styles

<div class="dropdown-menu custom-style" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item no-border" href="#">Baby B Memorial</a>
</div>

The modified version will appear as follows:

<div class="dropdown-menu custom-style" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item no-border" href="#">Baby B Memorial</a>
</div>

Kindly refrain from using inline CSS for this purpose.

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

showing a pair of divs in a split layout on the homepage

I have a partially split homepage with two sections using Twitter Bootstrap v5.1.3 for the layout. The left side consists of two divs, one for text and one for an image. These divs are contained within a flex-parent, giving them an inline-block appearance ...

htmlcssbootstrap-5

You can use the following code to retrieve the value of the checked radio button with the name "nameOfradio", but make sure that the radio button

I am attempting to extract the value from a radio button using the following code: document.querySelector('input[name=nameOfradio]:checked').value; However, I would also like to retrieve a value even if none of the radio buttons are checked. Fo ...

javascripthtmlradio-buttonqueryselector

Tips for aligning <hr> elements in line when text lengths vary before them

(The suggestion I received wasn't quite what I had in mind) I am facing an issue with <hr> elements appearing inconsistently after titles and text generated by ACF in PHP. The varying sizes of the titles and text cause the <hr> element to ...

phphtmlcssbootstrap-4

Tips for Presenting Json Information in Bootstrap Columns

I am working on a React App that showcases Json Data on a webpage Displayed below is the JSON file: [ { "name":"Apple", "price":"3,99", "description":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod te ...

jsonreactjsbootstrap-4

When you hover over the button, a picture will appear

This is an example code snippet from W3Schools. It showcases an animated button that reveals a small arrow next to the text when hovered over. The specific line of code responsible for this effect is .button span:after {content: '\00bb'. How ...

htmlcss

What are the best ways to optimize bootstrap col-sm-* for mobile usage?

Currently, my project is responsive up to col-sm. I am looking for a way to ensure that it renders perfectly on mobile devices without having to add col-xs-* throughout the entire project. Is there a method using jquery/scss to make col-sm behave like col- ...

htmlcsstwitter-bootstrap

Looking for assistance with jqGrid

Is there a method to confirm if the grid has finished loading using a separate function? My goal is to automatically click on the first row and move that row to the second grid once this action occurs. jQuery("#search_grid").jqGrid('setGridParam&apo ...

phpjavascripthtmlajaxjqgrid

Requiring two submissions of the PHP Form Submission is necessary for the Bootstrap Modal hide method to function properly

Check out my previous question Following my previous inquiry, I attempted a recommended solution found here. However, I encountered an issue where the modal wouldn't hide on the initial submission, requiring me to submit the form twice for it to work ...

phpformsbootstrap-4

Retrieve the unique identifier-specific div element from a distant webpage and proceed to modify its content

If we consider a div with the ID MydDiv on a remote page like site.com/page1.html, how can we specifically retrieve this div for later content manipulation? What would be the most effective approach in addressing this issue? In my attempts, I have explor ...

phphtmlsimple-html-dom

Implementing a pre-defined value for ajax in ajax programming for beginners

I'm looking for guidance on setting up a hardcoded value for the OnSuccess parameter. The code I'm referencing is not my own, but I believe it may be related to Ajax. I'm a bit confused about it. Specifically, I need to focus on the OnSucce ...

javascriptphpjqueryhtmlajax

Menu options are unresponsive to clicks in the dropdown

Need help fixing my dropdown menu issue. Whenever I hover over the dropdown, it disappears before I can click on any items. Here is a snippet of the code causing the problem: #navContainer { margin: 0; padding: 0; padding-top: 17px; width: 220 ...

javascripthtmlcssdrop-down-menubootstrap-5

Issue with Jquery's Child Selector not functioning without any apparent cause

My goal is to display or hide the child class when the parent is hovered. I have multiple classes set up, similar to what is discussed in Jquery $(this) Child Selector. Unfortunately, for some mysterious reason, it is not working. This is what I currentl ...

jquerycsscss-selectorschildren

Why is it that Lotus Notes is unable to render this HTML code properly?

I am having trouble with an email that displays properly on every platform except Lotus Notes. Can anyone provide insight as to why this email is not rendering correctly in Notes? Here is a screenshot: img (please note the images are for demonstration pu ...

htmlcsshtml-tablehtml-emaillotus-notes

Align the dimensions of the table to match with the background image in a proportional

Seeking a contemporary method to match a table with a background image, ensuring all content scales proportionally. Mobile visibility is not a concern for this specific project. Using Wordpress with a starter bootstrap theme. Check out the code on jsfidd ...

htmlcsswordpresstwitter-bootstraphtml-table

Constructing an HTML table with PHP echoes

I am currently developing a PHP script for tracking user attendance. The structure I am aiming for is as follows: Alternatively, you can view my jsFiddle <form action='this_page.php' method='post'> <table> <th>Me ...

phphtml

children in CSS grid expanding beyond grid boundaries

I am facing a challenge with my grid layout where the children's content needs to be scrollable. The grid is sandwiched between a header and footer, as illustrated below: <div class="app"> <div class="header"> Header </div> ...

htmlcss

Tips for customizing the background color and image of a toaster

Looking to modify the background color and image based on the else condition (toaster.error) success: function (data) { if (data.message != ""){ toastr.success(data.message); ...

javascripthtmlcssstylesangular-toastr

Bootstrap form toggle switch component for ReactJS

I'm having trouble figuring out why the default value for my react-bootstrap switch won't set to false (off). It seems like the only way it changes is when I trigger the onChange event handler. Am I overlooking something? Below is the section of ...

javascriptreactjsbootstrap-4next.jsreact-bootstrap

Is there a way for me to tweak the images on my website in a particular way?

Here’s the situation with my website: I have two images displayed: a border (image on the right) and a photograph (on the left). I am trying to place the photographic image inside the bordered image. Just to clarify, I can't create a new border as ...

htmlcss

Create a responsive design for a webpage that adjusts font size based on the dynamic type settings in iOS

Is there a way to ensure that my website's font size dynamically adjusts for iOS users? For example, if a user changes the font size in their iPhone settings (Settings > General > Accessibility > Larger Text), I want the webpage font size to ...

htmlcssfontswebkitaccessibility