Bootstrap sliders stagnant and unresponsive

I am encountering an issue with my bootstrap carousel slide. I have configured the buttons and set it to slide automatically, but for some reason, the carousel is not moving when I click on the buttons. I can't figure out what mistake I might be making. I made adjustments to the entire script and everything seems fine except in the testimonials section...

Below is a snippet of my code;

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <title>Tindog</title>
    
        <!-- Google Fonts -->
    
        <link
          href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;900&family=Ubuntu:wght@300;400;700&display=swap"
          rel="stylesheet"
        />
    
        <!-- Bootstrap CSS -->
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f0fdedf7f0f7f1e2d3b7ade5add1ddccdc6be4afebf">[email protected]</a>/dist/css/bootstrap.min.css"
          integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
          crossorigin="anonymous"
        />
    
        <!-- CSS StyleSheets -->
    
        <link rel="stylesheet" href="css/styles.css" />
    
        <!-- Font Awesome Icons -->
    
        <script
          src="https://kit.fontawesome.com/40d4d3ba0c.js"
          crossorigin="anonymous"
        ></script...

htmlcssbootstrap-4

Answer №1

Make sure you haven't forgotten to include Bootstrap's CSS and JS files.

Option 1

To load our CSS, simply copy-paste the stylesheet <link> into your <head> before any other stylesheets.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

To enable JavaScript functionalities, add the following <script>s towards the end of your pages, right before the closing </body> tag. Ensure that jQuery is loaded first, followed by Popper, and then our JavaScript plugins.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
Option 2

Utilize the starter template provided:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
    
  </body>
</html>
Option 3

If needed, download Bootstrap for the compiled CSS and JavaScript from here.

Refer to the source here.

Answer №2

Upon adding the references to bootstrap.min.js and bootstrap.min.css in the project, I noticed that it automatically and manually adjusts:

<!DOCTYPE html>
<html lang="en>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge>
    <meta name="viewport" content="width=device-width, initial-scale=1.0>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5e455a4558">[email protected]</a>/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffffe4e3e4e2f1e0d0a5bea1bea3">[email protected]</a>/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous>
    </script>
    <title>Document</title>
</head>

<body>
    <section id="testimonials">
        <div id="carouselControls" class="carousel slide" data-bs-ride="carousel>
            <div class="carousel-inner>
                <div class="carousel-item active" style="margin-top: 50px;">
                    <h2>
                        I no longer have to sniff other dogs for love. I've found the
                        hottest Corgi on TinDog. Woof.
                    </h2>
                    <img class="testimonial-img"  src="https://via.placeholder.com/1400x300.png" alt="dog-profile" />
                    <em>Pebbles, New York</em>
                </div>
                <div class="carousel-item" style="margin-top: 50px;">
                    <h2 class="testimonial-text">
                        My dog used to be so lonely, but with the Tindog's help, He has
                        found the love of his life. I think
                    </h2>
                    <img src="https://via.placeholder.com/1400x300.png" alt="lady-profile" class="testimonial-img" />
                    <em>Beverly, Illinois</em>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselControls"
                data-bs-slide="prev>
                <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselControls"
                data-bs-slide="next>
                <span class="carousel-control-next-icon"></span>
            </button>
        </div>
    </section>
</body>

</html>

Answer №3

Thanks for your help, I was able to solve the issue by adjusting the version. Perhaps it would be more efficient to provide a starter pack template for Bootstrap instead of adding individual codes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5b4859691c0718071a">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <!-- Google Fonts -->

    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;900&family=Ubuntu:wght@300;400;700&display=swap"
      rel="stylesheet"
    />

    <!-- CSS StyleSheets -->

    <link rel="stylesheet" href="css/styles.css" />

    <!-- Font Awesome Icons -->

    <script
      src="https://kit.fontawesome.com/40d4d3ba0c.js"
      crossorigin="anonymous"
    ></script>

    <title>Tindog</title>
  </head>
  <body>
    [Content removed for brevity]
  </body>
</html>

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

Resizing Your WordPress Header Logo

Hi there! I am struggling to resize the logo in the header of my website www.cookingvinyls.com. Despite my efforts, I can't seem to override the hardcoded version. I attempted to modify the width and height lines in header.php, but unfortunately, it ...

htmlcsswordpresswordpress-themingimage-resizing

