CODEWITHSUNDEEP
htmlcssdrop-down-menubootstrap-4border
Lizzie C
Lizzie C

Reputation: 1

How to remove border from bootstrap's dropdown menu?

I copied and pasted a dropdown menu from bootstrap and started messing around with it. I first copied the one where the dropdown is a button, then I changed it to the one with anchor tags. When I changed it from button to anchor, these borders just appeared and I can't get them to go away. I tried just about everything.

sample

<div class="d-flex flex-column flex-md-row justify-content-center pb-3 px-md-4 mb-0 bg-white border-bottom box-shadow">
  <div class="btn-group">
    <div class="dropdown">
      <a href="#" onclick="loadPage('Crabs')" class="btn btn-secondary dropdown-toggle ml-3 mr-3 navbartext" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Link
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <a class="dropdown-item" href="#" onclick="gotoDetail('cr01')">Medium Soft Shell Crabs</a>
        <a class="dropdown-item" href="#" onclick="gotoDetail('cr02')">Hotel Soft Shell Crabs</a>
        <a class="dropdown-item" href="#" onclick="gotoDetail('cr03')">Prime Soft Shell Crabs</a>
        <a class="dropdown-item" href="#" onclick="gotoDetail('cr04')">Jumbo Soft Shell Crabs</a>
        <a class="dropdown-item" href="#" onclick="gotoDetail('cr05')">Whale Soft Shell Crabs</a>
        <a class="dropdown-item" href="#" onclick="gotoDetail('cr06')">Crab Meat</a>
      </div>
   </div>
 </div>
</div>


#dropdownMenu2 {
    background-color: #ffffff;
    color: #4d4d4d;
}

.dropdown-menu {
    text-transform: capitalize;
}

/* Removes caret from dropdown menu button */
.dropdown-toggle::after{
    display: none;
}

.dropdown:hover .dropdown-menu{
    display: inherit;
  }

Upvotes: 0

Views: 5375

Answers (2)

Robert Reiz
Robert Reiz

Reputation: 4432

For bootstrap 4 your can simply remove the btn css class. Then the whole thing will behave like a regular link. The hover effect of the link can also be annoying, that's why I added this here to my css files: 

.dropdown-toggle:hover {
  color: black;
  text-decoration: none;
}

That shuts off the hover effect for the link element.

Upvotes: 0

davedeecoder
davedeecoder

Reputation: 235

So I rendered your code on Codepen.

Looks like you just need to remove the class .border-bottom from the parent div.

That should do it.

Upvotes: 1

Related Questions