Thiết kế website giá rẻ

Question

everything worked properly earlier, but now I launched my website and the carousel was broken. The same was with the buttons and etc.

What happened to bootstrap?
I guess there is smth wrong with the CDN. I see bootstrap’s buttons and sliders, but they don’t work properly.

My index.html:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Факультет экономики, психологии, менеджмента</title>
    <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="styles.css">
</head>
<body class="bg-dark">

<div class="container text-center mt-5">
    <h1>Факультет экономики, психологии, менеджмента!!!</h1>
    <h2>История</h2>

  <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="images/slide1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/slide2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="images/slide3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" 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 mt-5">
        <div class="col-md-4">
            <a href="economic.html" class="btn btn-outline-warning btn-lg w-100">
                <div class="card">
                    <img src="images/economic.jpg" class="card-img-top" alt="Economic Faculty">
                    <div class="card-body">
                        <h5 class="card-title">Экономический факультет</h5>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-4">
            <a href="international.html" class="btn btn-outline-warning btn-lg w-100">
                <div class="card">
                    <img src="images/international.jpg" class="card-img-top" alt="International Business Faculty">
                    <div class="card-body">
                        <h5 class="card-title">Факультет международного бизнеса</h5>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-4">
            <a href="psychology.html" class="btn btn-outline-warning btn-lg w-100">
                <div class="card">
                    <img src="images/psychology.jpg" class="card-img-top" alt="Psychology Faculty">
                    <div class="card-body">
                        <h5 class="card-title">Факультет психологии</h5>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>
</html>

My styles.css:

/* styles.css */
body {
    background-color: #738394;
    font-family: 'Roboto', sans-serif;
}

h1 {
    color: #F8F8FF;
    font-family: 'Montserrat', sans-serif;
}

.carousel-item img {
    height: 400px;
    object-fit: cover;
}

.card {
    cursor: pointer;
    transition: transform 0.3s;
}

.card:hover {
    transform: scale(1.05);
}

.btn {
    background-color: #FF4500;
    border-color: #FF4500;
    color: #FFFFFF;
}

.btn:hover {
    background-color: #DC370B;
    border-color: #DC370B;
    color: #FFFFFF;
}

.card-body {
    background-color: #FFFFFF;
}

.container.text-center {
    background-color: #808080;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
}

Now it’s smth like this:

But it was:

Thiết kế website giá rẻ

Danh mục

What happened to bootstrap installation to my project?