Search code examples
javascripthtmlcssbootstrap-4

Bootstrap dropdown menu navbar

I started learning Bootstrap this week and encountered a problem with the dropdown menu. I want it to float outside of my navbar, but it’s stuck. I’ve tried various methods, yet nothing has worked.

Here's the code:

    Home Contact
  • About
    • Books
  • Action
  • Another action
  • Something else here
<li style="margin-right: 20px; margin-left: 20px;"><a href="index.html">Home</a></li>
<li style="margin-right: 20px;"><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<div class="dropdown">
  <button style="margin-bottom: 30px; background-color: #1e1bc0; border: none; color: white; padding: 15px 32px; text-align:
    center; text-decoration: none;display: inline-block;font-size: 16px; " class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Books
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="book.html">Action</a></li>
    <li><a class="dropdown-item" href="book.html">Another action</a></li>
    <li><a class="dropdown-item" href="book.html">Something else here</a></li>
  </ul>

</div>

I tried using bootstrap links but still facing the same problem and need someone review/appraise my code and explain the problem.

here's the picture of the problem

my full html code: 

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Library</title>
  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-QJHXA4xXhqF6u7m0POKlVRxXJPwNQN1VkjFrAUmCs5uWKhBKechrU7EFhxkjRNSS"
    crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="my.css">

</head>

<body>
  <ul>
    <li style="margin-right: 20px; margin-left: 20px;"><a href="index.html">Home</a></li>
    <li style="margin-right: 20px;"><a href="contact.html">Contact</a></li>
    <li><a href="about.html">About</a></li>
    <div class="dropdown">
      <button style="margin-bottom: 0px; background-color: #1e1bc0; border: none; color: white; padding: 15px 32px; text-align:
        center; text-decoration: none;display: inline-block;font-size: 16px; " class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Books
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="book.html">Action</a></li>
        <li><a class="dropdown-item" href="book.html">Another action</a></li>
        <li><a class="dropdown-item" href="book.html">Something else here</a></li>
      </ul>

    </div>

  </ul>

  <div class="row1">
    <h1>Library</h1>
  </div>
  <div id="carouselExampleDark" class="carousel carousel-dark slide">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
        aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active" data-bs-interval="10000">
        <img src="h.jpg" class="d-block w-100" alt="study_laptop">
        <div class="carousel-caption d-none d-md-block">
          <h5>World Wide Shipping</h5>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="carousel-item" data-bs-interval="2000">
        <img src="j.jpg" class="d-block w-100" alt="book">
        <div class="carousel-caption d-none d-md-block">
          <h1 style="color: rgb(10, 8, 34); ">Anywhere in the world</h1>
        </div>
      </div>
      <div class="carousel-item">
        <img src="i.jpg" class="d-block w-100" alt="lib">
        <div class="carousel-caption d-none d-md-block">
          <h3>Learn now!</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

  <div class="row flex-nowrap">
    <div class="col-md-4">
      <pre><h3 style="margin-top: 50px;">
               Why Choose
                   Us?
      </h3></pre>
      <pre class="text1" style="font-size: 16px;">
        <b>
                      Lorem ipsum dolor sit amet,
                       consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt
                      ut labore et dolore magna aliqua,
                      Molestie nunc non blandit massa.
          </b>

      </pre>
    </div>

    <div class="col-md-3">
      <div class="card" style="width: 18rem; height: 300px">
        <img src="card2.jpg" class="card-img" alt="card" height="160px">
        <div class="card-body">
          <h5 class="card-title">Lorem</h5>
          <p class="card-text">Lorem ipsum dolor sit amet.</p>
          <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" Target="_blank" class="primary">Read more></a>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card" style="width: 18rem">
        <img src="card.jpg" class="card-img" alt="card">
        <div class="card-body">
          <h5 class="card-title">Lorem</h5>
          <p class="card-text">Lorem ipsum dolor sit amet.</p>
          <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" Target="_blank" class="primary">Read more></a>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card" style="width: 18rem; height: 300px;">
        <img src="card1.jpg" class="card-img" alt="card  ">
        <div class="card-body">
          <h5 class="card-title">Lorem</h5>
          <p class="card-text">Lorem ipsum dolor sit amet.</p>
          <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" Target="_blank" class="primary">Read More> </a>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="row mt-2">
    <h2 style="margin-top: 20px; margin-bottom: 30px;">Read More</h2>

    <div class="col-sm-6 mb-3 mb-sm-0">
      <div class="card bg-pink">
        <div class="card-body">
          <h5 class="card-title">To Know more</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            ut labore et dolore magna aliqua.</p>
          <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" class="btn btn-primary">Click here</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6 margin-bottom:10px">
      <div class="card bg-pink">
        <div class="card-body">
          <h5 class="card-title">Our Online Library</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            ut labore et dolore magna aliqua.</p>
          <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" class="btn btn-primary">Click here</a>
        </div>
      </div>
    </div>
  </div>

  <!-- <div id="intro">
    <p id="intro1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim euismod felis, volutpat egestas orci
      fringilla id. Vivamus nec aliquet dolor, non varius mauris. Mauris ut dolor at massa aliquet imperdiet vel
      consectetur risus. In tempus porttitor interdum. Nulla ligula urna, finibus non quam vitae, hendrerit viverra
      nibh. In hac habitasse platea dictumst. Donec volutpat elit eget justo accumsan, id volutpat felis auctor. Integer
      imperdiet fringilla dui. Aliquam eu lobortis turpis. Etiam vel dui ut tellus aliquam condimentum. Vivamus tellus
      mi, efficitur sed erat eu, blandit feugiat orci. Donec sed condimentum ex, eget blandit neque. Suspendisse sodales
      odio a quam tempor, et scelerisque justo placerat. Aliquam cursus imperdiet ligula eget placerat. Curabitur et
      fringilla nisi, ut egestas ex. Vestibulum turpis nisi, laoreet vitae libero rutrum, pharetra molestie dui.
    </p>
  </div> -->
  <footer class="bg-secondary text-center ">
    <div class="container p-4">
      <section class="mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x"
          viewBox="0 0 16 16">
          <path
            d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube"
          viewBox="0 0 16 16">
          <path
            d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
        </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-instagram" viewBox="0 0 16 16">
          <path
            d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin"
          viewBox="0 0 16 16">
          <path
            d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
        </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github"
          viewBox="0 0 16 16">
          <path
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
        </svg>
      </section>
      <section class="mb-4">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
          distinctio earum repellat quaerat voluptatibus placeat nam,
          commodi optio pariatur est quia magnam eum harum corrupti dicta,
          aliquam sequi voluptate quas.
        </p>
      </section>
    </div>
    <div class="text-center p-3" style="background-color: rgb(196, 105, 105)">
      © Made by Venom_Fury:
      <a class="text-dark" href="https://venomfury.com/">Venomfury.com</a>
    </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

