JQuery: start slideToggle() as hidden

JQuery: start slideToggle() as hidden - javascript

I created this:
$(document).ready(function(){
var speed = 500;
$('.brewed').click(function(){
$('.ifBrewed').slideToggle(speed);
});
});
html, body {
background-color: black;
color: white;
}
input[type=checkbox] {
display:none;
}
.step_1, .step_2, .step_3 {
padding: 2%;
margin: 0 auto;
font-weight: 100;
}
input[type=checkbox]:checked + label {
border: 3px solid white;
}
.ifBrewed {
background-color: #181818;
padding: 2%;
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!-- Step 1 -->
<div class="row">
<h2>How do you enjoy your coffee?</h2>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
<div>
<input type="checkbox" name="site" id="so" />
<label for="so">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Espresso</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
<div>
<input type="checkbox" name="site" id="sf" />
<label for="sf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Brewed</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
</div>
<!-- Step 1.5 -->
<div class="ifBrewed">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="ba" />
<label for="ba">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Drip coffee</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bb" />
<label for="bb">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Aeropress</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bc" />
<label for="bc">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>French press</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bd" />
<label for="bd">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Vacuum pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="be" />
<label for="be">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Syphon</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bf" />
<label for="bf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>V60</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bg" />
<label for="bg">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Chemex</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bh" />
<label for="bh">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Moka pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 3 -->
<div class="row">
<div class="col-lg-3 col-md-3"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bi" />
<label for="bi">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Percolato</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bj" />
<label for="bj">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Eva solo</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
</div>
</div>
I did like other threads said, Add the display:none feature, and I did try on both CSS and JQuery .css().
It's going well, but I need help with this little bug.
As you can see, when you click the Slide toggle input it toggles then toggles back, but I want it to stay without toggling off until I click it again.
How do I do that?
Thank you!

I think this has something to do with the label. When you click on the .brewed div the labels click event is also being triggered. I think this is making jquery think that 2 click events have occurred.
I have just added e.preventDefault() which prevents any default element click behavior from occurring. I did notice that even without my added code the checkboxes are not being checked on click. This is because they have display none set. Having display none on the checkboxes will also mean they will not be posted if they are part of a form submission. I am not sure if that is in issue for you.
$(document).ready(function(){
var speed = 500;
$('.brewed').click(function(e){
e.preventDefault();
$('.ifBrewed').slideToggle(speed);
});
});
html,
body {
background-color: black;
color: white;
}
input[type=checkbox] {
display: none;
}
.step_1,
.step_2,
.step_3 {
padding: 2%;
margin: 0 auto;
font-weight: 100;
}
input[type=checkbox]:checked+label {
border: 3px solid white;
}
.ifBrewed {
background-color: #181818;
padding: 2%;
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!-- Step 1 -->
<div class="row">
<h2>How do you enjoy your coffee?</h2>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
<div>
<input type="checkbox" name="site" id="so" />
<label for="so">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Espresso</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
<div>
<input type="checkbox" name="site" id="sf" />
<label for="sf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Brewed</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
</div>
<!-- Step 1.5 -->
<div class="ifBrewed">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="ba" />
<label for="ba">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Drip coffee</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bb" />
<label for="bb">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Aeropress</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bc" />
<label for="bc">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>French press</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bd" />
<label for="bd">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Vacuum pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="be" />
<label for="be">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Syphon</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bf" />
<label for="bf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>V60</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bg" />
<label for="bg">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Chemex</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bh" />
<label for="bh">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Moka pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 3 -->
<div class="row">
<div class="col-lg-3 col-md-3"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bi" />
<label for="bi">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Percolato</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bj" />
<label for="bj">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Eva solo</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
</div>
</div>

The click event is triggering twice because you've assigned a click event handler on .brewed and that's in an input/label. You need to either re-think the event you want to toggle .ifBrewed or you can just assign another click handler to that label and disable the default action.
$(document).ready(function() {
var speed = 500;
$('label[for="sf"]').on('click',function(e) {
e.preventDefault();
})
$('.brewed').on('click',function(e) {
$(".ifBrewed").slideToggle(speed);
})
});
html,
body {
background-color: black;
color: white;
}
input[type=checkbox] {
display: none;
}
.step_1,
.step_2,
.step_3 {
padding: 2%;
margin: 0 auto;
font-weight: 100;
}
input[type=checkbox]:checked+label {
border: 3px solid white;
}
.ifBrewed {
background-color: #181818;
padding: 2%;
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!-- Step 1 -->
<div class="row">
<h2>How do you enjoy your coffee?</h2>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
<div>
<input type="checkbox" name="site" id="so" />
<label for="so">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Espresso</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
<div>
<input type="checkbox" name="site" id="sf" />
<label for="sf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Brewed</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
</div>
<!-- Step 1.5 -->
<div class="ifBrewed">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="ba" />
<label for="ba">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Drip coffee</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bb" />
<label for="bb">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Aeropress</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bc" />
<label for="bc">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>French press</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bd" />
<label for="bd">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Vacuum pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="be" />
<label for="be">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Syphon</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bf" />
<label for="bf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>V60</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bg" />
<label for="bg">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Chemex</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bh" />
<label for="bh">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Moka pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 3 -->
<div class="row">
<div class="col-lg-3 col-md-3"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bi" />
<label for="bi">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Percolato</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bj" />
<label for="bj">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Eva solo</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
</div>
</div>

Related

Select all checkboxes by group in laravel 8

I want to make select all but divided by group, all I can do is select all checkboxes, not by group
here's is my blade:
<div class="col-md-6 ">
<div class="row mb-3 ">
<div class="col-md-6">
<b>Group 1</b>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="selectall_group1" type="checkbox" class="custom-control-input" onchange="checkAll(this)"/>
<label for="selectall_group1" class="custom-control-label">
Select All
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>content 1</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content10" name="permission_id[]" type="checkbox" class="custom-control-input"/>
<label for="content10" class="custom-control-label mr-auto"></label>
</div>
</div>
<div class="col-md-6">
<p>content 1</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content11" name="permission_id[]" type="checkbox" class="custom-control-input"/>
<label for="content11" class="custom-control-label mr-auto"></label>
</div>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="row mb-3 ">
<div class="col-md-6">
<b>Group 2</b>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="selectall_group2" type="checkbox" class="custom-control-input" onchange="checkAll(this)"/>
<label for="selectall_group2" class="custom-control-label">
Select All
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>content 2</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content12" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content12" class="custom-control-label mr-auto"></label>
</div>
</div>
<div class="col-md-6">
<p>content 2</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content13" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content13" class="custom-control-label mr-auto"></label>
</div>
</div>
</div>
</div>
I already add select all but it's select all checkboxes, I don't know if I should fix the loop so I can get id from the permission. I just stuck on this.
here's the javascript that I use for the select
<script>
function checkAll(ele) {
var checkboxes = document.getElementsByTagName('input');
if (ele.checked) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox' && !(checkboxes[i].disabled)) {
checkboxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
}
</script>
fiddle here:
https://jsfiddle.net/rs2g9ct3/

This works with your HTML if you add a class to the wrapper div - I chose groupContainer
I delegate from document - if you have a closer static container, use that instead
document.addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.type && tgt.type==="checkbox" && tgt.id.startsWith("selectall")) {
const checked = tgt.checked;
const parent = tgt.closest(".groupContainer");
const checks = parent.querySelectorAll("input[type=checkbox][id^=content]");
[...checks].forEach(chk => {
if (!chk.disabled) chk.checked = checked;
})
}
})
<div class="col-md-6 groupContainer">
<div class="row mb-3 ">
<div class="col-md-6">
<b>Group 1</b>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="selectall_group1" type="checkbox" class="custom-control-input" />
<label for="selectall_group1" class="custom-control-label">Select All</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>content 1</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content10" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content10" class="custom-control-label mr-auto"></label>
</div>
</div>
<div class="col-md-6">
<p>content 1</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content11" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content11" class="custom-control-label mr-auto"></label>
</div>
</div>
</div>
</div>
<div class="col-md-6 groupContainer">
<div class="row mb-3 ">
<div class="col-md-6">
<b>Group 2</b>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="selectall_group2" type="checkbox" class="custom-control-input" />
<label for="selectall_group2" class="custom-control-label">
Select All
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>content 2</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content12" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content12" class="custom-control-label mr-auto"></label>
</div>
</div>
<div class="col-md-6">
<p>content 2</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content13" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content13" class="custom-control-label mr-auto"></label>
</div>
</div>
</div>
</div>

