So, i'm working on Image Gallery with Bootstrap...
Problem is i can't make four images two on top, three under the top ones and on the left corner vertical image. You can see in the image i have four images placed okay but vertical one is under them...
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
<img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
</div>
</div>
What should i try? here is the image
You may imbricate class and elements ;
possible example
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<img src="http://dummyimage.com/300x600" class="col-4">
<div class="row wrap col-8">
<img src="http://dummyimage.com/300x330" class="mb-auto col-6">
<img src="http://dummyimage.com/300x330" class="mb-auto col-6">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
</div>
</div>
</div>
Here is a suggestion
.col {
margin: 5px;
height: 200px;
}
.col-4 {
margin: 5px 0px;
}
.col-4,
.col {
background-image: url(https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img-3.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-8">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<div class="col-4"></div>
</div>
Related
I m just hided the section 3 which contains #sec3 id. I m trying to do that whenever i going to live search if searchable content is in section 3 it will be shown or visible. Please anybody suggest me or help me to make that content visible. I m just posted only the #sec2 and #sec3 css not the hold css because it crosses the writing limit. So please help me. Thanks in Advance....
here is the html
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-brand" onclick="w3_open()"><i class="fas fa-bars"></i></div>
<div class="nav navbar-nav navbar-right">
<input type="text" class="live-search-box" placeholder="Search...">
</div>
<div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer; display:none" id="myOverlay"></div>
<center>
<div>
<img src="logo/mask.png">
<h1>My Website</h1>
</div>
</center>
</div>
</nav>
<div class="w3-sidebar w3-bar-block w3-border-right w3-animate-left" style="display:none;" id="mySidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large">Close ×</button>
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
</div>
<div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer; display:none" id="myOverlay"></div>
<!-- Page Content -->
<section id="sec2">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Doe" style="width:100%">
<h4>John Doe</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Steve John" style="width:100%">
<h4>Steve John</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Cenna" style="width:100%">
<h4>John Cenna</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark William" style="width:100%">
<h4>Mark William</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="William Wordssmith" style="width:100%">
<h4>William Wordssmith</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jason Wathson" style="width:100%">
<h4>Jason Wathson</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jimmy Coogan" style="width:100%">
<h4>Jimmy Coogan</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail animated slideInRight">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark Zuckerberg" style="width:100%">
<h4>Mark Zuckerberg</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="sec3">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Hrithik Roshan" style="width:100%">
<h4>Hrithik Roshan</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Salman Khan" style="width:100%">
<h4>Salman Khan</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Shahid Kapoor" style="width:100%">
<h4>Shahid Kapoor</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Dibendu Mondal" style="width:100%">
<h4>Dibendu Mondal</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Sudip Barik" style="width:100%">
<h4>Sudip Barik</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Masum Abdulla" style="width:100%">
<h4>Masum Abdulla</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card thumbnail">
<img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Debabrata Maji" style="width:100%">
<h4>Debabrata Maji</h4>
</div>
</div>
</div>
</div>
</div>
</section>
Css
#sec2{
position: relative;
width: 100%;
top: 80px;
display: block;
}
#sec3{
position: relative;
width: 100%;
top: 80px;
display: none;
}
Jquery
jQuery(document).ready(function($) {
$('.live-search-box').on('keyup', function() {
var searchTerm = $(this).val().toLowerCase();
$('.myImg').each(function(idx, item) {
var alt = $(item).attr("alt").toLowerCase();
if (alt.indexOf(searchTerm) >= 0 ||searchTerm.length < 1) {
$(item).parent().parent().show();
} else {
$(item).parent().parent().hide();
}
});
});
});
Try this on your js:
jQuery(document).ready(function($) {
$('.live-search-box').on('keyup', function() {
var searchTerm = $(this).val().toLowerCase();
$('.myImg').each(function(idx, item) {
var alt = $(item).attr("alt").toLowerCase();
if (alt.indexOf(searchTerm) >= 0 ||searchTerm.length < 1) {
$(item).parentsUntil('#sec3').parent().find('#sec3').hide();
$(item).parent().parent().show();
} else {
$(item).parentsUntil('#sec3').parent().find('#sec3').show();
$(item).parent().parent().hide();
}
});
});
});
I have got a bootstrap grid with dynamically generated images.
If the last element is alone in the row it should be centered.
And if there are two elements in row, the second element should float right.
This is what I want:
Two elements in row:
A B D
E F G
H I
One element in row:
A B D
E F G
H
HTML Code:
<div class="row">
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
</div>
This is what I get:
Two elements in row:
A B D
E F G
H I
One element in row:
A B D
E F G
H
I tried it with :last-child:nth-child(odd) and :last-child:nth-child(even), but in the first row the first element is odd, in the second row the first element is even, in the third row the first element is odd again and so on.
Notice that the content size variates.
You can use a mixture of nth-child and last-child:
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col-md-6 {
width: 33.3333%;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
}
.col-md-6:last-child:nth-child(3n+2) {
/* push second child to right if last child */
margin-left: auto;
border-color: red;
}
.col-md-6:last-child:nth-child(3n+1) {
/* push first child to middle if last child */
margin: auto;
border-color: red;
}
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
<div class="col-md-6">
3
</div>
<div class="col-md-6">
4
</div>
<div class="col-md-6">
5
</div>
<div class="col-md-6">
6
</div>
<div class="col-md-6">
7
</div>
<div class="col-md-6">
8
</div>
</div><br>
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
<div class="col-md-6">
3
</div>
<div class="col-md-6">
4
</div>
<div class="col-md-6">
5
</div>
<div class="col-md-6">
6
</div>
<div class="col-md-6">
7
</div>
</div>
If you need this to work with bootstrap 3, rather than 4, then you can just use
.col-md-4:last-child:nth-child(3n+2),
.col-md-4:last-child:nth-child(3n+1){
/* push second child to right if last child */
margin-left: 33.333333%;
border: 1px solid red;
}
Example bootply
You can do it using flex.
var numberOfFlexItmes = $('.flex').children('div').length;
if((numberOfFlexItmes%2) == 0){
$('.flex').css('justify-content','space-between');
}
else{
$('.flex').css('justify-content','space-around');
}
.flex{
width: 300px;
flex:1;
display: flex;
flex-wrap: wrap;
}
.flex-item{
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='flex'>
<div class='flex-item'>
A
</div>
<div class='flex-item'>
B
</div>
<div class='flex-item'>
C
</div>
<div class='flex-item'>
D
</div>
<div class='flex-item'>
E
</div>
<div class='flex-item'>
F
</div>
<div class='flex-item'>
G
</div>
<div class='flex-item'>
H
</div>
</div>
What you can do, is work out if it's got a remaining 2 or 1 when dynamically generating it and use the col-x-push-x to push it that many columns
Fiddle with two Remaining Image
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4 col-md-push-4">
<img src="https://via.placeholder.com/50x50" />
</div>
</div>
</div>
Fiddle with One Remaining Image
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4 col-md-push-4">
<img src="https://via.placeholder.com/50x50" />
</div>
</div>
</div>
You could approach the layout you want using flexbox.
Add justify-content: center to the row. This will center an item if it is in a row by itself.
Also target the second last item in a row. Set margin-right to auto. In a row with only two items, this will align the last item to the right.
Example:
body {
margin: 0;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col {
width: 33.3333%;
}
.col:nth-last-child(2) {
margin-right: auto;
}
img {
width: 100%;
height: auto;
display: block;
}
<div class="row">
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
</div>
<br><br>
<div class="row">
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
</div>
I have here a user profile. I have the html and css code perfect the way I want it.
But what I need now is to combine my html and css together. But I am not sure how to. Because without the css it changes the display of the user profile.
Could someone help me please?
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs
</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar </h4>
</span>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital ">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Last Name:</div>
<div class="col-sm-
7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-
sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-
sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-
7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-
7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
</div>
</div>
All You Need To Do Is Rap It In <style> ADD CODE HERE </style>
Just wrap the CSS in <style> tags.
Example
<style> /* Note the opening style tag */
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border:2px solid #03b1ce;
}
.tital {
font-size:16px;
font-weight:500;
}
.bot-border {
border-bottom:1px #f8f8f8 solid;
margin:5px 0 5px 0;
}
</style> /* When you're done with the CSS, close the style tag. */
You can keep it exactly where you already have it in your HTML. Here is the exact code you'd use:
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center">
<img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar</h4>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital">Last Name:</div>
<div class="col-sm-7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
</script>
</div>
<style>
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
input.hidden {
position: absolute;
left: -9999px;
}
#profile-image1 {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px solid #03b1ce;
}
.tital {
font-size: 16px;
font-weight: 500;
}
.bot-border {
border-bottom: 1px #f8f8f8 solid;
margin: 5px 0 5px 0
}
</style>
<script>
$(function() {
$('#profile-image1').on('click', function() {
$('#profile-image-upload').click();
});
});
</script>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs
</h2>
<div class="col-md-7 ">
<div class="panel panel-default">
<div class="panel-heading">
<h4>User Profile</h4>
</div>
<div class="panel-body">
<div class="box box-info">
<div class="box-body">
<div class="col-sm-6">
<div align="center"> <img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
<input id="profile-image-upload" class="hidden" type="file">
<div style="color:#999;">click here to change profile image</div>
<!--Upload Image Js And Css-->
</div>
<br>
<!-- /input-group -->
</div>
<div class="col-sm-6">
<h4 style="color:#00b1b1;">Prasad Shankar Huddedar </h4>
</span>
<span><p>Aspirant</p></span>
</div>
<div class="clearfix"></div>
<hr style="margin:5px 0 5px 0;">
<div class="col-sm-5 col-xs-6 tital ">First Name:</div>
<div class="col-sm-7
col-xs-6 ">Prasad</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Middle Name:</div>
<div class="col-sm-
7"> Shankar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Last Name:</div>
<div class="col-sm-
7"> Huddedar</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Joining:</div>
<div class="col-sm-7">15 Jun 2016</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Date Of Birth:</div>
<div class="col-
sm-7">11 Jun 1998</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Place Of Birth:</div>
<div class="col-
sm-7">Shirdi</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Nationality:</div>
<div class="col-sm-
7">Indian</div>
<div class="clearfix"></div>
<div class="bot-border"></div>
<div class="col-sm-5 col-xs-6 tital ">Relition:</div>
<div class="col-sm-
7">Hindu</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
</div>
</div>
Put your css code in <style></style> tag and js in <script></script> tag. That's it
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);
});
});
I created a grid with col-md-7 on the left and col-md-5 on the right.
And I put images to the col-md-5, which are responsive and in col-md-12 width - full width
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7">LEFT SIDE</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://jsfiddle.net/r8rFc/298/
It works great without any problems.
However, I use a menu called Zozo UI tabs.
When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other.
Thus, it just show the last IMG
I would add the whole code to here but unfortunately it has a lot of dependencies.
Please check from here.
xxx
<!-- Overview -->
<div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
<div class="z-content-inner">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
LEFT
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Need a way to get that images on the top of each other rather than overlapping.
You have
.productgroup img {
position: absolute;
}
it seems to be the reason of your problem.