Home > Enterprise >  How do I remove this black border in my CSS/HTML with Bootstrap
How do I remove this black border in my CSS/HTML with Bootstrap

Time：09-29

Let me preface by saying that I do not see the border when I run it with VSCode on my local machine's server, but hosting with NameCheap does show it.

This is what I am trying to get rid of: Dropdown Menu Item with Border

This is what the Chrome web-console shows: Chrome Dev Console Shows div has a color attribute when it does not

How do I remove this border? I know my code is a bit messy, and I am trying to teach myself more CSS and Bootstrap.

Here is my code for the index.html page:

.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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT" crossorigin="anonymous">
    </head>
    <body style="background-image: url(img/background.png); background-size:cover;">

        <nav  style="background-color: #6C3400;" >
            <a  style="color: white;" href="#">Jordan and Alysa Plus Two</a>
            <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: #6C3400;">
              <span ></span>
            </button>
            <div  id="navbarNav">
              <ul >
                <li  >
                  <a  style="color: #FFCD73;" href="#">Home<span >(current)</span></a>
                </li>
                <li >
                  <a  style="color: white;" href="photo_gallery.html">Photo Gallery</a>
                </li>
                <li >
                  <a  style="color: white;" href="registry.html">Registry</a>
                </li>
                
                <div >
                    <a  style="background-color: #6c3400; color: white;" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      About Us
                    </a>
                    <div  style="background-color:#6C3400;" aria-labelledby="dropdownMenuButton">
                      <a  href="#">Baby B Memorial</a>
                    </div>
                </div>
                
                
                
                <li >
                    <a  style="color: white;" href="#">Contact Us</a>
                  </li>
              </ul>
            </div>
          </nav>

          <div id="carouselExampleIndicators"  data-ride="carousel">
            <ol >
              <li data-target="#carouselExampleIndicators" data-slide-to="0" ></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div  style="margin-top: 2%;">
              <div >
                <img  src="img/first_halloween.jpg" height="400px" alt="First slide">
              </div>
              <div >
                <img  src="img/2nd_image.jpeg" height="400px" alt="Second slide">
              </div>
              <div >
                <img  src="img/third_slide.svg" height="400px" alt="Third slide">
              </div>
            </div>
            <a  href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span  aria-hidden="true"></span>
              <span >Previous</span>
            </a>
            <a  href="#carouselExampleIndicators" role="button" data-slide="next">
              <span  aria-hidden="true"></span>
              <span >Next</span>
            </a>
          </div>

            <div  style="background-color: #FFCD73; border-radius: 10px; height: 100%; width: 100%; margin-top: 5vh;">
                <h3 style="font-style:italic; padding-top: 15px; padding-bottom: 15px;">"Don't find love. Let love find you. <br> That is why it is called falling in love because you do not force yourself to fall,<br> you just fall" <br> - Author Unknown</h3>
            </div>
        

          <div  style="padding-top: 5vh;">
            <div >
                <div >
                    <!-- Photo on the left --> 
                    <img  src="img/first_photo.jpg" style="margin-bottom: 5vh;">
                </div>
            <div  style="background-color: #FFCD73; border-radius: 10px; padding-top: 15px; padding-bottom: 10vh;">
                <H2>Our Story</H2>
                <p>Alysa and I met for the first time at Kennesaw State University in the Fall 2022 semester. I was the first one to message Alysa, as we were in a student group where we could all talk about our majors and meet new people. I decided to message Alysa to see if she wanted to meet and perhaps study together. Which is just what we did – we ended up studying together, and I offered as much help as I could remember while she was taking Calculus. It had been years since I took Calculus 1, and I was very rusty. Before we knew it, we were always around each other, almost every possible minute that we could. Eventually, I believe, we ended up falling for each other, even though we both were hesitant to enter a relationship. I am so, so, so glad that we met, and for the next steps of our life together!  <br><br> - Jordan | September 7th, 2022 </p>
            </div>
            </div>
          </div>
         
   
    <!-- Footer -->
