Utilizing technology
- Bootstrap
- CSS
- JS
- Django
- Python
The Issue at Hand
I am facing a challenge with declaring the container-fluid and ensuring that the carousel slide occupies the entire screen.
However, I have noticed that there is some space remaining at both ends,
I am looking for assistance in filling those gaps,
as well as adjusting the height of the carousel slide.
Being new to CSS, any help would be greatly appreciated!
The HTML Code for Carousel Slide Sections
<div class="container-fluid">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://placeimg.com/640/480/any" class="w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://placeimg.com/640/480/any" class="w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://placeimg.com/640/480/any" class="w-100" alt="...">
</div>
</div>
</div>
</div>
All My HTML Code
<!doctype html>
<html lang="en">
{% load static %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'Blog/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'Blog/css/bootstrap.min.css' %}">
<title>Demonstration of Bootstrap</title>
<!-- Navigation-->
</head>
...