Bootstrap image with checkbox

I've got a little problem, I'm trying to have a simple image which you can click on and it will be checked or unchecked.
I found some bootstrap code online and tried it out on my project. Sadly, the code doesn't seem to work like it's suppose to on my localhost.
HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
<h3>Bootstrap image checkbox(multiple)</h3>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="image[]" value="" />
<i class="fa fa-check hidden"></i>
</label>
</div>
</div>
CSS:
.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.image-checkbox input[type="checkbox"] {
display: none;
}
.image-checkbox-checked {
border-color: #4783B0;
}
.image-checkbox .fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.image-checkbox-checked .fa {
display: block !important;
}
JavaScript:
$(".image-checkbox").each(function () {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
}
else {
$(this).removeClass('image-checkbox-checked');
}
});
// sync the state to the input
$(".image-checkbox").on("click", function (e) {
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked",!$checkbox.prop("checked"))
e.preventDefault();
});
How it is suppose to look: codepen
My results: results
As you can see the checkbox isn't working and the positions are off.
I'm a beginner and I apologize for any confusion given.
Is there something that I'm doing wrong?

Please try this whole example, from your example it seems like that you haven't added some necessary css and jquery
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style class="cp-pen-styles">.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.image-checkbox input[type="checkbox"] {
display: none;
}
.image-checkbox-checked {
border-color: #4783B0;
}
.image-checkbox .fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.image-checkbox-checked .fa {
display: block !important;
}</style></head><body>
<!--
Image Checkbox Bootstrap template for multiple image selection
https://www.prepbootstrap.com/bootstrap-template/image-checkbox
-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
<h3>Bootstrap image checkbox(multiple)</h3>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
<input name="image[]" value="" type="checkbox">
<i class="fa fa-check hidden"></i>
</label>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>// image gallery
// init the state from the input
$(".image-checkbox").each(function () {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
} else {
$(this).removeClass('image-checkbox-checked');
}
});
// sync the state to the input
$(".image-checkbox").on("click", function (e) {
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked", !$checkbox.prop("checked"))
e.preventDefault();
});
//# sourceURL=pen.js
</script>
</body>
</html>

