I need the following Layout:
+-----------+-----------+
| | |
| Div A | |
| | |
| | |
+-----------+ Div C |
| | |
| Div B | |
| | |
| | |
+-----------+-----------+
The boxes should be responsive and contain images (one for each box).
I am using bootstrap 3 and found a possible solution, unfortunately the heights depend also on the image size. I can't use tables and the layout has to be responsive, so a fixed height is no solution. I searched trough stackoverflow but I could not find a solution.
One approach is this (which is working well in the fiddle, except the images:
var colHeight = $(".slider").height();
var colHeight2 = colHeight - 30;
$('.child').css('min-height', colHeight2 / 2);
.slider {
background: #555;
}
.image1 {
margin-bottom: 30px;
background: #555;
}
.image2 {
background: #555;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 slider">
<img src="http://placehold.it/700x600" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12 image1 child">
<img src="http://placehold.it/400x300" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-12 image2 child" style="overflow: hidden;">
<img src="http://placehold.it/400x300" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
And I`ve created a fiddle here:
JsFiddle
You could check display:flex. I would do the below:
<div class="outer-container">
<div class="inner-container item">
<div>
<img src="" style="height:300px"/>
</div>
<div>
<img src="" style="height:200px"/>
</div>
</div>
<div class="item">
<img src="" />
</div>
</div>
.outer-container {
width: 50%;
margin: 0 auto;
}
.outer-container, .inner-container {
display: flex;
}
.inner-container {
flex-direction: column;
}
div {
border: 1px solid;
}
try this code in your jsfiddle
<div class="container">
<div class="col-xs-6 col-sm-6 col-md-6" >
<div class="col-md-8">
<img src="http://placehold.it/400x300" class="img-responsive">
</div>
<div class="col-md-5">
<img src="http://placehold.it/400x300" class="img-responsive">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6" >
<img src="http://placehold.it/700x600" class="img-responsive">
</div>
</div>
You could assign
display:flex;
To all the child div's in the row class.
example here http://codepen.io/tom-maton/pen/Ywdzeo
<div class="row">
<div class="col-sm-6">
<div class="row">
<img src="http://placehold.it/400x300" class="img-responsive"/>
</div>
<div class="row">
<img src="http://placehold.it/400x300" class="img-responsive"/>
</div>
</div>
<div class="col-sm-6">
<img src="http://placehold.it/400x300" style="height:600px" />
</div>
</div>
Related
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>
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>
This is what I currently have:
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Title</h2>
<hr class="small">
<div class="row">
<div class="col-md-6" id="logo">
<div class="portfolio-item">
<img class="img-portfolio img-responsive" src="logo.jpg">
</div>
</div>
<div class="col-md-5" id="description">
<div class="portfolio-item">
Text
</div>
</div>
</div>
I want to be able to center the image inside the column on the left, but I'm not exactly sure how. I've tried to follow this one here but it didn't work properly.
How to vertically align an image inside div
Try this:
http://codepen.io/tiagofabre/pen/LNagaB
Also there is a realy cool article about flex in this link:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Title</h2>
<hr class="small">
<div class="container-fluid col-md-6 vertical-center">
<div class="col-sm-12 bg-green">
<img class="img-responsive center-block" src="http://placeimg.com/100/100/animals" />
</div>
</div>
<div class="container-fluid col-md-6 vertical-center">
<div class="col-sm-12 bg-green">
<div class="portfolio-item">Text</div>
</div>
</div>
</div>
into parent div, add this class:
col-lg-6 col-lg-push-6
like this:
<div class="col-lg-6 col-lg-push-6" id="logo">
<div class="portfolio-item">
<img class="img-portfolio img-responsive" src="logo.jpg">
</div>
</div>
You can set portfolio-item position to relative and img to position absolute and give the image top: 50%; transform: translateY(-50%) https://jsfiddle.net/pu4L80gq/
Also you can use JS to determine image container height and image height to give margin-top to image or padding-top to the container :
(image container height - image height) would give you the rest space in the container then divide it on two and with this value you can center your image vertically https://jsfiddle.net/pu4L80gq/1/
$(document).ready(function () {
var imgContHeight = $('.img-container').height();
var image = $('.img-container img');
var imgHeight = image.height();
image.css({
marginTop: (imgContHeight - imgHeight) / 2
});
});
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.
I have 8 images on my page, 4 in one column and 4 in the other.
When I click on any of the images in the first column (panel1) I can see a circle appear on top of the image to show its been selected.
When I click on any of the images in the other column (panel2) the image fades out slightly but no circle is shown.
<div class="row col-xs-12 margin0">
<div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
<div class="boxTop"></div>
<div class="box" id="panel1">
<div class="row col-xs-12 margin0" style="margin-left:-8%">
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145153/black_cherries_snbvu8.png" data-id="1" alt="" data-name="blackcherry" />
</div>
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/coconut_psdlax.png" data-id="2" alt="" data-name="coconut" />
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
<div class="row col-xs-12 margin0" style="margin-left:-8%">
<div class="col-md-6 col-xs-6">
<img src="//res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/mango_p3tjp5.png" data-id="3" alt="" data-name="mango" />
</div>
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/strawberries_s1da7u.png" data-id="4" alt="" data-name="strawberries" />
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
</div>
<div class="boxBtm"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-1 productmargintop5 paddingRound productsLeft" style="top:40%; left: 4%; position:relative"> + </div>
<div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
<div class="boxTop"></div>
<div class="box" id="panel2">
<div class="row col-xs-12 margin0" style="margin-left:-6%">
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/chocolate_lxphco.png" data-id="1" alt="" data-name="chocolate" />
</div>
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/cinnamon_o8nbos.png" data-id="2" alt="" data-name="cinnamon" />
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
<div class="row col-xs-12 margin0" style="margin-left:-6%">
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/honey_lawjsz.png" data-id="3" alt="" data-name="honey" />
</div>
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/vanilla_qptl2d.png" data-id="4" alt="" data-name="vanilla" />
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
</div>
<div class="boxBtm"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-1 productmargintop5 paddingRound productsLeft" style="top:40%; left: 4%; position:relative"> = </div>
<div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
<div class="boxTop"></div>
<div class="box">
</div>
<div class="boxBtm"></div>
</div>
</div>
and my Script
$(document).ready(function () {
// Panel1 is working as expected
$("#panel1 .row img").click(function () {
$("#panel1 .row img").removeClass("BlackcherryCircle");
$("#panel1 .row img").removeClass("CoconutCirle");
$("#panel1 .row img").removeClass("MangoCircle");
$("#panel1 .row img").removeClass("StrawberryCircle");
$("#hdnPanel1").val('');
var name = $(this).attr("data-name");
var id = $(this).attr("data-id");
switch (name) {
case "blackcherry":
$(this).addClass('BlackcherryCircle');
break;
case "coconut":
$(this).addClass('CoconutCirle');
break;
case "mango":
$(this).addClass('MangoCircle');
break;
case "strawberries":
$(this).addClass('StrawberryCircle');
break;
default:
}
$("#hdnPanel1").val(id);
});
// Panel2 has the issue it will not apply the CSS Class for the image clicked
$("#panel2 .row img").click(function () {
$("#panel2 .row img").removeClass("ChocolateCircle");
$("#panel2 .row img").removeClass("CinnamonCircle");
$("#panel2 .row img").removeClass("HoneyCircle");
$("#panel2 .row img").removeClass("VanillaCircle");
$("#hdnPanel2").val('');
var name = $(this).attr("data-name");
var id = $(this).attr("data-id");
switch (name) {
case "chocolate":
$(this).addClass('ChocolateCircle'); // Will not apply the CSS Class
break;
case "cinnamon":
$(this).addClass('CinnamonCircle'); // Will not apply the CSS Class
break;
case "honey":
$(this).addClass('HoneyCircle'); // Will not apply the CSS Class
break;
case "vanilla":
$(this).addClass('VanillaCircle'); // Will not apply the CSS Class
break;
default:
}
$("#hdnPanel2").val(id);
});
});
I have created a JSFiddle here because I'm not 100% sure what is going wrong, the images that wont display the circle are inside panel2
I think the problem is the images... the images in the first panel has transparent background where as second one don't have transparent background.
So try to use images with transparent backgrounds
body {
background-color: lightgrey;
}
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145153/black_cherries_snbvu8.png" data-id="1" alt="" data-name="blackcherry" />
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/honey_lawjsz.png" data-id="3" alt="" data-name="honey" />
It's because the images you've used in panel 1 have transparent backgrounds. In panel 2 the images have solid white backgrounds.