Carousel CSS styling not being applied to HTML-CodePudding

I am new to bootstrap and I'm using carousel for the first time however I'm having issues with styling. I tried to resize my image using CSS however there have been no changes. I will attach my code below. I am following a YouTube tutorial.

{% load static %}
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
   </head> 
</html>

I'm sure I added bootstrap properly as well as the CSS file so I am unsure what the issue could be. I've also looked around on stack and all the solutions did not work for me.

CodePudding user response：

I think you have used wrong element class name instead of .c-item use .carousel-item

.carousel-item{
height: 280px;
}

.c-img{
height: 100%;
object-fit: cover;
filter: brightness(0.6);

.carousel-item{
    height: 280px;
}

.c-img{
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
}

<html lang="en" style="height: 100%;">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SpendingTracker | {% block title %}{% endblock %}</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css" >
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
   </head> 
  <body>
    <div id="home-carousel" >
    <div >
        <button type="button" data-bs-target="#home-carousel" data-bs-slide-to="0"  aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#home-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#home-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div >
      <div >
        <img src="https://www.discover-the-world.com/app/uploads/2018/08/norway-northern-tromso-surrounds-with-aurora-istk.jpg"  alt="Slide 1">
      </div>
      <div >
        <img src="https://imageio.forbes.com/specials-images/imageserve/63a32fa0d0e96ccdb4b9f8f3/Tromso-Aurora-Panorama-12-34-38-PM/960x0.jpg?format=jpg&width=960"  alt="Slide 2">
      </div>
      <div >
        <img src="https://media.timeout.com/images/105731796/750/422/image.jpg"  alt="Slide 3">
      </div>
    </div>
    <button  type="button" data-bs-target="#home-carousel" data-bs-slide="prev">
      <span  aria-hidden="true"></span>
      <span >Previous</span>
    </button>
    <button  type="button" data-bs-target="#home-carousel" data-bs-slide="next">
      <span  aria-hidden="true"></span>
      <span >Next</span>
    </button>
  </div>
  </body>
</html>

CodePudding user response：

First things first, it is .carousel-item and not .c-item.

Next, please make sure that your CSS file is being used by the html file.

Replace

<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css" >

With this tag

<link href="css/style.css" rel="stylesheet">

And push this link tag to the end of your head tag (your styles should always override other styles).

Keep in mind that this solution will work if you have a folder called css containing the file style.css (not styles.css) at the same level of the html file.

Regards