We Keep Coding

My addeventListener not working on click with a button

Hello i have a login page and i want to when you click the button "login" it prints a message in the console but here it doesn't detect the button "login" i put query selector and took the class
html:
const inputs=document.querySelectorAll(".input");
let submit=document.querySelector(".btn");
submit.addEventListener('click' ,()=>{
console.log("test")
})
<img src="https://i.ibb.co/XWdPc2X/wave-01.png" class="wave">
<div class="container">
<div class="img">
<img src="https://i.ibb.co/JvXP8rW/phone.png">
</div>
<div class="login-content">
<form action="index.html" class="form-login">
<img src="https://i.ibb.co/H4f3Hkv/profile.png">
<h2 class="title">Welcome</h2>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Username</h5>
<input type="text" class="input">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input">
</div>
</div>
<button id="send" class="btn btn-success mt-5">Login <i class="fa fa-long-arrow-right ml-2 mt-1"></i></button>
<!-- Forgot Password?-->
</form>
</div>
</div>

The issue is that the default type for a button is submit, so when you click the button, it attempts to redirect. Change the button's type to button to get your callback behavior.
document.querySelector(".btn").addEventListener('click' ,()=>{
console.log("test")
})
<img src="https://i.ibb.co/XWdPc2X/wave-01.png" class="wave">
<div class="container">
<div class="img">
<img src="https://i.ibb.co/JvXP8rW/phone.png">
</div>
<div class="login-content">
<form action="index.html" class="form-login">
<img src="https://i.ibb.co/H4f3Hkv/profile.png">
<h2 class="title">Welcome</h2>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Username</h5>
<input type="text" class="input">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input">
</div>
</div>
<button type="button" id="send" class="btn btn-success mt-5">Login <i class="fa fa-long-arrow-right ml-2 mt-1"></i></button>
<!-- Forgot Password?-->
</form>
</div>
</div>

Use document.getElementById selector to get element and add function onClick
const btn = document.getElementById('send');
btn.onclick = () => {
console.log('here');
// do something
}
<img src="https://i.ibb.co/XWdPc2X/wave-01.png" class="wave">
<div class="container">
<div class="img">
<img src="https://i.ibb.co/JvXP8rW/phone.png">
</div>
<div class="login-content">
<form action="index.html" class="form-login">
<img src="https://i.ibb.co/H4f3Hkv/profile.png">
<h2 class="title">Welcome</h2>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Username</h5>
<input type="text" class="input">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input">
</div>
</div>
<button id="send" class="btn btn-success mt-5">Login <i class="fa fa-long-arrow-right ml-2 mt-1"></i></button>
<!-- Forgot Password?-->
</form>
</div>
</div>

Javascript filter method for different data-filter

