Having a difficult time with segmented dropdown buttons-CodePudding

I was taking a lesson on Udemy about inputs and dropdown buttons for bootstrap. The lesson was well until I decided to try and make a simple selection of albums for one of my favorite artists. The buttons separate from each other the moment I try getting them to the center underneath the photo of the artist. Can someone please tell me where I went wrong?

I tried several things to have the buttons together. I tried mx-auto, justify-content-center, margins, and nothing really worked for me. Here is my code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<div >
  <div >
    <form>
      <div >
        <div >
          <div >
            <img  src="https://yt3.ggpht.com/7tCfeCWH4arhsTM-4Rz4IxWieQbegzibeXlG-kbytAujdk5dr2K0gBb8NG0Cvk6lB1dPkjyd=s900-c-k-c0x00ffffff-no-rj" width="250px" height="250px" alt="">
            <div >
              <button >Bad Bunny Albums</button>
                <button 
                 
                type="button" 
                data-bs-toggle="dropdown">
                <span >Dropdown</span>
                </button>
            <ul >
                <li><a  href="#">X 100pre</a></li>
                <li><a  href="#">Oasis</a></li>
                <li><a  href="#">YHLQMDLG</a></li>
                <li><a  href="#">Las que no iban a salir</a></li>
                <li><a  href="#">El Ultimo Tour Del Mundo</a></li>
                <li><a  href="#">Un Verano Sin Ti</a></li>
            </ul>
            </div>
        </div>
            </div> 
        </div>
        </div>
      </div>
    </form>
  </div>
</div>

CodePudding user response：

Please replace your this : https://i.imgur.com/GE4qGZm.png HTML with below code:

<div >
    <button >Bad Bunny Albums</button>
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
    <span >Dropdown</span>
    </button>
    <ul  style="">
        <li><a  href="#">X 100pre</a></li>
        <li><a  href="#">Oasis</a></li>
        <li><a  href="#">YHLQMDLG</a></li>
        <li><a  href="#">Las que no iban a salir</a></li>
        <li><a  href="#">El Ultimo Tour Del Mundo</a></li>
        <li><a  href="#">Un Verano Sin Ti</a></li>
    </ul>
</div>

Please check working code, click the link: Click here

Please let me know if you find any issues.

CodePudding user response：

Just add me-0 in button "Bad Bunny Albums" and ms-0 in dropdown button

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script crossorigin="anonymous"
          integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
          src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div >
  <div >
    <form>
      <div >
        <div >
          <div >
            <img alt=""
                 
                 height="250px" src="https://yt3.ggpht.com/7tCfeCWH4arhsTM-4Rz4IxWieQbegzibeXlG-kbytAujdk5dr2K0gBb8NG0Cvk6lB1dPkjyd=s900-c-k-c0x00ffffff-no-rj" width="250px">
            <div >
              <button >Bad Bunny Albums</button>
              <button
                
                data-bs-toggle="dropdown"
                type="button">
                <span >Dropdown</span>
              </button>
              <ul >
                <li><a  href="#">X 100pre</a></li>
                <li><a  href="#">Oasis</a></li>
                <li><a  href="#">YHLQMDLG</a></li>
                <li><a  href="#">Las que no iban a salir</a></li>
                <li><a  href="#">El Ultimo Tour Del Mundo</a></li>
                <li><a  href="#">Un Verano Sin Ti</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
</body>
</html>