<footer  style="background-color: #6C3400; margin-top: 10vh;">

    <!-- Footer Links -->
    <div >
  
      <!-- Grid row -->
      <div >
  
        <!-- Grid column -->
        <div >
  
          <!-- Content -->
          <h5 style="color: #FFFFFF;">Thank you for visiting our website!</h5>
          <p style="color: #FFFFFF;">Please be respectful, and only share this website with immediate family for the time being. Thank you! <br><br>- Jordan & Alysa</p>
  
        </div>
        <!-- Grid column -->
  
        <hr >
  
        <!-- Grid column -->
        <div >
  
          <!-- Links -->
          <h5  style="color:#FFFFFF;">Registry Links</h5>
  
          <ul >
            <li>
              <a href="https://www.amazon.com/baby-reg/J48Z6DSREQX9">Amazon</a>
            </li>
            <li>
              <a href="#!">Buy Buy Baby</a>
            </li>
            <li>
              <a href="#!">Target</a>
            </li>
          </ul>
  
        </div>
        <!-- Grid column -->
  
        <!-- Grid column -->
        <div >
  
          <!-- Links -->
          <h5  style="color:#FFFFFF;">Quick Links</h5>
  
          <ul >
            <li>
              <a href="#!">RSVP Form (Coming Soon)</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>
  
        </div>
        <!-- Grid column -->
  
      </div>
      <!-- Grid row -->
  
    </div>
    <!-- Footer Links -->
  
    <!-- Copyright -->
    <div  style="color:#FFFFFF">Copyright &copy; 2022:
      <a href="https://jordanviehmeyer.dev"> Written with &heartsuit; by Jordan Viehmeyer (Dad)</a>
    </div>
    <!-- Copyright -->
  
  </footer>
  <!-- Footer -->

  <!-- Javascript-->
   <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
 

</body>
</html>

EDIT: What shows when I remove the style from the navbar:

Navbar color tag removed

CodePudding user response：

This border shows because .dropdown-menu has set border: 1px solid rgba(0,0,0,.15);.

Add the following CSS to remove it:

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

CodePudding user response：

Try to remove background-color:#6C3400; from dropdown-menu class.

Add this css:

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

CodePudding user response：

.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  style="background-color: #6C3400;" >
            <a  style="color: white;" href="#">Jordan and Alysa Plus Two</a>
            <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: #6C3400;">
              <span ></span>
            </button>
            <div  id="navbarNav">
              <ul >
                <li  >
                  <a  style="color: #FFCD73;" href="#">Home<span >(current)</span></a>
                </li>
                <li >
                  <a  style="color: white;" href="photo_gallery.html">Photo Gallery</a>
                </li>
                <li >
                  <a  style="color: white;" href="registry.html">Registry</a>
                </li>
                
                <div >
                    <a  style="background-color: #6c3400; color: white;" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      About Us
                    </a>
                    <!-- removed  style="background-color:#6C3400;" -->
                    <div  aria-labelledby="dropdownMenuButton">
                      <a  href="#">Baby B Memorial</a>
                    </div>
                </div>
                
                
                
                <li >
                    <a  style="color: white;" href="#">Contact Us</a>
                  </li>
              </ul>
            </div>
          </nav>

          <div id="carouselExampleIndicators"  data-ride="carousel">
            <ol >
              <li data-target="#carouselExampleIndicators" data-slide-to="0" ></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div  style="margin-top: 2%;">
              <div >
                <img  src="img/first_halloween.jpg" height="400px" alt="First slide">
              </div>
              <div >
                <img  src="img/2nd_image.jpeg" height="400px" alt="Second slide">
              </div>
              <div >
                <img  src="img/third_slide.svg" height="400px" alt="Third slide">
              </div>
            </div>
            <a  href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span  aria-hidden="true"></span>
              <span >Previous</span>
            </a>
            <a  href="#carouselExampleIndicators" role="button" data-slide="next">
              <span  aria-hidden="true"></span>
              <span >Next</span>
            </a>
          </div>

            <div  style="background-color: #FFCD73; border-radius: 10px; height: 100%; width: 100%; margin-top: 5vh;">
                <h3 style="font-style:italic; padding-top: 15px; padding-bottom: 15px;">"Don't find love. Let love find you. <br> That is why it is called falling in love because you do not force yourself to fall,<br> you just fall" <br> - Author Unknown</h3>
            </div>
        

          <div  style="padding-top: 5vh;">
            <div >
                <div >
                    <!-- Photo on the left --> 
                    <img  src="img/first_photo.jpg" style="margin-bottom: 5vh;">
                </div>
            <div  style="background-color: #FFCD73; border-radius: 10px; padding-top: 15px; padding-bottom: 10vh;">
                <H2>Our Story</H2>
                <p>Alysa and I met for the first time at Kennesaw State University in the Fall 2022 semester. I was the first one to message Alysa, as we were in a student group where we could all talk about our majors and meet new people. I decided to message Alysa to see if she wanted to meet and perhaps study together. Which is just what we did – we ended up studying together, and I offered as much help as I could remember while she was taking Calculus. It had been years since I took Calculus 1, and I was very rusty. Before we knew it, we were always around each other, almost every possible minute that we could. Eventually, I believe, we ended up falling for each other, even though we both were hesitant to enter a relationship. I am so, so, so glad that we met, and for the next steps of our life together!  <br><br> - Jordan | September 7th, 2022 </p>
            </div>
            </div>
          </div>
         
   
    <!-- Footer -->