Code:
<div class="col-md-3">
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="input1">
<label class="custom-control-label" for="input1">
<img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
<span >Custom Message</span>
</label>
</div>
</div>
<div class="col-md-3">
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="input12">
<label class="custom-control-label" for="input12">
<img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
<span >Custom Message</span>
</label>
</div>
</div>
<div class="col-md-3">
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="input13">
<label class="custom-control-label" for="ck1a">
<img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
<span >Custom Message</span>
</label>
</div>
</div>
<div class="col-md-3">
<div class="custom-control custom-checkbox image-checkbox">
<input type="checkbox" class="custom-control-input" id="input13">
<label class="custom-control-label" for="ck1a">
<img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
<span >Custom Message</span>
</label>
</div>
</div>
Result would be similar to this:
Original copied: https://iqbalfn.github.io/bootstrap-image-checkbox/

How to add a loop for set of div classes?

These are the set of divs where i want to add the loop on some count.
I have tried jquery and javascript but doesn't work. Please help out.
It takes a count from checkbox and the count is values selected in checkbox the following set of divs need be populated dynamically. I have written a jquery that gets the count as well as the checkbox values.As and when user selects these boxes the set of divs need to be appear as the number of counts.
function arrayValues(item, index)
{
var cd = $("input[name=car_damage]:checked");
var eg = cd.map(function () {return this.value;}).get().join(",");
var temp = new Array();
temp = eg.split(",");
text="";
alert(temp);
//alert(eg);
var ef = cd.size();
alert(ef);
}
Checkbox code:
<hr>
<div class="car_map" id="carmap">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">
<div class="item">
Front
<input type="checkbox" name="car_damage" value="Front" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Front Wing Left
<input type="checkbox" name="car_damage" value="Front Wing Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Front Wing Right
<input type="checkbox" name="car_damage" value="Front Wing Right"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">
<div class="item">
Bonnet
<input type="checkbox" name="car_damage" value="Bonnet"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Windscreen
<input type="checkbox" name="car_damage" value="Windscreen"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-5 col-sm-4">
<div class="item">
Front Door Left
<input type="checkbox" name="car_damage" value="Front Door Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Front Door Right
<input type="checkbox" name="car_damage" value="Front Door Right"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Roof
<input type="checkbox" name="car_damage" value="Roof"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Back Door Left
<input type="checkbox" name="car_damage" value="Back Door Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Back Door Right
<input type="checkbox" name="car_damage" value="Back Door Right"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Rear Windscreen
<input type="checkbox" name="car_damage" value="Rear Windscreen"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Rear Left
<input type="checkbox" name="car_damage" value="Rear Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Rear Right
<input type="checkbox" name="car_damage" value="Rear Right"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Rear
<input type="checkbox" name="car_damage" value="Rear"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-custom btn-sm btn-decline center-block" data-scroll="step3">Back</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-custom btn-sm btn-decline center-block">Save For Later</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-sm btn-custom center-block" data-scroll="step5" id="add_trip" onclick="arrayValues()">Continue</div>
</div>
</div>
</div>
<hr>
<div class="col-xs-12 col-sm-6">
<div class="form-label">
Rear
</div>
<div class="photo-picker" id="photo-picker">
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="box photos">
<div class="row">
<div class="col-xs-12">
<h4>Photo Instructions</h4>
</div>
</div>
<div class="photo-sample" id="photo-sample">
<div class="row">
<div class="col-xs-12">
<div class="form-sublabel">
Stand approx. 2m back from the Rear of the vehicle.</div>
<imgsrc="/hfiprojectstorefront/_ui/desktop/common/hfiproject/images/placeholder-photo.png" class="img-responsive center-block" alt="" />
</div>
</div>
</div>
<div class="photo-real" id="photo-real">
<div class="row">
<div class="col-xs-12">
<div class="cont">
<video id="v" class="img-responsive center-block"></video>
<div class="player-buttons" id="take" style="display:none;"></div>
</div>
<canvas id="canvas" style="display:none;"></canvas>
<img src="" id="photo" class="img-responsive center-block" />
</div>
<div class="col-xs-12">
<div class="form-label">
Was this photo taken at the scene?
</div>
</div>
<div class="col-xs-12">
<div class="list-group segmented-control">
<span class="list-group-item half active">
YES
<input type="radio" name="scene_photo" value="YES" checked="checked"/>
</span>
<span class="list-group-item half ">
NO
<input type="radio" name="scene_photo" value="NO"/>
</span>
</div>
</div>
<div class="col-xs-12">
<div class="form-label">
Optional Comment
</div>
</div>
<div class="col-xs-12">
<textarea class="form-control" name="optional" id="optional"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
Delete
</div>
<div class="col-xs-12 col-sm-6">
Save
</div>
</div>
</div>
</div>
</div>
<hr>

