HTML не отображается должным образом в Django

Я наивен в Django и HTML и пытаюсь создать приложение с помощью django. Я узнал о сайте getbootstrap.com . И я пытался создать выпадающую кнопку оттуда в моем файле index.html.

Код для кнопки Dropdown выглядит следующим образом.

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>

И я ожидаю кнопку, как показано ниже:

enter image description here

Но я получаю кнопку в следующем виде:

enter image description here

Я хочу знать, где я ошибаюсь?

Обновление 1

У меня есть мой файл index.html внутри папки template следующим образом:

create_user - это мое приложение, которое я создаю, а ops_solution_v0 - это проект, над которым я работаю

enter image description here

Мне кажется, вы забыли добавить ссылку cdn в файл index.html.

Просто добавьте следующий код в файл index.html:

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

Добавьте вышеуказанную ссылку cdn внутри тега head в вашем индексном файле.

Вывод будет выглядеть так, как вы ожидали

Вернуться на верх