Carousel Bootstrap not working as a slide - html

Question

I have written a Portfolio.js file using react library react-bootstrap Carousel.js to create an uncontrolled carousel. My code displays the slides in vertical instead of switching as Carousel, https://react-bootstrap.github.io/components/carousel/. My carousel behavior does not work
Posting the code below: https://codesandbox.io/s/stoic-beaver-6j1ie?file=/src/component/Project.js
import React, { Component } from "react";
import TextBlock from "./TextBlock";
import "../styles/Styles.css";
import { Row, Col, Carousel } from "react-bootstrap";
import ModalItem from "./ModalItem.js";
import model from "../assets/img/portfolio/3d-tool.PNG";
import portfolio from "../assets/img/portfolio/download.svg";
import americanDream from "../assets/img/portfolio/download.jpg";
import PrevButton from "../assets/img/PrevButton.svg";
import NextButton from "../assets/img/NextButton.svg";
import features from "../assets/img/portfolio/model.gif";
import photo from "../assets/img/portfolio/portfolio.gif";
import styled from "styled-components";
// import 'bootstrap/dist/css/bootstrap.min.css';
const StyledCarousel = styled(Carousel)`
.carousel-control-prev-icon {
background-image: url(${PrevButton});
}
.carousel-control-next-icon {
background-image: url(${NextButton});
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 2em;
height: 2em;
}
.carousel-control-next,
.carousel-control-prev {
top: 40%;
bottom: auto;
z-index: 20;
}
`;
class Portfolios extends Component {
state = {
modals: [
{
id: 1,
open: false
},
{
id: 2,
open: false
},
{
id: 3,
open: false
}
]
};
onOpenModal = (id) => {
this.setState({
modals: this.state.modals.map((item) => {
if (item.id === id) {
item.open = true;
}
return item;
})
});
};
onCloseModal = (id) => {
this.setState({
modals: this.state.modals.map((item) => {
if (item.id === id) {
item.open = false;
}
return item;
})
});
};
getOpen = (id) => {
const open = this.state.modals;
return open[id - 1].open;
};
render() {
return (
<section id="portfolio">
<div className="content">
<h2>MY PROJECTS</h2>
<div id="Projects" className="Projects">
<Row className="no-gutters" data-aos="fade-up" data-aos-delay="100">
<Col sm={12}>
<TextBlock title="Go over some projects I have worked on">
<div style={{ paddingTop: "0.5em" }}>
<Carousel>
<Carousel.Item>
<img
className="d-block"
src={model}
width="70%"
alt="First slide"
/>
<Carousel.Caption>
<h3>3D Construction Tool</h3>
<p>
A React website to render 3D model in astronomy,
built with React front-end, Node server, WebGL,
Google Cloud Platform and Neural Network
<br />
<button
className="Styled-Button"
onClick={() => {
this.onOpenModal(1);
}}
>
Details
</button>
<a
className="Styled-Button"
href="https://github.com/tuyenphk/3D-RECONSTRUCTION-TOOL"
target="_blank"
rel="noopener noreferrer"
>
Code
</a>
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block"
src={portfolio}
width="70%"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Portfolio Website</h3>
<p>
My personal portfolio responsive website, built with
React to let viewers get to know a little bit more
about me, my projects and my designs
<br />
<button
className="Styled-Button"
onClick={() => {
this.onOpenModal(2);
}}
>
Details
</button>
<a
className="Styled-Button"
href="https://github.com/tuyenphk/porfolio-website"
target="_blank"
rel="noopener noreferrer"
>
Code
</a>
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block"
src={americanDream}
width="70%"
alt="Third slide"
/>
<Carousel.Caption>
<h3>American Dream</h3>
<p>
My first web application project
<br />
<a
className="Styled-Button"
href="http://cis-linux2.temple.edu:8080/SP20_3308_tuh39709/#/home"
target="_blank"
rel="noopener noreferrer"
>
Live
</a>
<a
className="Styled-Button"
href="https://github.com/tuyenphk/Pham_web"
target="_blank"
rel="noopener noreferrer"
>
Code
</a>
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
<ModalItem
isOpen={this.getOpen(1)}
onClose={() => {
this.onCloseModal(1);
}}
>
<TextBlock title="3D Reconstruction Tool">
<Row className="no-gutters">
<Col md={7}>
<p>
3D-Reconstruction Tool is a fun, enjoyable, and
informative web application designed for
experimentation, research, and casual learning.
The application's cloud-hosted neural network
offers symmetry detection services for
2-dimensional astronomy images, and reproduces
them in a 3-dimensional format. Cloud-based
machine learning has rapidly evolved into a vital
and sophisticated aspect of modern software
development. The goal of the 3D Reconstruction
Tool aims to explore and transform these
components into an entertaining, informative
platform.
</p>
</Col>
<Col md={5}>
<figure
style={{ maxWidth: "280px", textAlign: "center" }}
>
<img
src={features}
alt="3d demo"
style={{ maxWidth: "100%", height: "auto" }}
></img>
<figcaption style={{ textAlign: "center" }}>
<i>3D Reconstruction Tool's chatbot feature</i>
</figcaption>
</figure>
</Col>
</Row>
<Row>
<Col>
<h2>
<b>
Features: Web application is built by React
Hook, instantiated Nodejs, serviced on Google
Compute Engine with some features
</b>
</h2>
<ul
style={{
paddingLeft: "1.1em",
textAlign: "left"
}}
>
<li>
There are 4 tabs: Home, Modelling, Resource,
Team to navigate.
</li>
<li>
Upload functionality & sent to Google Cloud
Storage bucket.
</li>
<li>Render button for modelling 3D model.</li>
<li>
Utilize the ‘Search’ functions to find 2D
images.
</li>
<li>
Ability to search, obtain, and display their
rendered images
</li>
</ul>
<h2>
<b>Technologies used:</b>
</h2>
<p>
React, React Hook, WebGL, Three.js, Node, Express,
Google Cloud Platform, Neraul-Network
</p>
<p>
<em>
Special thanks to my collaborators: Khai Nguyen,
Elizaveta Lizaibeme, and Lauren Kimpel from
Temple University's Class of 2020!
</em>
</p>
</Col>
</Row>
</TextBlock>
</ModalItem>
<ModalItem
isOpen={this.getOpen(2)}
onClose={() => {
this.onCloseModal(2);
}}
>
<TextBlock title="Portfolio Website">
<Row className="no-gutters">
<Col md={7}>
<p>
My personal portfolio responsive website, built
with React to showcase my projects, my photoshop
designs and let viewers get to know a little bit
more about me.
</p>
</Col>
<Col md={5}>
<figure
style={{ maxWidth: "280px", textAlign: "center" }}
>
<img
src={photo}
alt="3d demo"
style={{ maxWidth: "100%", height: "auto" }}
></img>
<figcaption style={{ textAlign: "center" }}>
<i>Portfolio's chatbot feature</i>
</figcaption>
</figure>
</Col>
</Row>
<Row>
<Col>
<h2>
<b>Features:</b>
</h2>
<ul
style={{
paddingLeft: "1.1em",
textAlign: "left"
}}
>
<li>Display the home page.</li>
<li>
Describe about myself to let employers
understand me.
</li>
<li>
More details about projects I have worked on.
</li>
<li>
Display some designs I have experienced in
Illustrator, Photoshop, and Indesign.
</li>
<li>
A contact form for employers get in touch with
me.
</li>
</ul>
<h2>
<b>Technologies used:</b>
</h2>
<p>React, Firebase-hosting, Formspree</p>
</Col>
</Row>
</TextBlock>
</ModalItem>
</div>
</TextBlock>
</Col>
</Row>
</div>
</div>
</section>
);
}
}
export default Portfolios;
Can someone spend your time to help me with this? I have really appreciated it!

Answer 1

I found my answer here
add this to index.html under public folder (for react app)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">