I am facing an issue where the carousel CSS styling is not reflecting on the

Recently, I decided to dive into the world of bootstrap and am experimenting with the carousel feature for the first time. However, I seem to be facing some challenges with styling. Despite trying to adjust the size of my image using CSS, I haven't seen any changes reflected. I have included the code snippet below, which I obtained from 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22404d4d56515650435262170c110c120f434e524a4313">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f4f9f9e2e5e2e4f7e6bbfff5f9f8e5d6a7b8afb8a7">[email protected]</a>/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d2dfdfc4c3c4c2d1c0f0859e839e809dd1dcc0d8d181">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
   </head> 
</html>

Despite my confidence in correctly incorporating bootstrap and the CSS file, I remain puzzled by the persisting issue. I have scoured various solutions on stack overflow, but none seem to address my specific problem.

htmlcssbootstrap-5

Answer №1

It appears that you have mistakenly used the wrong class name element. Instead of using .c-item, please 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b7acabacaab9a898edf6ebf6e8f5b9b4a8b0b9e9">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959899838483859687da9e94989984b7c6d9ced9c6">[email protected]</a>/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0828f8f949394928190a0d5ced3ced0cd818c908881d1">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
   </head> 
  <body>
    <div id="home-carousel" class="carousel slide">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#home-carousel" data-bs-slide-to="0" class="active" 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 class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://www.discover-the-world.com/app/uploads/2018/08/norway-northern-tromso-surrounds-with-aurora-istk.jpg" class="d-block w-100 c-img" alt="Slide 1">
      </div>
      <div class="carousel-item">
        <img src="https://imageio.forbes.com/specials-images/imageserve/63a32fa0d0e96ccdb4b9f8f3/Tromso-Aurora-Panorama-12-34-38-PM/960x0.jpg?format=jpg&width=960" class="d-block w-100 c-img" alt="Slide 2">
      </div>
      <div class="carousel-item">
        <img src="https://media.timeout.com/images/105731796/750/422/image.jpg" class="d-block w-100 c-img" alt="Slide 3">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#home-carousel" 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="#home-carousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
  </body>
</html>

Answer №2

To begin with, remember to use .carousel-item instead of .c-item.

Ensure that your HTML file is linked to your CSS file.

Swap out

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

With this code

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

Move this link tag to the end of your head section (your styles should take precedence).

Remember that this solution assumes you have a folder named css with a file named style.css (not styles.css) at the same level as the html file.

Best regards

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prolong the duration before the submenu closes on a div-based css menu

I have created a unique horizontal menu using DIVs without the use of ul and li lists. Currently, I am searching for a way to delay the collapse of the submenus when the mouse moves out. I don't mind if the solution involves JavaScript, jQuery, or CSS ...

javascriptjqueryhtmlcss

Arranging elements on a webpage using Javascript

Creating a Dynamic Div Layout with JavaScript I have successfully implemented functionality wherein clicking on + opens a div and clicking on - closes it. However, I am now faced with the challenge of handling multiple divs at runtime. How can this be ach ...

javascriptjquerycssjquery-ui

Display a single unique value in the dropdown menu when there are duplicate options

Hey there, I'm currently working on retrieving printer information based on their location. If I have multiple printers at the same location, I would like to only display that location once in the dropdown menu. I am aware that this can be resolved at ...

javascripthtmlasp.netangulartypescript

Are HTML's Regular Expressions the Equivalent of JavaScript's Regular Expressions?

I have been trying to utilize the pattern="" attribute in HTML to implement regex, but unfortunately, I am unable to locate a comprehensive list of HTML regex parameters. This has led me to ponder whether the syntax for regex in HTML is similar to JavaSc ...

javascripthtmlregex

The background image fails to display on the button

Why isn't the background image for my button appearing when set using a CSS rule? I have a button with the class "todo" and although other parts of the rule work, the image itself does not show up even after trying "background: url" and "background-im ...

htmlcss

Changing the class when a checkbox is selected using JQuery

I’m working on a bootstrap switcher and I want to change the panel color from grey to green when the checkbox (switch) is checked. I had it working before, but after updating the switcher, it no longer functions properly. Here is the main code for the s ...

javascriptjqueryhtmlcss

