I tried to import Bootstrap into my project, but it seems to be malfunctioning

Is there a way to display cards in a slider format? I want the carousel to show the next card on each click.

I tried importing Bootstrap into my project but it doesn't seem to be functioning as expected.

Here's the link to the tutorial I am using for creating cards and sliders: tutorial

You can view the entire code here

Sdata.jsx

const Sdata =[
    {
        imgsrc: work2,
        title: "Android Application",
        href: "https://mybestdjangoblog.herokuapp.com/",
    },
    {
        imgsrc: work3,
        title: "Android Application",
        href: "https://mybestdjangoblog.herokuapp.com/",
    }
   
];

Card.jsx

function Card(props){
    return(
        <>
            <img className="card-img-top"
                src={props.imgsrc} alt="" />
            <div className="card-body">
                <h4 className="card-title">{props.title}</h4>
                <p className="card-text">Some quick example text to build on the card title and make up the bulk of the
                    card's content.</p>
                <a href={props.href} className="btn btn-primary" target="_blank">View Project</a>
            </div>
        </>
    );
};

Work.jsx

const Work =() =>{
    return(
      <>
        <div id="multi-item-example" className="carousel slide carousel-multi-item" data-ride="carousel">
          <div className="controls-top">
            <a className="btn-floating" href="#multi-item-example" data-slide="prev"><i className="fas fa-chevron-left"></i></a>
            <a className="btn-floating" href="#multi-item-example" data-slide="next"><i
                className="fas fa-chevron-right"></i></a>
          </div>

          <ol className="carousel-indicators">
            <li data-target="#multi-item-example" data-slide-to="0" className="active"></li>
            <li data-target="#multi-item-example" data-slide-to="1"></li>
          </ol>
          
          <div className="carousel-inner" role="listbox">
            <div className="carousel-item active">
              <div className="col-md-3" style={{ float: "left"}}>
                <div className="card mb-2">
                  <img className="card-img-top"
                  src={work1} alt="" />
                  <div className="card-body">
                  <h4 className="card-title">Android Application</h4>
                  <p className="card-text">Some quick example text to build on the card title and make up the bulk of the
                      card's content.</p>
                  <a href="https://mybestdjangoblog.herokuapp.com/" className="btn btn-primary" target="_blank">View Project</a>
                </div>
                <div className="carousel-item">
                  <div className="col-md-3" style={{float:"left"}}>
                    <div className="card mb-2">
                      {Sdata.map((val, ind) => {
                          return(
                            <Card key={ind} imgsrc={val.imgsrc} title={val.title} href={val.href}/>
                          )})}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>        
      </div>         
      </>

Answer №1

npm install

installs all the modules that are specified as dependencies in the package.json file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting a const value (true or false) based on the size of the window - a step-by-step guide

While studying, I encountered a challenge: In the code below, I need to dynamically set useState(false) based on the screen size. If the screen is larger than 947px, for instance, it should automatically be changed to true. The issue arises because sett ...

What is the best way to automatically close a modal window after pressing the submit button

Having some trouble with my modal window using pure CSS. Can't seem to get it to disappear after clicking the submit button. Any suggestions on how to hide it properly? Here is the code snippet of both the HTML and CSS for reference. Open to all ideas ...

Tips for including a permanent button at the bottom of a material ui dialog box

I want to implement a dialog popup in my react js application. When the user clicks on a button, the dialog should open up. Inside the dialog, there is a form with input fields. After the user fills out all the inputs, they can submit the information by cl ...

What causes certain content to be inaccessible when using Safari?

When I visit this page using Safari or my iPhone, the list of social network members does not appear. Can anyone explain why this might be happening? I am unable to figure out the reason behind this issue. Thank you in advance for your help! ...

Utilizing Axios to Extract Data from a Specific Row in a React MUI Data-Grid Table

In an attempt to implement the functionality of returning all data from a selected row using this example, I encountered an issue. Unlike the demo, which uses the useDemoData mod for table population, my approach involves utilizing Axios to fetch data from ...

What's the Hold-Up with IntersectionObserver in Brackets?

As a novice in the world of web development, I have been utilizing Brackets as my main tool. Recently, I've encountered a few hurdles specifically related to javascript. One issue I'm facing is trying to implement lazy loading on a div containing ...

I am encountering difficulties importing the React-hexgrid library

Although I have verified that the library path is correct, I am still encountering an error. Here is the code snippet: "react-hexgrid": "2.0.1", "react": "18.2.0" "next": "13.4.3" Click here to v ...

Certain HTML elements on the webpage are not functioning properly when attempting to incorporate a div tag

One of the challenges I'm currently facing is that the links for HOME and ABOUT ME in the header section are not accessible when the 'data' div is added. Strangely, the DOWNLOAD and CONTACT ME links still work fine. This issue seems to be oc ...

Adjusting body styles in a NextJS application using localStorage prior to hydration: A step-by-step guide

If you visit the React website and toggle the theme, your choice will be saved in localStorage. Upon refreshing the page, the theme remains persistent. In my NextJS project, I am attempting to achieve a similar outcome by applying styles to the body eleme ...

Tips for adjusting the height of MUI Date Picker to fit your preferences

<Box sx={{ m: 1 }}> <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker label="Enter Date" slotProps={{ textField: { height: "10px" } }} ...

Currently focused on designing a dynamic sidebar generation feature and actively working towards resolving the issue of 'Every child in a list must have a distinct "key" prop'

Issue Found Alert: It seems that each child within a list needs a unique "key" prop. Please review the render method of SubmenuComponent. Refer to https://reactjs.org/link/warning-keys for further details. at SubmenuComponent (webpack-internal:///./src/c ...

State pertains to a collection of elements rather than specific individuals

My concept involves 10 buttons: clicking on one button triggers recognition and changes the button's color, which reverts back to its original state when recognition ends. The issue arises when clicking a button causes all buttons to change color, an ...

Utilizing the :after pseudo-element for placing text in a specific location

Here's the code I'm working with: div#myImg{ background: url('myimage.png') left top no-repeat; } div#myImg:after{ content: 'TEXT UNDER IMAGE'; margin:0 auto; vertical-align:text-b ...

Full-screen and auto-cropping capabilities are featured in the Bootstrap 4 carousel design

Is there a way to make full-width images in the bootstrap 4 carousel cropped based on position: center, background: cover to prevent scrolling issues? I attempted to follow advice from this webpage but encountered stretching and scroll-bar problems with d ...

Is there a way to show textboxes stacked on top of each other without causing them to

Here is the HTML snippet I am working with: <div> <p><label>Faculty <input type="text" class = "f"></label></p> <p><label >Department<input type="text" class = "f"></label></p> ...

Error encountered in WebGrease.dll following the upgrade to Bootstrap 5 for MVC

Recently, I encountered an issue where updating to Bootstrap v5.0.2 caused a NullReferenceException in WebGrease.dll, while previous versions (v3 and v4) worked without any problems. Here is the code snippet from the shared layout: @Scripts.Render("~ ...

Retrieve the properties from within a closure function in a functional component

I have developed a simple React application using create-react-app. The app consists of a single component that takes in a value and an onClick callback. When the callback is triggered, the value increments. import React, { useState } from 'react&apos ...

The CSS transition for a DIV on an iOS Safari browser is experiencing a lag

In an attempt to optimize CSS transitions in the IOS Safari browser, I decided to use the transform: translate() property instead of changing the left property like other suggestions. Unfortunately, this approach did not yield the expected results as the ...

Activate GTM data layer variable upon certain historical changes

In my react project, I have been utilizing the react-gtm-module to implement Google Tag Manager. Previously, I was triggering the dataLayer variable when needed using the code snippet below: window.dataLayer = window.dataLayer || [] window.dataL ...

Tips for integrating a vertical menu with button icons and subcategories

Currently working on a project with Twitter Bootstrap and looking to create a specific sidebar setup. My goal is to include subcategories using an accordion and a collapsible menu for mobile devices. I came across a similar implementation at http://jsfiddl ...