I have a Bootstrap section with stacked images and the issue is that I want the second and third columns to always have the same height as the first column. I can't seem to find a solution for the second and third column because they keep fluctuating in height as I change to different view sizes. It would be ideal to have them always align to the bottom and top.
.gallery {
min-height: 980px;
}
.gallery .row{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<div class="container-fluid gallery">
<div class="row">
<div class="col-sm-5">
<img src="http://lorempixel.com/528/980/technics" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="http://lorempixel.com/409/490/technics" class="img-responsive">
<img src="http://lorempixel.com/409/490/technics" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="http://lorempixel.com/324/327/technics" class="img-responsive">
<img src="http://lorempixel.com/324/327/technics" class="img-responsive">
<img src="http://lorempixel.com/324/327/technics" class="img-responsive">
</div>
</div>
</div>
Here is the Bootply: http://www.bootply.com/mb2Ez6G7r8
Hi Paul you can resolve in that way, i see that you use boostrap you dont need the property flex in your css.
<div class="row">
<div class="col-sm-5">
<img src="https://www.jssor.com/demos/img/paint/01.jpg">
</div>
<div class="col-sm-4">
<img src="https://www.jssor.com/demos/img/paint/02.jpg">
<img src="http://lorempixel.com/409/490/technics" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="https://www.jssor.com/demos/img/paint/06.jpg" class="img-responsive">
and your css
.gallery {
min-height: 980px !important;}
dont forget add bootrap in your html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
i explain why you dont need flex, Boostrap make your thml responsive with class .row and you can fill this with 12 columns that is why you have col-sm-(Number) in your case 5+4+3=12 if you want you can read more in this link grid systemn
.column-sm-4{
display: flex;
flex-direction: row;
}
If height is an issue you should probably use background-image with css instead of <img> element.
Hope this will solve the issue.
Related
I am making a Instagram layout provided below, basically, the image/boxes have aspect ratio of 1:1 (just diffrent sizes), I am using Bootstrap 4 and SCSS mixin for aspect ratio.
My issue is I cannot align properly the 4 boxes surrounding the big box on the middle and the spacing on the middle box.
I used absolute positioning and flexbox, something like below but I am not sure if this is the right approach.
.ig {
&-wrapper {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
&-item-1,
&-item-2 {
width: 180px;
height: 180px;
#include aspect-ratio(180px, 180px);
}
}
Here is the demo link to what I have started
https://codepen.io/johndavemanuel/pen/WNQgzZO
Solved!
Switch to bootstrap columns instead of flexbox
<div class="row ig-row-1">
<div class="col-1 offset-3 ig-col">
<div class="ig-row-1-item-1 bg-primary">
<img src="https://source.unsplash.com/600x600/?boxing" alt="">
</div>
</div>
<div class="col-2">
<div class="ig-row-1-item-2 bg-primary">
<img src="https://source.unsplash.com/600x600/?boxing" alt="">
</div>
</div>
<div class="col-1">
<div class="ig-row-1-item-3 bg-primary">
<img src="https://source.unsplash.com/600x600/?boxing" alt="">
</div>
</div>
</div>
https://codepen.io/johndavemanuel0528/full/YzyOJvJ
I am working on a Bootstrap 3 grid (unfortunately, the CMS is not allowing me to use Bootstrap 4). At the moment I cannot link to the page, so maybe this question is too hard to answer.
Here is how the row containing 5 columns is looking in the CMS:
The max-width is 1200px.
The problem is that every time I add a column containing an image, the image height is not the same. In this example I set a height on 255px on all images, but the image in the first column is much taller than the others.
When I enter the code in a JSfiddle it is looking normal
See jsfiddle here
So it must be something in the CMS there is doing it? Is there some kind of clue what I could look after?
Best regards
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.padding-y {
padding: 20px;
background-color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="section padding-y">
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
</div>
</div>
Step 1. Let's reproduce the problem
We don't need the bootstrap-theme.min.css. This file uses for the decoration only. First of all wee need bootstrap.min.css.
The 3.0.0 version is too old. Let'use the 3.4.1. instead. It's the latest Bootstrap 3 version.
Bootstrap assumes the row is inside the container. Sometimes the CMS has its own containers, and then you can get by with them, but to reproduce the problem, we need the correct code with the container.
Looking at your screenshot, I dare to assume that something on your site adds the max-width: 100%; restriction to all images. This is a fairly common solution for different themes.
I removed the block with the section padding-y classes, because the problem was reproduced without it.
So we get an example of a code that reproduces your screenshot.
img {
max-width: 100%;
}
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="https://via.placeholder.com/348x255/69c/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Step 2. What's happened
4 small images are wider than their columns. With a total content width of 1200 pixels, a column in one sixth of the width is 200 pixels. In addition, each column also has a horizontal padding of 15 pixels. There are 170 pixels left for the 233-pixel wide image.
And something adds a limit for the maximum width of images. Because of this, these images become smaller and their height becomes smaller too.
Step 3. What can be done
Since we do not know your layouts for screens of different widths, I can only fantasize.
Suppose you want to put 5 pictures of different sizes in one line on the desktop so that their heights coincide.
Variant with backgrounds
For example you can replace the images with blocks and use the images as a background. Then the height can be set in the CSS, the gaps between the pictures will be the same, but the visible part of the pictures can decrease.
.image-box {
background-repeat: no-repeat;
height: 255px;
}
#media (min-width: 768px) {
.image-box {
background-position: center;
background-size: cover;
}
}
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="image-box" style="background-image:url(https://via.placeholder.com/348x255/69c/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Variant with flexbox
You can also make Bootstrap 3 columns behave like a flexbox. This solution is suitable if the sizes of the images are known in advance and you can calculate which part of the row each of them occupies.
In the comments you have wrote that you wish to stretch the images on mobile. So I use this info in the new solution.
.row-of-images img {
width: 100%;
}
#media (min-width: 768px) {
.row-of-images {
display: flex;
}
.row-of-images > div {
box-sizing: content-box;
/* images will be resized taking into account the padding of the columns */
flex: 1 1 18.203125%;
/* 18.203125% = 100% * 255px / (348px + 4 * 255px) */
}
.row-of-images > div:first-child {
flex-basis: 27.1875%;
/* 27.1875% = 100% * 348px / (348px + 4 * 255px) */
}
}
<div class="container">
<div class="row row-of-images">
<div class="col-xs-12">
<img src="https://via.placeholder.com/348x255/69c/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
The reason the images are different heights on the problem page "(domain) dot com slash da-dk/page/sbp" (but not in the posted source above) is because the images on the problem page have the .img-responsive class:
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
</div>
From the Bootstrap 3.3 documentation, .img-responsive applies:
max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
The first image is scaling to the width of the first column, which is col-sm-4. The other images are scaling to the width of a col-sm-2 column. So it's clear why the images are different height.
The simplest fix is to remove .img-responsive from all the images.
But if you want to keep the images responsive, you'll need to adjust the image aspect ratios so the wider and narrow images end up the same height.
Example with the aspect ratios adjusted:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
</div>
I have a couple of images
mockleft.png - 1228x500px
mockright.png - 1825x335px
My code is as below..
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="home">
<div class="intro">
<div class="row">
<div class="col-xs-5" style="background-color:blue">
<img src="img/mockleft.png" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6" style="background-color:red;">
<img src="img/mockright.png" alt="logo" style="width:100%;">
</div>
</div>
</div>
</body>
The output is as below..
I wish for two things..
a) The left div with blue background should be same height as right div with red background and vice versa.
b)Once the right div with red background becomes same size with the left one, I want the mockright.png image to be vertically aligned at bottom of the right div.
I tried the vertical-align css to both the div as well as image without success.
All help is sincerely appreciated
Thanks
You could do it with flexbox. If you use Bootstrap 4 as #Pete suggests in the comments, you could achieve the same, since it uses flexbox.
JSFiddle Demo
.row {
display: flex;
}
.col-xs-1 {
width: 10%;
}
.col-xs-5 {
display: flex;
flex-direction: column;
width: 40%;
background: blue;
justify-content: flex-end;
}
.col-xs-6 {
width: 50%;
background: red;
}
<div class="row">
<div class="col-xs-5">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
</div>
a) Assuming you need to use Bootstrap 3, what you can do is use one of the options provided to make the columns the same height:
How can I make Bootstrap columns all the same height?
b) For that part, use auto margin:
<img src="img/mockright.png" alt="logo" style="width:100%; margin-top: auto;">
Hope it helps :)
I've been reading lot of answers on how to have same height columns within the same row, but none seems to work in my case. I know the solution is probably something really dumb, but I cannot figure it out...
So, first I created a style.css and imported it in my index.php this way (I also include the other style reference I am actually using and the important part of the code below):
index.php
<link rel="stylesheet" href="./static/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
...
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="./img/animazione.jpg" alt="Animazione" style="width:100%">
<div class="caption">
<h2>Some text COL2</h2>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="./img/rinnovabili.jpg" alt="Rinnovabili" style="width:100%">
<div class="caption">
<h2>Some text COL2</h2>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="./img/rugby.jpg" alt="Rugby" style="width:100%">
<div class="caption">
<h2>Some text COL3</h2>
</div>
</div>
</div>
</div>
My style.css is like (as proposed here):
style.css
.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
After that, I tried to replace <div class="row"> with <div class="row equal"> but nothing happened: the columns are still each a different height. I also tried to set the first row of my style.css to .row.equal{ but still with no luck.
I am using FireFox ver. 53. When i open the Developer Tools, I can see that display: flex; in my css is ignored (it's ruled out). I guess it is something related to flexbox, but I am a novice and I really don't know how to solve this problem.
I also created a bootply as suggested. Hope it will help understanding my point.
The columns are equal height, but the thumbnails inside the columns are not filling the height. Just set the height...
.row.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
height: 100%;
}
.thumbnail {
height: 100%;
}
https://www.bootply.com/8wQiUUKL53
I guess the flex property was getting overriding by the bootstrap classes and can be resolved by '!important' in your custom css.
.target-class{
display: flex !important;
}
But you can simplify the code by removing the predefined thumbnail class and styling it in your own way.
Display your parent class as flex and align your children as 'stretch' (will give the height equal to the height of the parent div).
.parent {
background: lightgrey;
display: flex;
}
.child {
align-items: stretch;
flex: 1;
background: #fff;
margin: 10px;
padding-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="parent">
<div class="col-xs-4 child">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">
<div class="caption">
<h2>Some text COL2 some text</h2>
</div>
</div>
<div class="col-xs-4 child">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">
<div class="caption">
<h2>Some text COL2 some more text</h2>
</div>
</div>
<div class="col-xs-4 child">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">
<div class="caption">
<h2>Some text COL3</h2>
</div>
</div>
</div>
</div>
</div>
</div>
I've spent more time than I care to admit trying to get a row of images to be clickable links in a row that aligns the images in the middle of the row that doesn't break Bootstrap responsiveness. The links work fine, but the alignment is off, due to variations in the sizes of the images (though they're all compact-height landscape). I can get the images to align vertically within div.row, but it breaks responsiveness and images don't resize properly.
Here's a JSFiddle of what I've tried
Here's what I'm trying to do:
row
--------------------------------------------------------
| |
image1 | image2 | image3
| |
--------------------------------------------------------
Here's the best I can come up with:
row
--------------------------------------------------------
image1 | image2 | image3
| image2 | image3
| image2 |
--------------------------------------------------------
This answer is exactly what I'm trying to achieve, however the images don't vertically center for me when I use the CSS classes from it.
I've got images that are all compact landscape images on a Bootstrap project. Trying to align the images vertically within the row
What I've tried:
Here's what I started with:
<div class="row vertical-align">
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
</div>
I can get everything to appear in a row as a clickable link, but due to slight variations in sizes of the images, the images do not align in the vertical center of row. I added this vertical-align on a normal screen, but it breaks Bootstrap's responsiveness when the window resizes.
.vertical-align {
display: flex;
align-items: center;
}
For my second attempt, I removed the vertical align class from the div.row and removed Bootstrap's img-responsive class from the img tag, as follows:
<div class="row">
<div class="col-sm-4">
<div><img src="../img/my-image-1.png"></div>
</div>
<div class="col-sm-4">
<div><img src="../img/my-image-2.png"></div>
</div>
<div class="col-sm-4">
<div><img src="../img/my-image-3.png"></div>
</div>
</div>
In my CSS file, I added these classes:
.jumbotron .row > a {
display: block;
}
.jumbotron > .row div a img {
max-height: 80px;
max-width: 100%;
vertical-align: middle;
}
The CSS classes above don't break Bootstrap, but they align the images along the tops of them, not in the vertical center of the div.row.
I've tried a bunch of other stuff, but I can't get it to work. This post looked filled with promise, but I couldn't get it to work:
How to vertically align an image inside div
I'd like to get this figured out with CSS and HTML, no jQuery. Any suggestions re: what I'm ****ing up would be greatly appreciated.
Bootstrap's columns are floating by default with css float property. With float we can't middle align columns. However with display: inline-block we can. All we need is to remove float from styles of columns and change them to inline-block with vertical-align: middle and you will get what you want. But don't forget to remove extra space that comes with inline-block.
Here is the trick.
.vertical-align {
letter-spacing: -4px;
font-size: 0;
}
.vertical-align .col-xs-4 {
vertical-align: middle;
display: inline-block;
letter-spacing: 0;
font-size: 14px;
float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="jumbotron">
<div class="row vertical-align">
<div class="col-xs-4">
<img src="http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
Note: Setting font-size: 0; letter-spacing: -4px on parent and applying parent's font-size: 14px; letter-spacing: 0 back on child elements will remove white space that comes with inline-block.
please try this and lemme know if this is what you wanted
<style>
img {
height: auto;
width: 100%;
}
.vertical {
height: 100vh;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.abcd {
min-width: 5em;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="vertical">
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
</div>
</div>
</body>
I have created a little workaround. The real problem is that the <a> element is not cooperating. The link element won't obtain the width/height of his child, that is why the solution provided does not work. A workaround to this is to use the background-image property. Giving a wrapper a solid height and width and apply the image as background using background-size: contain. See the fiddle provided below.
https://jsfiddle.net/f9ogw26n/21/
.wrapper {
height: 200px;
width: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<a href="#">
<div class="wrapper" style="background-image:url('http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png');">
</div>
</a>
</div>
<div class="col-xs-4">
<a href="#">
<div class="wrapper" style="background-image:url('http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg');">
</div>
</a>
</div>
<div class="col-xs-4">
<a href="#" title="">
<div class="wrapper" style="background-image:url('http:////cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png')">
</div>
</a>
</div>
</div>
</div>