<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step 3 Cards</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg p-3 mb-5 bg-body rounded">
<div class=" container-fluid">
<a class="navbar-brand" href="#">Step 3 Clinic</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<form class="d-flex">
<button id="login-btn" class="btn btn-outline-success" type="submit" data-toggle="modal"
data-target="#loginModal">Log in</button>
<button class="btn btn-outline-success" type="submit">Create Visit</button>
</form>
</div>
</div>
</nav>
</section>
<!-- Модалка для Log in-->
<div class="modal fade" role="dialog" id="loginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal title">Log in Form</h3>
<button class="close" type="button" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="password" name="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-sucess">Sign in</button>
</div>
</div>
</div>
</div>
UPD:
версия Boostrap 5.1
Префикс -bs-
в data-атрибутах кнопки вызова модалки (data-bs-toggle
, data-bs-target
) не помогает.
body
, 2. Вы подключили Javascript?