It is not clear the solution you are seeking.
However requiring the least amount of work would be creating a function to execute on change and jquery to manipulate your DOM elements not a great solution though if you require state management.
I believe a better solution would be use reactjs where use can create components and utilise jsx.
Or AngularJS frameworks where you can do an ng-repeat or custom directive that takes inputs to display your divs.

It's really not clear what you are trying to populate, but you can generate any DOM element dynamically like this.
fnCreateDOMElement = function(el, num, context) {
var e = document.createElement(el);
for(var i=0; i<num; i++){
document.context.appendChild(e);
}
}
above snippet could be utilized like this.
document.getElementById("populator").addEventListener('change', function(){
//reset contents of container if needed. comment if not needed
document.getElementById('container').innerHTML = "";
var times = this.value;
for(var i=0; i<times; i++) {
var mydiv = document.createElement('div');
var myparag = document.createElement('p');
mydiv.setAttribute('class', 'foo');
myparag.setAttribute('class', 'fooized');
var txt = document.createTextNode('Foo #'+(i+1));
myparag.appendChild(txt);
mydiv.appendChild(myparag);
document.getElementById('container').appendChild(mydiv);
}
});
<div id="container">
</div>
<input type="number" min="0" placeholder="how many?" id="populator">
above functions can be refactored with javascript's default/optional arguments.

how to center align a group of radio buttons under the center of the quiz title and keep responsive?

here is the code to reproduce the issue in bootstrap3.
what I want is to align the radio buttons below the center of the quiz title, while keeping text align left.
current title is inline flow by default bs3 sample form structure.
i'm thinking if using
position absolute; or display:block/inline-block; margin-left:auto; margin-right:auto; display:flex; methods etc. might break the responsive flow. any suggestions how you balance responsive and align nicely ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="">
<input type="radio" name="Q2[score]" value="1" required="required">Agree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]"" class="">
<input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="answered">
<input type="radio" name="Q2[score]" value="3" required="required">Disagree
</label>
</div>
</div>
</div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
</div>
</div>
</div><!--end of container-fluid-->
</div>
</body>
I received some suggestions among below answers for making it appear like center aligned in bootstrap3, however I also found some pitfalls using the above method , listed in below picture I roughly made.
Both the Answer text in radio label and the Quiz Title text length are Variable, so this is the tricky part in this case to make it center aligned while keep responsive using css.

Add Some CSS
.radio{display:inline-block;}
Add Class radio parent div to col-xs-12 with text-center

Have you tried changing the class "col-xs-12" to "col-xs-8 col-xs-offset-4" to center it?

