As a beginner, I'm utilizing the carousel code provided by Bootstrap. While it's functioning, the controls are taking up space to the right and left of the image instead of overlaying them.
In an attempt to resolve this issue, I added the following CSS:
}
.left carousel-control {
position: absolute;
}
.right carousel-control {
position: absolute;
}
However, this adjustment did not yield any results.
Here is the complete code snippet where the controls are positioned on the sides of the screen rather than on top of the images:
<!DOCTYPE html>
<html>
<head>
<title>Carousel Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/uxcore.css" rel="stylesheet">
...
++Update: Despite trying to adjust the positioning of the arrows over the images using "position: absolute" and "top: 0" in carousel-control as recommended by @Swati, further investigation revealed that these rules were being overridden by external sources such as .