Having trouble positioning text on top of a bootstrap carousel using Bootstrap's position class. The default values (0,50,100) aren't giving me the appearance I want. I tried adding custom values to the $position-values in my scss file, but they don't seem to work, even when I include default values. Changing the theme color works fine, so I know the scss file is compiling correctly. Any help would be appreciated.
This is the custom scss code I created
@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';
$primary: blue;
$secondary: green;
$new-position-values: (
10: .1,
20: .2,
30: .3,
);
$position-values: map-merge($position-values, $new-position-values);
@import '../../node_modules/bootstrap/scss/bootstrap.scss';
This is the JSX file where I'm working with the text "Sample" and "Text"
import React from 'react';
import Link from "next/link";
import { urlFor } from '../lib/client';
import useScript from '../hooks/useScript';
const Carousel = ({gallery}) => {
return (
<div className="d-block w-75 mx-auto">
<div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="carousel">
<div className="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="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>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div className="carousel-inner">
<div className="carousel-item active" data-bs-interval="3000">
<img src={urlFor(gallery.images[0])} className="d-block w-100" alt="..."/>
</div>
<div className="carousel-item" data-bs-interval="3000">
<img src={urlFor(gallery.images[1])} className="d-block w-100" alt="..."/>
</div>
<div className="carousel-item" data-bs-interval="3000">
<img src={urlFor(gallery.images[2])} className="d-block w-100" alt="..."/>
</div>
<div className="carousel-item" data-bs-interval="3000">
<img src={urlFor(gallery.images[3])} className="d-block w-100" alt="..."/>
</div>
<nav className="navbar navbar-expand-lg navbar-light bg-primary"></nav>
<h3 className="position-absolute top-50 start-0 p-2">Sample</h3>
<h1 className="position-absolute top-30 start-0 p-2">Text</h1>
</div>
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span>
</button>
</div>
</div>
)
}
export default Carousel