<footer  style="background-color: #6C3400; margin-top: 10vh;">

    <!-- Footer Links -->
    <div >
  
      <!-- Grid row -->
      <div >
  
        <!-- Grid column -->
        <div >
  
          <!-- Content -->
          <h5 style="color: #FFFFFF;">Thank you for visiting our website!</h5>
          <p style="color: #FFFFFF;">Please be respectful, and only share this website with immediate family for the time being. Thank you! <br><br>- Jordan & Alysa</p>
  
        </div>
        <!-- Grid column -->
  
        <hr >
  
        <!-- Grid column -->
        <div >
  
          <!-- Links -->
          <h5  style="color:#FFFFFF;">Registry Links</h5>
  
          <ul >
            <li>
              <a href="https://www.amazon.com/baby-reg/J48Z6DSREQX9">Amazon</a>
            </li>
            <li>
              <a href="#!">Buy Buy Baby</a>
            </li>
            <li>
              <a href="#!">Target</a>
            </li>
          </ul>
  
        </div>
        <!-- Grid column -->
  
        <!-- Grid column -->
        <div >
  
          <!-- Links -->
          <h5  style="color:#FFFFFF;">Quick Links</h5>
  
          <ul >
            <li>
              <a href="#!">RSVP Form (Coming Soon)</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>
  
        </div>
        <!-- Grid column -->
  
      </div>
      <!-- Grid row -->
  
    </div>
    <!-- Footer Links -->
  
    <!-- Copyright -->
    <div  style="color:#FFFFFF">Copyright &copy; 2022:
      <a href="https://jordanviehmeyer.dev"> Written with &heartsuit; by Jordan Viehmeyer (Dad)</a>
    </div>
    <!-- Copyright -->
  
  </footer>
  <!-- Footer -->

  <!-- Javascript-->
   <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
 

</body>
</html>

BY removing style="background-color:#6C3400;" from dropdown-menu you can get rid of that border.

CodePudding user response：

Using inline CSS, you can add an extra style attribute to the div below

<div  style="background-color:#6C3400;" aria-labelledby="dropdownMenuButton">
<a  href="#">Baby B Memorial</a>
</div>

The updated one will be like this:

<div  style="background-color:#6C3400; border:none;" aria-labelledby="dropdownMenuButton">
<a  href="#">Baby B Memorial</a>
</div>

Please avoid the use of inline CSS.

Page link：https//www.codepudding.com/Enterprise/559778.html

Prev:Why does spring use findById before deleteById
Next:How to shorten the width of text to not take up container width
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding