@B33fb0n3 Hello

This is the code I write import AboutComponent from "@/components/AboutComponent";
import CatalogSwiperSection from "@/components/CatalogSwiperSection";
import CatalogueSection from "@/components/CatalogueSection";
import CompanySection from "@/components/CompanySection";
import ContactSection from "@/components/ContactSection";
import HeroSection from "@/components/HeroSection";
import SliderSection from "@/components/SliderSection";
import 'bootstrap/dist/css/bootstrap.min.css';



export default function Home() {
return (
#Unknown Channel
<SliderSection />
<HeroSection />
<CompanySection />
<AboutComponent />
<CatalogueSection />
<CatalogSwiperSection />
<ContactSection />
</>
);
}

@Aaron Hello

@Aaron I just finish creating carousel slider with react-bootstrap

don't ping the members who aren't engaged in the convo

I'm sorry

@averydelusionalperson I'm just asking for help

IK you asked for the help. now you wait for someone to help, you might get help or not. But don't ping the people who aren't engaged in the convo.

Also improve your question, provide more details. I am not able to understand what are you even trying to solve.

I tried to create a slider coursel for the website I'm creating now I installed react-bootstrap and import 'bootstrap/dist/css/bootstrap.min.css'; started to create does the line you saw on the image also changed the color of the website I tried to understand why

The carousel seems to be working fine from what I can see from the image. you may want to change styling for the text though.

I tried to change the styling I don't think the styling is the problem for the problem the import 'bootstrap/dist/css/bootstrap.min.css';

I mean.... what even is the problem? I still don't get what the problem is

Create the website with Next.js ui.shadcn

Thanks for the help

Ahmm... Okay. I would personally use shadcn too

Yeah I like is really good that's reason I start love Next.js

But now I'm fix this problem i create

@averydelusionalperson This is the code I wrote

'use client'

import React from 'react'
import { Button } from 'react-bootstrap';
import Carousel from 'react-bootstrap/Carousel';


import styles from '../styles/SliderSection.module.css'
const SliderSection = () => {
return (
<div className={styles.container}>
<Carousel className={styles.slider} data-bs-theme="white">
<Carousel.Item className={styles.sliderItem}>
<img
className="d-block w-100"
src="https://images.pexels.com/photos/18925511/pexels-photo-18925511/free-photo-of-petit-minou-lighthouse-in-evening.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
alt="First slide"
/>
<Carousel.Caption className={styles.sliderTitle}>
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>

</Carousel.Item>
<Carousel.Item className={styles.sliderItem}>
<img
className="d-block w-100"
src="https://images.pexels.com/photos/20717486/pexels-photo-20717486/free-photo-of-sea-coast-with-lighthouse-at-sunset.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
alt="Second slide"
/>
<Carousel.Caption className={styles.sliderTitle}>
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item className={styles.sliderItem}>
<img
className="d-block w-100"
src="https://images.pexels.com/photos/20717434/pexels-photo-20717434/free-photo-of-rocks-on-beach-at-sunset.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
alt="Third slide"
/>
<Carousel.Caption className={styles.sliderTitle}>
<h5>Third slide label</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</div>
)
}

export default SliderSection