You can achieve this by wrapping all your radio button divs inside a parent div. And then placing this div accordingly to the device using offset.
<div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
//.. all your radio buttons div's inside this
<div>
Below is the working snippet. Have a check.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
</div>
<div class="form-group">
<input type="hidden" name="Q2[cat]" value="Conscientiousness">
</div>
<div class="form-group">
<input type="hidden" name="Q2[POST_ID]" value="88">
</div>
<div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="">
<input type="radio" name="Q2[score]" value="1" required="required">Agree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]"" class="">
<input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="answered">
<input type="radio" name="Q2[score]" value="3" required="required">Disagree
</label>
</div>
</div>
</div>
</div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
</div>
</div>
</div>
<!--end of container-fluid-->
</div>
</body>

Bootstrap columns of rows with same height - or same space between each row

I wish bootstrap had a build in feature where it would assign wrapper div of any item with height based on the height of largest div.
In this fiddle example you will notice that i have video-item-wrapper of different height which breaks the design, I can assign min-height but then i have to write css for different screen size (& still it will break at some point)
Can i with jquery get the max- height of div and assign that to all video-item-wrapper dive so that all divs will be of same height and will not break design also
<div class="container">
<div class="rows v-wrapper">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff&text=>"/>
</div>
</div>
<div class="video-details-wrapper"> <span>this is video short video title</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fffplacehold" />
</div>
</div>
<div class="video-details-wrapper"> <span>this is long video title this is long video title this is long video title</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff" />
</div>
</div>
<div class="video-details-wrapper"> <span>this is very very long video title this is very very long video title this is very very long video title</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff" />
</div>
</div>
<div class="video-details-wrapper"> <span>this is video title</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff" />
</div>
</div>
<div class="video-details-wrapper"> <span>this is video title</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff" />
</div>
</div>
<div class="video-details-wrapper"> <span>this is video title this is video title this is video title this is video title</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff" />
</div>
</div>
<div class="video-details-wrapper"> <span>this is video title</span>
</div>
</div>
</div>
</div>
</div>

Here my solution which works fine and without any hasle..
https://fiddle.jshell.net/w75vaho2/30/show/
Solution based on comment made by jme11 user
CSS
.play-item {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.v-wrapper {
max-width:1000px;
margin:0 auto;
}
.video-item-wrapper
{
border-bottom:30px solid green;
}
.video-image-wrapper {
position:relative;
width:100%;
}
.video-image-wrapper .img-responsive {
width:auto;
position:relative;
z-index:1;
}
.video-image-wrapper .play-item {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
z-index:2;
}
/* add a little bottom space under the images */
#media (max-width: 767px) {
.portfolio>.clear:nth-child(2n)::before {
content: '';
display: table;
clear: both;
}
}
#media (min-width: 768px) and (max-width: 989px) {
.portfolio>.clear:nth-child(4n)::before {
content: '';
display: table;
clear: both;
}
}
#media (min-width: 990px) and (max-width: 1199px) {
.portfolio>.clear:nth-child(6n)::before {
content: '';
display: table;
clear: both;
}
}
#media (min-width: 1200px) {
.portfolio>.clear:nth-child(8n)::before {
content: '';
display: table;
clear: both;
}
}
HTML
<div class="container">
<div class="row v-wrapper portfolio">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is video short video title</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is long video title this is long video title this is long video title</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is very very long video title this is very very long video title this is very very long video title</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is video title</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is video title</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is video title this is video title this is video title this is video title</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<img src="http://placehold.it/50.png/09f/fff&text=>" class="play-item" />
</div>
<div class="video-details-wrapper"> <span>this is video title</span>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
Using jQuery (based on this)
I noticed that this approach has a flaw for example suppose first largest div height is 400px then it apply across all divs in all row event if they don't have more than 1 line of title adds necessary space to other rows which only have small title,
Fiddle example
var row=$('.portfolio');
$.each(row, function() {
var maxh=0;
$.each($(this).find('div[class^="col-"]'), function() {
if($(this).height() > maxh)
maxh=$(this).height();
});
$.each($(this).find('div[class^="col-"]'), function() {
$(this).height(maxh);
});
});

We Keep Coding

JavaScript is the programming language of the Web.

JQuery: start slideToggle() as hidden - javascript

Related

Select all checkboxes by group in laravel 8

Bootstrap image with checkbox

How to add a loop for set of div classes?

how to center align a group of radio buttons under the center of the quiz title and keep responsive?

Bootstrap columns of rows with same height - or same space between each row

Categories

Resources