Having Trouble with Bootstrap 4 JQuery Responsive Tabs? Check out the provided code snippet for a solution

So I have included a code snippet to showcase the issue. In my current code, I am using a jinga forloop to generate the cards.

Each card contains responsive tabs.

However, when you click on the tabs of card 2 to view its data, it ends up displaying the data of the first card in the tabs of the first card.

Nevertheless, the data such as the name and age is displayed correctly for card 2 since no tab clicking is required to access that information.

The main issue here is that each card's tabs should display only that specific card's data.

This problem can be resolved by making sure the href="#profile" in the nav-link class and id="profile" are different for each card.

For instance, having href="#profile" and id="profile" for card 1, and

href="#Profile" and id="Profile" for card 2.

However, due to running a for loop to create the cards dynamically, this becomes challenging to implement.

Could someone assist me?

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

@import url(https://fonts.googleapis.com/css?family=Poppins:600);
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   font-weight: 300;
}

html,
body {
    background: white;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    color: white;
    font-family: 'Poppins', sans-serif;
}

main {
    min-height: calc(100vh - 200px);
}

p {
    font-family: 'Source Sans Pro';
}

h3 {
    font-family: 'Poppins', sans-serif;
    color: black;
}

.card h1,
h2,
h3,
h4,
h5,
p {
    font-family: 'Poppins', sans-serif;
    color: white;
}

.card {
    background: linear-gradient(to bottom, orange, red);
    width: 18rem;
}

.card a {
    color: white;
}
<head>

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container-fluid padding">
      <div class="row padding">
        <div class="col-lg-12">
          <div class="padding-success">
            <div class="row mt-5 justify-content-center">


              <!-- Card Navbar -->
              <div class="card card-custom mx-2 mb-3">
                <div class="card-header">
                  <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                      <a class="nav-link active" href="#profile" data-toggle="tab">Profile</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#bio" data-toggle="tab">Bio</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#company" data-toggle="tab">Company</a>
                    </li>
                  </ul>
                </div>
  
                <!-- Card Navbar content -->
                <div class="card-body tab-content">
                  <!-- Home tab -->
                  <div class="tab-pane active" id="profile">
  
                    <div class="card-body padding-success">
                      <h3 class="marker">Jane Jones</h3>
                      <h3 class="marker">43</h3>
  
                    </div>
                  </div>
                  <!-- about tab -->
                  <div class="tab-pane" id="bio">
                    <div class="padding-all">
                      <p class="card-text">Jane Jones: Hi there</p>
                    </div>
                  </div>
                  <!-- videos tab -->
                  <div class="tab-pane" id="company">
                    <div class="padding-all">
                      <p class="card-text">Jane Jones: my dog</p>
                    </div>
                  </div>
                  <!-- end of navbar tabs -->
                </div>
              </div>
  
              <!-- Card Navbar 2 -->
              <div class="card card-custom mx-2 mb-3">
                <div class="card-header">
                  <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                      <a class="nav-link active" href="#profile" data-toggle="tab">Profile</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#bio" data-toggle="tab">Bio</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#company" data-toggle="tab">Company</a>
                    </li>
                  </ul>
                </div>
                <!-- Card Navbar content -->
                <div class="card-body tab-content">
                  <!-- Home tab -->
                  <div class="tab-pane active" id="profile">
                    <div class="card-body padding-success">
                      <h3 class="marker">Bob Jones</h3>
                      <h3 class="marker">43</h3>
                    </div>
                  </div>
                  <!-- about tab -->
                  <div class="tab-pane" id="bio">
                    <div class="padding-all">
                      <p class="card-text">Bob Jones card: Hi</p>
                    </div>
                  </div>
                  <!-- videos tab -->
                  <div class="tab-pane" id="company">
                    <div class="padding-all">
                      <p class="card-text">Bob Jones card: cheese</p>
                    </div>
                  </div>
                  <!-- end of navbar tabs -->
                </div>
              </div>
  
            </div>
          </div>
        </div>
      </div>
    </div>
  
  
    <!-- Bootstrap min.CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  
    <!-- Bootstrap 4 min.js-->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  
  
  
    <!-- Popper.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  
  
    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  
    <!-- Bootstrap 4 min.js-->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  
</body>

javascriptjqueryhtmlcssbootstrap-4

Answer №1

