custom $position-values not working in Bootstrap 5

Miguel G 0
Viewed 37

I am trying to position a text on top of a bootstrap carousel using Bootstrap's position class, nevertheless, default values (0,50,100) don't work for the appearance I need. I've made a custom scss file to add some values to the $position-values and made sure it is correctly compiling by changing my theme color as well. The color changes fine, but the values I've added don't seem to work at all, and furthermore, if I include default values, they stop working as well. I appreciate anyone taking their time to answer.

This is the custom scss I built

@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 I am currently working on, the text I am trying to position being "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
react-bootstrap frontend bootstrap-5 sass css
1 Answers

Why are there underscores in your top two imports? If you are only including parts of bootstrap, it should be, @import "../node_modules/bootstrap/scss/functions";, then variable overrides, then, @import "../node_modules/bootstrap/scss/variables";, then default map overrides, then the rest of the parts of bootstrap that you need as individual files.

You seem to be importing functions and variables (though the paths have an extra underscore for some reason), then importing those same functions and variables again by importing all of bootstrap at the end of your scss file.

If you want to just include all of bootstrap, do your variable overrides first, then import bootstrap, but you cannot use functions with this method.

also, your new-position-values are just named position-values in your scss. You may want to name them new-position-values, to match what you have in your map merge.

also, when overriding a theme color, you don't need to mess with the theme-color map. you should only need to change the variable $primary and that's it.

dqhendricks0
Related