Leveraging HTML tables for input purposes

Just starting out with php, HTML, and mysql. Using HTML tables for the first time here. Created an HTML table filled with data from a MySQL table. Planning to use this table as a menu where users can click on a cell with a specific date. The clicked date ...

javascriptphphtmlajax

You cannot select the initial letter of an element

When using Chrome (Version 55.0.2883.87 m) (win 8.1), I noticed that text within an element with :first-letter cannot be entirely selected with mouse selection. Is there a way to address this issue without relying on javascript? div:first-letter{ tex ...

htmlcssgoogle-chrome

Trigger file upload window to open upon clicking a div using jQuery

I utilize (CSS 2.1 and jQuery) to customize file inputs. Everything is working well up until now. Check out this example: File Input Demo If you are using Firefox, everything is functioning properly. However, with Chrome, there seems to be an issue se ...

javascriptjquerycssfile-upload

Achieving Dynamic Alignment in CSS: How to Responsively Align a Div to the Width of its Parent Using Padding and Margins

My dilemma could not be clearer - I am struggling to properly align 4 divs within a width of 1150px (the maximum width of the content div). When resizing the screen, I want them to adjust accordingly: 4 in a row when possible, then 3 in the center, and so ...

cssresizeresponsive-designcss-float

Having difficulty fully modifying the jQuery class

My goal is to create an emoji system using a file named emoji.css to store the emojis. The names of the emojis are stored in a JavaScript array with some modifications. When users input an emoji text like :emoji: or :another-emoji:, JavaScript should check ...

javascriptjqueryhtmlemoji

using ng-class or ng-style for displaying error messages when validating a text area content

I'm curious about the most effective "angular" method for changing the character count style for validation purposes. I have a text area with a 250-character limit. Instead of restricting users to exactly 250 characters, we want to allow them to excee ...

javascriptcssangularjs

Centering an item using Bootstrap

I am using bootstrap in reactjs and attempting to center a text in the middle of the screen, but it seems to not be working. Can someone please point out what I am doing wrong? <div className="h-100 d-flex align-self-center justify-content-center&q ...

cssreactjsbootstrap-4bootstrap-5

The HTML dropdown menu becomes crowded with numerous <li menu items, leading to it wrapping

One issue arises when the number of menu items exceeds the capacity to fit on a single line, causing them not to wrap from left to right onto the second line. The desired outcome is for the second line of the menu to start on the left just like the first l ...

htmlcss

Prevent the appearance of a scrollbar on a fixed-position popup element

Whenever I click on a button, a Sidebar opens up and fills the entire screen due to its position being set to fixed. Here's how it looks with TailwindCSS: return ( <div className="fixed z-40 flex left-0 top-0 h-screen w-screen"> ...

cssreactjstailwind-css

Subsequent pages are failing to load stylesheets

My HTML is not linking my CSS properly. I am using the Prologue template from html5up.com. In my main directory where index.html is located, I created a subfolder for the different products I want to display. This folder contains several files including 12 ...

htmlcss

"Selecting an element through Drag/Drop will result in the element being

INQUIRY I've encountered an issue with a draggable element ($("#draggable")) that interacts with a checkbox ($('#checkable')). When the $('#draggable') is dragged onto a box ($('#droppable')), it checks $(&apos ...

javascriptjqueryhtmljquery-uidrag-and-drop

Search Bar on the Website for Google Search

I am currently working on a basic website and I'm looking to incorporate Google Search functionality into it. I've managed to create a simple search box that redirects users to the Google Search Results page when they input their query. However, ...

htmlcss

I'm using Bootstrap (version 5.3) and when I tried to replicate the features from the examples, I noticed that the background isn't being copied over

I encountered an issue today while working on a website using bootstrap. I was copying features from examples in the bootstrap section, but when I pasted the code into my coding platform, the background appeared transparent and did not display as expected. ...

htmlcssbootstrap-5

React Material-UI eliminates the 'content' property from the CSS pseudo-element

Creating a React MUI Box and styling it like this: <Box id='my-box' sx={{ '&::before': { content: 'Yay! ', backgroundColor: 'red' } }} >Life is beautiful</Box> However, duri ...

cssreactjsmaterial-uijsx