I just started learning javascript. I am facing a problem with filtering products while getting value from database.
my javascript code is below:
`var $grids = $(".grid").isotope({
itemSelector : '.grid-item',
layoutMode : 'fitRows'
});
$(".button-group").on("click", "button", function(){
var filterValue = $(this).attr('data-filter');
$grids.isotope({ filter: filterValue});
})
where as my php code is below:
<div id="filters" class="button-group text-end">
<button class="btn" data-filter="*">All Categories</button>
<button class="btn" data-filter=".clothes">Clothes</button>
<button class="btn" data-filter=".samsung">Phones</button>
<button class="btn" data-filter=".electronics">Electronics</button>
</div>
<div class="grid">
<?php
while($row = mysqli_fetch_array($result2)) {
?>
<div class="grid-item border border-warning " <?php echo " {$row['item_brand']}"; ?> >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src=" <?php echo " {$row['item_image']}"; ?>" alt="Calli">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<?php
}
?>
I am getting data-filter value from database column "item-brand" having the same value as mention in data-filter above. Only All categories is working perfectly. Kindly help me out in this.

Please make sure class e.g clothes, samsung are not escaped while php echo. means try
<div class="grid-item border border-warning <?php echo " {$row['item_brand']}"; ?>" >
instead of
<div class="grid-item border border-warning " <?php echo " {$row['item_brand']}"; ?> >
I have not exact php code or database so not sure but i have created demo html as below in which working fine will help you.
<div id="filters" class="button-group text-end">
<button class="btn" data-filter="*">All Categories</button>
<button class="btn" data-filter=".clothes">Clothes</button>
<button class="btn" data-filter=".samsung">Phones</button>
<button class="btn" data-filter=".electronics">Electronics</button>
</div>
<div class="grid">
<div class="grid-item border border-warning clothes" >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src="images/Hydrangeas.jpg" alt="Calli" height="100px;">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<div class="grid-item border border-warning clothes" >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src="images/Hydrangeas.jpg" alt="Calli" height="100px;">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<div class="grid-item border border-warning clothes" >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src="images/Hydrangeas.jpg" alt="Calli" height="100px;">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<div class="grid-item border border-warning samsung" >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src="images/Hydrangeas.jpg" alt="Calli" height="100px;">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js"></script>
<script type="text/javascript">
var $grids = $(".grid").isotope({
itemSelector : '.grid-item',
layoutMode : 'fitRows'
});
$(".button-group").on("click", "button", function(){
var filterValue = $(this).attr('data-filter');
$grids.isotope({ filter: filterValue});
})
</script>

using ng repeat mouseover ng show

Hi i am displaying a user list using ng repeat.
what i want is when i hover over the user buttons will appear.. and after i leave it will disappear i tried this pls ..
with this code after i hoveer it show icons for whole list
HTML
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons" ng-mouseover="showHover()" ng-mouseleave="hideHover()">
<a class="userlist" href="#" ng-click="getProfile(person)">
<div class="hoverText">
<div class="col-md-1 col-xs-1 text-medium text-center">
<img class="img-circle size-1" ng-src="{{person.profile.image_url}}" alt="">
</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.mobile_number}}</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.name+ ' ' +person.profile.lastname}}</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 0">Male</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 1">Female</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.email}}</div>
</div>
</a>
<div class="col-md-2 col-xs-2 no-padding"><button type="button" class="btn ink-reaction text-bold" ng-class="checkStatus(person.isSuspended)? 'btn-danger':'btn-success'" ng-click="person.isSuspended = suspendUser(person.uname,!person.isSuspended)">{{suspendText}}</button>
</div>
<div ng-show="hoverIcons">
<div class="messagebtn btn btn-default style-transparent btn-raised" id="message" data-toggle="modal" data-target="#formModal">
<i class="md-message"></i>
</div>
<div class="mailbtn btn btn-default style-transparent btn-raised" id="email" data-toggle="modal" data-target="#formModal">
<i class="md-email"></i>
</div>
<div class="allotbtn btn btn-default style-transparent btn-raised" id="allotforecasts" data-toggle="modal" data-target="#allotforecast">
<i class="md-add-circle-outline"></i>
</div>
</div>
js
$scope.showHover = function (){
$scope.hoverIcons = true;
}
$scope.hideHover = function (){
$scope.hoverIcons = false;
}

The issue your facing is caused by the missing of an index on your $scope.hoverIcons variable.
You should add and index to your variable name to get a boolean for each person.
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons track by $index" ng-mouseover="showHover($index)" ng-mouseleave="hideHover($index)">
<!-- more code here -->
<div ng-show="hoverIcons{{$index}}">
<!-- more code here -->
</div>
</div>
in addition you should use this index in js :
$scope.showHover = function (index){
$scope['hoverIcons' + index] = true;
}
$scope.hideHover = function (index){
$scope['hoverIcons' + index] = false;
}
I hope it may helps

You can do this as follows;
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons" ng-mouseover="showHover(person)" ng-mouseleave="hideHover(person)">
<a class="userlist" href="#" ng-click="getProfile(person)">
<div class="hoverText">
<div class="col-md-1 col-xs-1 text-medium text-center">
<img class="img-circle size-1" ng-src="{{person.profile.image_url}}" alt="">
</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.mobile_number}}</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.name+ ' ' +person.profile.lastname}}</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 0">Male</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 1">Female</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.email}}</div>
</div>
</a>
<div class="col-md-2 col-xs-2 no-padding">
<button type="button" class="btn ink-reaction text-bold" ng-class="checkStatus(person.isSuspended)? 'btn-danger':'btn-success'" ng-click="person.isSuspended = suspendUser(person.uname,!person.isSuspended)">{{suspendText}}</button>
</div>
<div ng-show="person.hoverIcons">
<div class="messagebtn btn btn-default style-transparent btn-raised" id="message" data-toggle="modal" data-target="#formModal">
<i class="md-message"></i>
</div>
<div class="mailbtn btn btn-default style-transparent btn-raised" id="email" data-toggle="modal" data-target="#formModal">
<i class="md-email"></i>
</div>
<div class="allotbtn btn btn-default style-transparent btn-raised" id="allotforecasts" data-toggle="modal" data-target="#allotforecast">
<i class="md-add-circle-outline"></i>
</div>
</div>
</div>
.
$scope.showHover = function (person) {
person.hoverIcons = true;
}
$scope.hideHover = function (person) {
person.hoverIcons = false;
}

try this if using of CSS is not an issue.
You can then remove ng-mouseover directives
<style>
.hoverText .hoverIcons {
display:none;
}
.hoverText:hover .hoverIcons {
display:block;
}
</style>
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons">
<a class="userlist" href="#" ng-click="getProfile(person)">
<div class="hoverText">
<div class="col-md-1 col-xs-1 text-medium text-center">
<img class="img-circle size-1" ng-src="{{person.profile.image_url}}" alt="">
</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.mobile_number}}</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.name+ ' ' +person.profile.lastname}}</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 0">Male</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 1">Female</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.email}}</div>
</div>
</a>
<div class="col-md-2 col-xs-2 no-padding"><button type="button" class="btn ink-reaction text-bold" ng-class="checkStatus(person.isSuspended)? 'btn-danger':'btn-success'"
ng-click="person.isSuspended = suspendUser(person.uname,!person.isSuspended)">{{suspendText}}</button>
</div>
<div class="hoverIcons">
<div class="messagebtn btn btn-default style-transparent btn-raised" id="message" data-toggle="modal" data-target="#formModal">
<i class="md-message"></i>
</div>
<div class="mailbtn btn btn-default style-transparent btn-raised" id="email" data-toggle="modal" data-target="#formModal">
<i class="md-email"></i>
</div>
<div class="allotbtn btn btn-default style-transparent btn-raised" id="allotforecasts" data-toggle="modal" data-target="#allotforecast">
<i class="md-add-circle-outline"></i>
</div>
</div>
</div>

Flask-WTF: Form never submits

I am trying to submit a form and process the results, but when I press the submit button, form.is_submitted() returns False and request.method returns "GET". Here is my form:
<form name="create" action="" role="form" class="smart-wizard form-horizontal" id="form" type="post">
{{ form.hidden_tag() }}
<div class="row">
<div class="col-sm-12">
<!-- start: FORM WIZARD PANEL -->
<div id="wizard" class="swMain">
<ul>
<li>
<a href="#step-1">
<div class="stepNumber">
1
</div>
<span class="stepDesc"> Step 1
<br />
<small>General Information</small> </span>
</a>
</li>
<li>
<a href="#step-2">
<div class="stepNumber">
2
</div>
<span class="stepDesc"> Step 2
<br />
<small>Lane(s)</small> </span>
</a>
</li>
<li>
<a href="#step-3">
<div class="stepNumber">
3
</div>
<span class="stepDesc"> Step 3
<br />
<small>Load Details</small> </span>
</a>
</li>
</ul>
<div class="progress progress-striped active progress-sm">
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress-bar progress-bar-success step-bar">
<span class="sr-only"> 0% Complete (success)</span>
</div>
</div>
<div id="step-1">
<h2 class="StepTitle">Step 1 Content</h2>
<hr>
<div class="row">
<div class="col-sm-5">
<div class="form-group">
<label class="col-sm-3 control-label">
Load Type <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.load_type(class="form-control") }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Required Trailer <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.trailer_type(class="form-control") }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Total Miles <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.total_miles(class="form-control", placeholder="Total Miles") }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Cost <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.price(class="form-control", placeholder="Price") }}
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label class="col-sm-3 control-label">
# Pieces <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.number_pieces(class="form-control", placeholder="Number of Pieces") }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Over Dimensional?
</label>
<div class="col-sm-7">
{{ form.over_dimensional() }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Comments <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.comments(class="form-control", placeholder="Number of Pieces") }}
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-10">
<div class="form-group">
<label class="col-sm-3 control-label">
Load Description
</label>
<div class="col-sm-7">
{{ form.description(class="autosize form-control", style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 69px;") }}
</div>
</div>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-7">
<button class="btn btn-blue next-step btn-block">
Next <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
<div id="step-2">
<h2 class="StepTitle">Step 2 Content</h2>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-external-link-square"></i>
Editable Table
<div class="panel-tools">
<a class="btn btn-xs btn-link panel-collapse collapses" href="#"> </a>
<a class="btn btn-xs btn-link panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> </a>
<a class="btn btn-xs btn-link panel-refresh" href="#"> <i class="fa fa-refresh"></i> </a>
<a class="btn btn-xs btn-link panel-expand" href="#"> <i class="fa fa-resize-full"></i> </a>
<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12 space20">
<button class="btn btn-green add-row">
Add New <i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover" id="sample_2">
<thead>
<tr>
<th>Stop #</th>
<th>Type</h>
<th>Street Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<!--- Table content created by table-data.js -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-3">
<button class="btn btn-light-grey back-step btn-block">
<i class="fa fa-circle-arrow-left"></i> Back
</button>
</div>
<div class="col-sm-2 col-sm-offset-3">
<button type="submit" class="btn btn-success btn-block">
Finish <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
</div>
<!-- end: FORM WIZARD PANEL -->
</div>
</div>
As a reference, here is my view which handles the form:
#loads.route('/create', methods=['GET', 'POST'])
#login_required
def create():
form = LoadForm()
flash(form.is_submitted()) #returns False
flash(request.method) # returns 'GET'
if form.validate_on_submit():
#handle form logic
return render_template('load/create2.html',
title="Create Load",
active="Loads",
form=form, user=g.user)

Add a method attribute to your form tag:
<form name="create" action="" role="form" class="smart-wizard form-horizontal" id="form" type="post" method="post">
An empty or missing #method attribute defaults to GET.

Bootstrap Product Carousel Overflow?

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 -->