</body>

</html>

//my full css code

body {
    background: #93afa4;
}

#intro1 {
    color: black;
    font-family: cursive, sans-serif;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1e1bc0;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #123cf7;
}

.search1 {
    background-color: #1bc78ed2;
    border: none;
    color: white;
    text-decoration: none;
    margin-right: 5px;
    margin-top: 7px;
    float: right;
    display: block;
    text-align: center;
    padding: 6px;
    font-size: 17px;
}

.search2 {
    margin-right: 7px;
    margin-top: 5px;
    float: right;
    display: block;
    color: black;
    text-align: center;
    padding: 6px;
    text-decoration: none;
    font-size: 17px;
}

.card {
    /* margin-top: 20px; */
    margin-right: 22px;
    margin-left: 22px;
    /* margin-bottom: 30px; */
}

.row {
    height: 200px;
    /* display: flex; */
    align-items: end;
    justify-content: end;
    margin-right: 20px;
    margin-top: 170px;
    /* margin-bottom: 20px; */
}

.carousel-item {
    height: 80vh;
}

footer {
    margin-top: 100px;
    text-align: center;
    padding: 3px;
    background-color: rgb(139, 175, 209);
    color: white;

}

.row1 {
    color: darkgrey;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("d.jpeg")
}

h3 {
    font-size: 30px;
}
h2{
    /* align-items: start; */
    /* align-self:flex-start; */
    margin-top: 30px;
    margin-bottom: 20px;
    text-align:center;
}
Solution

  • enter image description here

    you must remove one of < / div > to correct the code first