Why does jQuery not work when attempting to access the HTML of paragraphs within the main content using $('#main-content').children('p'

Hello, I'm still getting the hang of jQuery and Stack Overflow. I'm having trouble understanding the differences between DOM elements. My goal is to update the innerHTML of the <p> element, but I'm encountering some unexpected behavior ...

javascriptjqueryhtml

Issue with Chrome's webkit causing images to display incorrectly in slideshow

After researching the issue with webkit browsers and images, I came across a problem that I haven't been able to find a solution for yet. I developed a slideshow using jQuery that arranges images in a row and uses a mask element (with overflow: hidde ...

javascriptcssgoogle-chromeslideshow

Tips for concealing boostrap spinners

Within the main component, I have an @Input() alkatreszList$!: Observable<any[]>; that gets passed into the child component input as @Input() item: any; using the item object: <div class="container-fluid"> <div class="row ...

cssangulartypescriptbootstrap-5

Using jQuery .css({}) is not causing negative margin to function as expected

$('#thankYouMessage').css({"height": textHeight, "margin-top:": "-52px", "padding-left": "19px"}); The CSS property 'padding-left:' will be applied as expected, but the negative margin will not take effect. The 'margin-top:' ...

javascriptjquerycss

How can we make Internet Explorer 11 mimic Internet Explorer 9 in HTML?

How can I ensure that Internet Explorer 11 uses CSS styles from IE9 in my HTML? I have tried the following code: <script runat="server"> private void Page_PreRender(object sender, EventArgs e) { var meta = new HtmlMeta() ...

htmlcssinternet-explorer

Exploring the capabilities of querying HTML using XPath with Python's lxml library

After reading an HTML page as a string, I am using tree = html.fromstring(data). Now, I aim to utilize lxml xpath for querying. Here is an example of the specific part that piques my interest: <table class="class"> <tbody> <tr> &l ...

pythonhtmlxmlxpathlxml

Reorganizing dynamic Bootstrap 4 grid structure

Imagine a scenario where you have a webpage with four main blocks, each containing different amounts of content: <div>1</div> <div>2</div> <div>3</div> <div>4</div> When the browser width is narrow, these b ...

bootstrap-4

What is the best way to position items of varying heights in alignment?

Can someone help me with this issue? I have a grid with 12 columns, each containing 2 identical icons and 2 texts of different heights. I need to align the icons in the center and make sure the texts are at the same height, but I'm having trouble achi ...

htmlcssbootstrap-5

Using the `type=file` input in Internet Explorer 11

Encountering an issue with the input type file on IE11. In IE11, the input field is displayed as two tab-able pseudo elements (text/button). Tried using the class ::-ms-browse to hide the button with display: none, but it remains tab-able. To replicate: ...

javascriptjqueryhtmlcssinternet-explorer-11

Adding multiple text as label and sublabel in a React MUI Tooltip can be achieved by utilizing the appropriate

I'm struggling to incorporate a MaterialUI Tooltip into my React application with two separate text lines. The first line should serve as the main title, while the second line functions as a sublabel. In this screenshot provided, you can see where I ...

javascriptcssreactjs

Can a 1D array be utilized to create a 2D grid in React?

I needed to display a one-dimensional array in a 2D grid format with 3 rows and 3 columns. The array itself contains numbers from 1 to 9. const array = Array.from({ length: 9 }, (_, i) => i + 1); In my React component, I have it rendering as a series o ...

javascripthtmlcssreactjs

Personalizing the pop-up window using window.open

When clicking a hyperlink on a page, I need to open multiple pop-up windows. To achieve this, I must use the Window.open function instead of showModalDialog. However, I have noticed that the appearance is not satisfactory when using Window.open. (Essentia ...

javascriptcss

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

javascripthtmlcssfirebasevue.js

Implementing a NextJS button using the Link component

I am curious about how to incorporate a button inside a NextJS Link component. Usually, when you wrap the button in a Link and click on it, the onClick event is triggered and then it redirects to the value specified in the href attribute. Is there a way t ...

htmlreactjsnext.js

Can multiple links be hrefed at the same time?

On my website, I have a particular anchor tag that links to another page: <li><a class="dropdown-item" href="/<%= term._id %>"><%= term.term %></a></li> Now, I am looking to add an additional href li ...

htmlejsanchorbootstrap-5

The ng-model remains unchanged when the <select> element is modified using JavaScript

I am currently working on creating a customized dropdown box with the help of JavaScript and anglersJS to connect the data with the select element. The user interaction involves clicking on a div element that is styled to act as the dropdown option. This d ...

javascripthtmlangularjs

How to achieve inter-column padding in Bootstrap 4 while eliminating the need for side margins

I'm currently working with Bootstrap 4.1 and I have a grid layout consisting of cells (Box A-E) with some space between them. The issue I'm facing is that when I apply padding to each column, it also adds padding to the left and right sides, caus ...

csstwitter-bootstrapbootstrap-4

Is it possible to utilize both Tailwind CSS and Bootstrap 4 simultaneously?

I am working on a project with Vuejs that utilizes BootstrapVue components, which appears to be using Bootstrap 4 css. However, I want to incorporate Tailwind css for new custom components. Can both libraries be used simultaneously in the project? Thank ...

vue.jsbootstrap-4vue-componenttailwind-css

Customize the order of elements in Bootstrap for mobile devices

How can I create a responsive Bootstrap layout with 2 columns and a nested row in the right column? The desired layout is as follows: Desktop Version: --------- | 2 || 1 | | || | | |------- | || 3 | | || | | ...

csstwitter-bootstrapbootstrap-4