Avoid using the same ID for multiple elements as it is not a good practice. Each element should have a unique ID.

If you are iterating through a loop, consider using data attributes instead. Assign a custom attribute to each element in the loop (e.g., data-profile=1) and use href="[data-profile='1'] for links, incrementing the number accordingly.

Here is an example of how you can implement this:

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

@import url(https://fonts.googleapis.com/css?family=Poppins:600);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

html,
body {
  background: white;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  color: white;
  font-family: 'Poppins', sans-serif;
}

main {
  min-height: calc(100vh - 200px);
}

p {
  font-family: 'Source Sans Pro';
}

h3 {
  font-family: 'Poppins', sans-serif;
  color: black;
}

.card h1,
h2,
h3,
h4,
h5,
p {
  font-family: 'Poppins', sans-serif;
  color: white;
}

.card {
  background: linear-gradient(to bottom, orange, red);
  width: 18rem;
}

.card a {
  color: white;
}
<head>

  <!-- JQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid padding">
    <div class="row padding">
      <div class="col-lg-12">
        <div class="padding-success">
          <div class="row mt-5 justify-content-center">


            <!-- Card Navbar -->
            <div class="card card-custom mx-2 mb-3">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                  <li class="nav-item">
                    <a class="nav-link active" href="[data-profile='1']" data-toggle="tab">Profile</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="[data-bio='1']" data-toggle="tab">Bio</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="[data-company='1']" data-toggle="tab">Company</a>
                  </li>
                </ul>
              </div>

              <!-- Card Navbar content -->
              <div class="card-body tab-content">
                <!-- Home tab -->
                <div class="tab-pane active" data-profile='1'>

                  <div class="card-body padding-success">
                    <h3 class="marker">Jane Jones</h3>
                    <h3 class="marker">43</h3>

                  </div>
                </div>
                <!-- about tab -->
                <div class="tab-pane" data-bio='1'>
                  <div class="padding-all">
                    <p class="card-text">Jane Jones: Hi there</p>
                  </div>
                </div>
                <!-- videos tab -->
                <div class="tab-pane" data-company='1'>
                  <div class="padding-all">
                    <p class="card-text">Jane Jones: my dog</p>
                  </div>
                </div>
                <!-- end of navbar tabs -->
              </div>
            </div>

            <!-- Card Navbar 2 -->
            <div class="card card-custom mx-2 mb-3">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                  <li class="nav-item">
                    <a class="nav-link active" href="[data-profile='2']" data-toggle="tab">Profile</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="[data-bio='2']" data-toggle="tab">Bio</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="[data-company='2']" data-toggle="tab">Company</a>
                  </li>
                </ul>
              </div>
              <!-- Card Navbar content -->
              <div class="card-body tab-content">
                <!-- Home tab -->
                <div class="tab-pane active" data-profile='2'>
                  <div class="card-body padding-success">
                    <h3 class="marker">Bob Jones</h3>
                    <h3 class="marker">43</h3>
                  </div>
                </div>
                <!-- about tab -->
                <div class="tab-pane" data-bio='2'>
                  <div class="padding-all">
                    <p class="card-text">Bob Jones card: Hi</p>
                  </div>
                </div>
                <!-- videos tab -->
                <div class="tab-pane"data-company='2'>
                  <div class="padding-all">
                    <p class="card-text">Bob Jones card: cheese</p>
                  </div>
                </div>
                <!-- end of navbar tabs -->
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Bootstrap min.CSS-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <!-- Bootstrap 4 min.js-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



  <!-- Popper.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>


  <!-- JQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <!-- Bootstrap 4 min.js-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>

Answer №2

Assign a unique identifier to each instance.

#bio

and

#bio2


@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

@import url(https://fonts.googleapis.com/css?family=Poppins:600);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

html,
body {
  background: white;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  color: white;
  font-family: 'Poppins', sans-serif;
}

main {
  min-height: calc(100vh - 200px);
}

p {
  font-family: 'Source Sans Pro';
}

h3 {
  font-family: 'Poppins', sans-serif;
  color: black;
}

.card h1,
h2,
h3,
h4,
h5,
p {
  font-family: 'Poppins', sans-serif;
  color: white;
}

.card {
  background: linear-gradient(to bottom, orange, red);
  width: 18rem;
}

.card a {
  color: white;
}
<head>

  <!-- JQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid padding">
    <div class="row padding">
      <div class="col-lg-12">
        <div class="padding-success">
          <div class="row mt-5 justify-content-center">


            <!-- Card Navbar -->
            <div class="card card-custom mx-2 mb-3">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                  <li class="nav-item">
                    <a class="nav-link active" href="#profile" data-toggle="tab">Profile</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#bio" data-toggle="tab">Bio</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#company" data-toggle="tab">Company</a>
                  </li>
                </ul>
              </div>

              <!-- Card Navbar content -->
              <div class="card-body tab-content">
                <!-- Home tab -->
                <div class="tab-pane active" id="profile">

                  <div class="card-body padding-success">
                    <h3 class="marker">Jane Jones</h3>
                    <h3 class="marker">43</h3>

                  </div>
                </div>
                <!-- about tab -->
                <div class="tab-pane" id="bio">
                  <div class="padding-all">
                    <p class="card-text">Jane Jones: Hi there</p>
                  </div>
                </div>
                <!-- videos tab -->
                <div class="tab-pane" id="company">
                  <div class="padding-all">
                    <p class="card-text">Jane Jones: my dog</p>
                  </div>
                </div>
                <!-- end of navbar tabs -->
              </div>
            </div>

            <!-- Card Navbar 2 -->
            <div class="card card-custom mx-2 mb-3">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                  <li class="nav-item">
                    <a class="nav-link active" href="#profile2" data-toggle="tab">Profile</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#bio2" data-toggle="tab">Bio</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#company2" data-toggle="tab">Company</a>
                  </li>
                </ul>
              </div>
              <!-- Card Navbar content -->
              <div class="card-body tab-content">
                <!-- Home tab -->
                <div class="tab-pane active" id="profile2">
                  <div class="card-body padding-success">
                    <h3 class="marker">Bob Jones</h3>
                    <h3 class="marker">43</h3>
                  </div>
                </div>
                <!-- about tab -->
                <div class="tab-pane" id="bio2">
                  <div class="padding-all">
                    <p class="card-text">Bob Jones card: Hi</p>
                  </div>
                </div>
                <!-- videos tab -->
                <div class="tab-pane" id="company2">
                  <div class="padding-all">
                    <p class="card-text">Bob Jones card: cheese</p>
                  </div>
                </div>
                <!-- end of navbar tabs -->
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Bootstrap min.CSS-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <!-- Bootstrap 4 min.js-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



  <!-- Popper.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>


  <!-- JQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <!-- Bootstrap 4 min.js-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>

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

Adding information to a MySQL database using JavaScript and invoking a PHP script

I'm currently facing an issue with my code that involves calling a .php file to insert data into a MySQL database. However, I am unable to get the .php file to run successfully. Can anyone provide some suggestions? As someone who is new to scripting, ...

javascriptphpmysql

Using the Express router: Error occurred - Router.use() function expected a middleware function but received an Object instead

After searching through numerous questions on SO, I still haven't found a solution to my issue. routes/authentication/index.js import { Router } from 'express' const router = Router(); router.get('/', (_req, _res) => console. ...

javascriptnode.jsexpressexpress-router

Obtain the row that was clicked in a Datatables.net grid once the modal has been

I am currently utilizing Datatables.net to showcase a table of payment transactions. Within each row, the final column is where you will find an Edit button. <button type="button" class="btn btn-link" data-toggle="modal" data-target="#modalCategoryTyp ...

jquerydatatablesbootstrap-modal

Quantify the baseline memory consumption of the next.js application

We have encountered a memory usage issue in our next.js application that needs to be resolved. To determine the default memory usage of an express.js RESTapi when no users are present, we can follow these steps: Firstly, run the server app via pm2 and ch ...

javascriptnode.jsreactjsnext.jspm2

CSS Grid generates a unique container for every HTML element

My website's CSS code includes the following: *{ height: 100%; width: 100%; margin: 0; } .grid{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .grid div:nth-child(odd){ border: black 2px so ...

htmlcssvue.jscss-grid

Error with Flask url_for when trying to play a video

I'm currently developing a Flask website and working on analyzing and displaying a video on the webpage. However, when I tried to input the direct path to the video source, it only displayed a black screen. I searched on Google, which suggested using ...

pythonhtmlflask

My changes to the HTML file are not being reflected in the browser, even after clearing the cache. This is happening in an Angular and Node.js application

I'm currently developing an application using Angular and Node.js. I've noticed that when I make changes to the HTML file, the browser isn't updating even after clearing the cache. Could this be a coding issue? Any suggestions on how to fix ...

javascriptangularjsnode.js

What is the process for adding borders to a react-leaflet map and validating markers within the map?

Here is the code snippet I am working on: import React, { useState, useEffect, useRef } from 'react'; import restaurantsInfo from "./RestaurantsList.json"; import "./App.css"; import { MapContainer, Marker, Popup, TileLayer, u ...

javascriptreactjsleafletreact-leaflet

I am facing an issue where cookies are not being saved in the browser when calling from the client side using Axios. However, it works perfectly fine when calling from the server side. I am unsure of

Clarification of the issue When I run it from the server side, i.e., http://localhost:3001, the cookie is saved in my browser without any issues. However, when I call it from the client side using const result = await Axios({ method: "post", url: "http:// ...

phphtmlnode.jsreactjsapi

A React child error has occurred in Next.js due to invalid objects being used

Within my project, I have integrated the latest version of next.js and encountered an issue where objects are not valid as a React.js child. https://i.stack.imgur.com/MCO7z.png The problem arises after importing the Head component from Next.js and implem ...

javascriptreactjsnext.js

Modifying the color of the active column

In an attempt to remove the color from the column border following a click on the image, I am struggling to locate the specific code segment that needs adjustment. I have scrolled through the entire code and experimented with color changes without succes ...

htmlcss

The width of the column is not the same

Despite setting both columns to equal widths using col-sm-6 in Bootstrap, the column widths are not actually equal. One appears smaller while the other is larger. If you have a solution to this issue that works on both mobile and laptop devices, please s ...

htmlcssbootstrap-4

encounter an error while attempting to interpret json

I'm currently encountering an issue while attempting to parse a JSON file. Instead of the expected value, I keep getting undefined. Specifically, I only want to retrieve the value associated with the key level1. [{ "id": 2, "name": "Peter", "pr ...

javascriptjson

The app is not showing the Post Request message after it has been sent from the UI front end

I am currently developing a chat application using node.js, express.js, socket.io, and mongodb. However, I have encountered an issue during the Node.js and express.js implementation (socket.io and mongodb are not yet utilized). The problem is that the code ...

jquerynode.jsexpresspost

Facing issues with React JS and Material UI? If you're encountering problems where 'this.props' is

After running the code provided below, I anticipated that the styles would be injected within props. However, I consistently encounter undefined props. No props are being supplied to this component. const customStyles = theme => ({ root: { & ...

javascriptreactjsmaterial-ui

Overlay a translucent navbar above a jumbotron using Bootstrap

I'm interested in creating a landing page design with a large jumbotron at the top and a transparent navbar overlaid on it, similar to the layout on this website: https://stripe.com/en-gb-dk. The jumbotron will simply have a colored background, withou ...

csstwitter-bootstrapbootstrap-4

Tips for reducing text in a card design

As a newcomer to codeigniter 4, I recently created an event card with a lengthy description. However, when I attempted to display the event data from the database on the card, it ended up becoming elongated due to the length of the description: https://i. ...

phpcsscodeigniterbootstrap-5card

Implementing image max-width and maintaining aspect ratios for responsiveness

Within the code snippet below and utilizing Bootstrap, a grid layout is defined with several .block components, each comprising an image and a title. The images are designed to be larger than the column size so that they can expand to full width for respon ...

javascriptjqueryhtmlcssimage

I have successfully stored an array in session storage and was able to retrieve it. While I am able to access the data, I am unable to duplicate the array

let data=[ { "id":1, "name":"Dashboard", "status":0 }, { "id":2, "name":"Facility", "status":0 }] The above code snippet shows the original data. Next, I am storing this data using session storage as shown below--- $window.sessionStorage.setItem("userIte ...

javascriptangularjssession-storage

Having trouble with looping the CSS background using JavaScript in CodePen

Can someone help me with looping through CSS background images? Why is the background not changing in this code example: http://codepen.io/anon/pen/dGKYaJ const bg = $('.background').css('background-image'); let currentBackground = 0; ...

javascriptcssloops