I'm receiving this error every time I scroll towards my counter up function -> "Uncaught TypeError: Cannot read property 'shift' of null at f (jquery.counterup.js:62)". Any idea how to fix it ?
Here's the code:
$('.counter').counterUp({
delay: 10,
time: 2000
});
$('.counter').addClass('animated fadeInDownBig');
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/solid.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
I have upgraded the version of counterUp and no problem: instead version 1.0.0, use the 2.1.0.
<script src="https://unpkg.com/jquery.counterup#2.1.0/jquery.counterup.js"></script>
$('.counter').counterUp({
delay: 10,
time: 2000
});
$('.counter').addClass('animated fadeInDownBig');
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/solid.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://unpkg.com/jquery.counterup#2.1.0/jquery.counterup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
Related
i want to append my products to an owl-carousel from javascript but when i append it displays my owl-carousel like this:
While owl-carousel should be:
So my HTML code is:
<div class="container mt-5 mb-5" data-aos-anchor-placement="top-center">
<div class="owl-carousel">
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
</div>
</div>
My Javacsript code:
sectionCarouselProducts.innerHTML = sectionCarouselProducts.innerHTML + `
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="${product.img}" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
${product.title}
</h4>
</div>
</div>
</div>
`
Btw, i append my inner html to this html:
<div class="container mt-5 mb-5" data-aos-anchor-placement="top-center">
<div class="owl-carousel carousel-products">
</div>
</div>
So in conclusion why my owl carousel when i append it displays vertical and not carousel? Thank you for your help! For further information you can tell me to edit it!
var slider = tns({
container: '.my-slider',
items: 1,
responsive: {
640: {
edgePadding: 20,
gutter: 20,
items: 2
},
700: {
gutter: 30
},
900: {
items: 3
}
}
});
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container mt-5 mb-5" data-aos-anchor-placement="top-center">
<div class="my-slider">
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
Here is an example with your setup ... Hope it helps...
I have a list where i'm using position that is working only inside the div, It should be working outside also. When i remove overflow auto its working fine. How to fix this issue?
.customize-table {
background: #ccc;
}
.customize-table .thead {
position: sticky;
top: 0;
}
.customize-table .row {
margin: 0px;
position: relative;
}
.trade-box-3-1 .customize-table .tbody .row:hover {
background: rgba(0, 0, 0, 0.2);
}
.customize-table-tooltip {
position: absolute;
top: 0px;
left: -25px;
z-index: 100;
padding: 3px;
background: rgba(0, 0, 0, .8);
color: #fff;
padding: 0.4em 1em;
border-radius: 0.4em;
}
.customize-table .tbody {
height: 285px;
overflow: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container p-5">
<div class="customize-table">
<div class="thead">
<div class="row">
<div class="col-md-5 text-light-purple text-left">Pair <img src="images/icon-down.svg" alt=""></div>
<div class="col-md text-light-purple text-left">Price</div>
<div class="col-md text-light-purple text-right">Change</div>
</div>
</div>
<div class="tbody">
<div class="row">
<div class="customize-table-tooltip">tooltip</div>
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="customize-table-tooltip">tooltip</div>
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
demo made from my earlier comment (this is an average trick , it doesn't make absolute element to show outside a scrolling container).
to keep your tooltip inside the scrolling container area , you may add :
padding-left:28px; to thead and tbody to keep both aligned. a gradient can be used to draw the color background, so it starts at 25/28px from the left .
.customize-table {
background: linear-gradient(to right,transparent 28px, #ccc 28px);
margin-left:-28px;
}
.customize-table .thead {
position: sticky;
top: 0;
padding-left:28px;
}
.customize-table .row {
margin: 0px;
position: relative;
}
.trade-box-3-1 .customize-table .tbody .row:hover {
background: rgba(0, 0, 0, 0.2);
}
.customize-table-tooltip {
position: absolute;
top: 0px;
left: -25px;
z-index: 100;
padding: 3px;
background: rgba(0, 0, 0, .8);
color: #fff;
padding: 0.4em 1em;
border-radius: 0.4em;
}
.customize-table .tbody {
height: 285px;
overflow: auto;
padding-left:28px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container p-5">
<div class="customize-table">
<div class="thead">
<div class="row">
<div class="col-md-5 text-light-purple text-left">Pair <img src="images/icon-down.svg" alt=""></div>
<div class="col-md text-light-purple text-left">Price</div>
<div class="col-md text-light-purple text-right">Change</div>
</div>
</div>
<div class="tbody">
<div class="row">
<div class="customize-table-tooltip">tooltip</div>
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="customize-table-tooltip">tooltip</div>
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="text-white text-left"><i class="fa fa-star mr-2"></i>ETH/USDT</div>
</div>
<div class="col-md">
<div class="text-white text-left">0.00000848</div>
</div>
<div class="col-md">
<div class="text-red text-right">-4.01%</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have 3 cards in my blade.php which looks like this:
<div class="container-fluid cfluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A1</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A2</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A3</span>
<small>time here </small>
</div>
</div>
</div>
</div>
</div>
What I need to get is the text inside the span. Here's my code for the each function:
$("#cfluid").each(function(){
var title = $(".roomT").text();
console.log(title);
});
Howevrer I got this as a result which I know is wrong:
A1A2A3
In which it should be like this:
A1
A2
A3
You can use classes (card-body and roomT) as part of the selector. Then simply use this object to refer the current element to get the text:
$("#cfluid .card-body .roomT").each(function(){
var title = $(this).text();
console.log(title);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid cfluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A1</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A2</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A3</span>
<small>time here </small>
</div>
</div>
</div>
</div>
</div>
if you are using #cfuild as parent .You should loop the .roomT.And if you need a array result better use Jquery.map instead of each
var res = $("#cfluid").find('.roomT').map(function(){
return $(this).text();
}).get();
console.log(res)
var res = $("#cfluid").find('.roomT').map(function() {
return $(this).text();
}).get();
console.log(res)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid cfluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A1</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A2</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A3</span>
<small>time here </small>
</div>
</div>
</div>
</div>
</div>
You can directly locate the .roomT element and loop as below
$('#cfluid .roomT').each((index, element) => {
console.log($(element).text())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A1</span>
<small>time here </small>
</div>
</div>
</div>
<div class="container-fluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A2</span>
<small>time here </small>
</div>
</div>
</div>
</div>
I have this HTML code.
document.getElementById("HostsBar").setAttribute("data-to", "120");
<div class="container-fluid">
<div class="block-header">
<h2>SECURITY DASHBOARD</h2>
</div>
<div id="burayaset">
<!-- Widgets -->
<div class="row clearfix">
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="info-box-4">
<div class="icon">
<i class="material-icons col-blue">remove_from_queue</i>
</div>
<div class="content">
<div class="text">HOSTS</div>
<div id="HostsBar" class="number count-to" data-from="0" data-to="125" data-speed="15" data-fresh-interval="20"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="info-box-4">
<div class="icon">
<i class="material-icons col-blue-grey">storage</i>
</div>
<div class="content">
<div class="text">PRODUCTS</div>
<div class="number count-to" data-from="0" data-to="257" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="info-box-4">
<div class="icon">
<i class="material-icons col-cyan">warning</i>
</div>
<div class="content">
<div class="text">VULNERABILITIES</div>
<div class="number count-to" data-from="0" data-to="1225" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
</div>
</div>
I want to change count-to value with data that come from backend. How can I do that in Javascript. I tried But it not worked.
its updating :
alert(document.getElementById("HostsBar").getAttribute('data-to'));
document.getElementById("HostsBar").setAttribute("data-to", "120");
alert(document.getElementById("HostsBar").getAttribute('data-to'));
<div class="container-fluid">
<div class="block-header">
<h2>SECURITY DASHBOARD</h2>
</div>
<div id="burayaset">
<!-- Widgets -->
<div class="row clearfix">
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="info-box-4">
<div class="icon">
<i class="material-icons col-blue">remove_from_queue</i>
</div>
<div class="content">
<div class="text">HOSTS</div>
<div id="HostsBar" class="number count-to" data-from="0" data-to="125" data-speed="15" data-fresh-interval="20"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="info-box-4">
<div class="icon">
<i class="material-icons col-blue-grey">storage</i>
</div>
<div class="content">
<div class="text">PRODUCTS</div>
<div class="number count-to" data-from="0" data-to="257" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="info-box-4">
<div class="icon">
<i class="material-icons col-cyan">warning</i>
</div>
<div class="content">
<div class="text">VULNERABILITIES</div>
<div class="number count-to" data-from="0" data-to="1225" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
</div>
</div>
I solved the issue. Its a library and it can only change by its function.
$("#HostsBar").countTo({from:0, to:response});
I am having trouble with my Bootstrap Product Carousel. I have come across a issue where the last item gets pushed down in my carousel. example here http://codepen.io/riwakawebsitedesigns/pen/Kibrk/?editors=111 http://codepen.io/riwakawebsitedesigns/full/Kibrk/
I would like it to be able to slide line no matter how many items I have.
Also on mobile view just to display one item and slides to next item.
<div class="container" id="masterhead">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs">
<div class="column-left">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div><!-- /. Column-left -->
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="content">
<div class="module-heading">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 pull-left">
<div class="module-title">
<h3>Featured Products</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 ">
<div class="controls hidden-xs text-right">
<a class="left fa fa-chevron-left btn btn-default" href="#carousel-example" data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-default" href="#carousel-example" data-slide="next"></a>
</div><!-- /. Controls -->
</div>
</div>
</div><!-- /. Module-Heading -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product Example</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Next Sample Product</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Grouped Product</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /. Content -->
</div><!-- /. Content Columns -->
</div>
</div><!-- /. Container -->
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
.module-heading {
font-size: 16px;
text-transform: uppercase;
font-family: "Lucida Grande","Lucida Sans Unicode",Calibri,sans-serif;
font-weight: 700;
margin-top: 0;
padding-bottom: 5px;
border-bottom: 1px solid #CCCCCC;
margin-bottom: 10px;
}
.module-title {
background: #CCCCCC;
}
.module-title h3 {
margin: 0;
padding: 0;
}
.controls {
background: #DFDFDF;
margin: 0;
padding: 0;
}
.col-item {
border: 1px solid #E1E1E1;
border-radius: 5px;
background: #FFF;
}
.col-item .photo img {
}
.col-item .info {
padding: 10px;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
.col-item:hover .info {
background-color: #F5F5DC;
}
.col-item .price {
float: left;
margin-top: 5px;
}
.col-item .price h5 {
line-height: 20px;
margin: 0;
}
.price-text-color {
color: #219FD1;
}
.col-item .info .rating {
color: #777;
}
.col-item .rating {
float: left;
font-size: 17px;
text-align: right;
line-height: 52px;
margin-bottom: 10px;
height: 52px;
}
.col-item .separator {
border-top: 1px solid #E1E1E1;
}
.col-item .separator p {
line-height: 20px;
margin-bottom: 0;
margin-top: 10px;
text-align: center;
}
.col-item .separator p i {
margin-right: 5px;
}
.col-item .btn-add {
width: 50%;
float: left;
}
.col-item .btn-add {
border-right: 1px solid #E1E1E1;
}
.col-item .btn-details {
width: 50%;
float: left;
padding-left: 10px;
}
It depends on the number of elements in the . So you have to modify your script to add only three items in this tag.
Try with this code :
<div class="container" id="masterhead">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs">
<div class="column-left">
<ul class="list-group">
<li class="list-group-item"><div class="list-heading"><h4>Categories</h4></div></li>
<li class="list-group-item">Computer Packages</li>
<li class="list-group-item">Hard Drives</li>
<li class="list-group-item">Software</li>
<li class="list-group-item">Video Cards</li>
<li class="list-group-item">Sound Cards</li>
</ul>
</div><!-- /. Column-left -->
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="content">
<div class="module-heading">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 pull-left">
<div class="module-title">
<h3>Featured Products</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 ">
<div class="controls hidden-xs text-right">
<a class="left fa fa-chevron-left btn btn-default" href="#carousel-example" data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-default" href="#carousel-example" data-slide="next"></a>
</div><!-- /. Controls -->
</div>
</div>
</div><!-- /. Module-Heading -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product Example</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Next Sample Product</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Grouped Product</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /. Content -->
</div><!-- /. Content Columns -->
</div>
</div><!-- /. Container -->