I am trying to remove vertical space between the rows of a thumbnail's grid as I did for that horizontal but with no success.
.gutter-0.row {
margin-right: 0;
margin-left: 0;
/* not working */
margin-top: 0;
margin-bottom: 0;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
padding-right: 0;
padding-left: 0;
/* not working */
padding-top: 0;
padding-bottom: 0;
}
HTML
<div class="row gutter-0">
<div class="col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/200x200" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/200x200" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/200x200" alt="">
</div>
</div>
</div>
<div class="row gutter-0">
<div class="col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/200x200" alt="">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/200x200" alt="">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="thumbnail">
<img src="http://placehold.it/200x200" alt="">
</div>
</div>
</div>
Bootply
How could I do?
Thank you
There is a margin bottom on the "thumbnail" classes.
Just add this to your css to remove it :
.thumbnail {
margin-bottom: 0;
}
Bootply
.thumbnail has 20px bottom margin. Either reset it or use the below style.
.thumbnail{
display: table-cell;
}
http://www.bootply.com/hDnBumWAdZ
Related
This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
After some rows the css float property have a strange behavior that i couldn't know its reason.
Take into account that I cannot add a div with a "clear" property between the rows because the html will be generated dynamically (php loop).
I think that in order to do that I should create a function in php that determines when to insert a clear div between the rows because sometimes there are 2 images per and other times 3.
But I prefer a CSS solution.
Here is the full code:
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.boxes{
box-sizing: border-box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.box1 {
width: 33.33333333333333%;
}
.box2 {
width: 66.66666666666666%;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<html>
<body>
<div class="row">
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
</div>
</body>
</html>
In your example, you have an image that's slightly shorter than the one before it. That's causing the gap on the following row which clear would normally fix. if you had the same number of elements per row then something like nth-child could be used with clear, but since you said the number of elements per line could change, that wouldn't work. An easy fix is to set a minimum height on your .box-inner class:
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.boxes {
box-sizing: border-box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.box1 {
width: 33.33333333333333%;
}
.box2 {
width: 66.66666666666666%;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
min-height: 122px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<div class="row">
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
</div>
The easiest solution is to add a fixed height to your container.
.box-inner {
background-color: grey;
width: 100%;
height: 120px;
overflow: hidden;
}
Another addition to the above is to add object-fit: cover to your image to ensure it fills the container space.
.box-inner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
I have a layout like this:
body {
text-align: center;
}
.link {
position: relative;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
text-align: center;
width: 100%;
height: 100%;
background-color: #263238;
color: #1DE9B6;
opacity: 0;
visibility: hidden;
}
.link:hover .info {
opacity: 1;
visibility: visible;
}
.col-md-3 {
margin-bottom: 30px;
}
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
</div>
</div>
When the layout gets small, and only one column is displayed horizontally, the div which is supposed to show on hover gets as big as the column, but I only want it to be as big as the fluid image. How would I need to achieve this?
Here is the codepen link: https://codepen.io/Kestvir/pen/gKVwLe
Just add display: inline-block to the link element
.link {
position: relative;
display: inline-block;
}
Or you can also add d-inline-block position-relative classes on the .link elements .
body {
text-align: center;
}
.link {
position: relative;
display: inline-block;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
text-align: center;
width: 100%;
height: 100%;
background-color: #263238;
color: #1DE9B6;
opacity: 0;
visibility: hidden;
}
.link:hover .info {
opacity: 1;
visibility: visible;
}
.col-md-3 {
margin-bottom: 30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
</div>
</div>
i was using bootstrap grid system to format picture like:
this is my code :
<div class="row">
<div class="col-md-4">
<div class="well"><img src="..." class="img-responsive"">
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<div class="well"><img src="..." class="img-responsive" alt="Responsive image"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="well"><img src="..." class="img-responsive" alt="Responsive image"></div>
</div>
</div>
</div>
</div>
I want the picture to be responsive so I put class="img-responsive" on the <img>
<img src="..." class="img-responsive" alt="Responsive image">
but end up like the right picture. if i dont use class="img-responsive" the image will show on full resulution. how i fix this? (please give me a easy explanation because i'm a noob :) )
You can apply CSS Flexbox rules on .row & .col-*-*. I've used some custom classes (all the .col-*-* has a class called .item). Like:
.row {
display: flex;
}
.item {
display: flex;
flex-direction: column;
}
.item.left {
flex-direction: row;
}
Have a look at the snippet below:
.row {
display: flex;
}
.item {
display: flex;
flex-direction: column;
}
.item.left {
flex-direction: row;
}
.item.left .well {
width: 100%;
align-self: stretch;
}
.item.left .well img {
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="item left col-sm-4">
<div class="well"><img src="http://placehold.it/200x200" class="img-responsive">
</div>
</div>
<div class="item col-sm-8">
<div class="row">
<div class="col-sm-6">
<div class="well"><img src="http://placehold.it/100x100" class="img-responsive" alt="Responsive image"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="well"><img src="http://placehold.it/100x100" class="img-responsive" alt="Responsive image"></div>
</div>
</div>
</div>
</div>
Hope this helps!
You should use following HTML structure as you need left and right columns having equal width:
<div class="container">
<div class="row">
<div class="col-xs-6">
// content....
</div>
<div class="col-xs-6">
// content....
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="well"><img src="..." class="img-responsive">
<br>
<br>
<br>
<br><br>
</div>
</div>
<div class="col-xs-6">
<div class="well"><img src="..." class="img-responsive" alt="Responsive image"></div>
<div class="well"><img src="..." class="img-responsive" alt="Responsive image"></div>
</div>
</div>
</div>
So i'm building this portfolio type website and i just can't get the bootstrap grid to work properly. As you can see in the image, the second big row, which starts with the big image is not symmetric to the first row. I don't really understand where the problem is. I've managed to do that without bootstrap using fixed width and height, but that really is not an option as i would loose all the responsiveness. What am i doing wrong here?
<section class="container-fluid" style="max-width: 1980px; min-width:1280px;">
<div class="row">
<div class="col-md-7" style="padding-right: 0">
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
</div>
<div class="col-md-5" style="padding-left: 0">
<div class="col-md-12" style="padding: 5px;">
<img src="http://placehold.it/780x415" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5" style="padding-right: 0">
<div class="col-md-12" style="padding: 5px;">
<img src="http://placehold.it/780x415" class="img-responsive">
</div>
</div>
<div class="col-md-7" style="padding-left: 0">
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
</div>
</div>
</section>
UPDATE:
So I actually managed to solve my problem, by creating two new column classes - col--small-blocks and col--large-blocks
.col-xs-small-blocks,
.col-sm-small-blocks,
.col-md-small-blocks,
.col-lg-small-blocks {
position: relative;
min-height: 1px;
padding: 0;
}
.col-xs-small-blocks {
width: 60%;
float: left;
}
#media (min-width: 768px) {
.col-sm-small-blocks {
width: 60%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-small-blocks {
width: 60%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-small-blocks {
width: 60%;
float: left;
}
}
.col-xs-large-blocks,
.col-sm-large-blocks,
.col-md-large-blocks,
.col-lg-large-blocks {
position: relative;
min-height: 1px;
padding: 0;
}
.col-xs-large-blocks {
width: 40%;
float: left;
}
#media (min-width: 768px) {
.col-sm-large-blocks {
width: 40%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-large-blocks {
width: 40%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-large-blocks {
width: 40%;
float: left;
}
}
This solved the problem, that bootstrap originally doesn't have classes for 5 column grid, so as you can see I created a column for my small images which takes up 60% of space and a column for my large blocks which takes up 40% of space. After that I just used col-md-4 to create the small blocks and col-md-12 for the large blocks
<section class="container-fluid" style="max-width: 1980px; min-width:1280px;">
<div class="row">
<div class="col-md-small-blocks">
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
</div>
<div class="col-md-large-blocks">
<div class="col-md-12 block-padding">
<img src="http://placehold.it/750x405" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-md-large-blocks">
<div class="col-md-12 block-padding">
<img src="http://placehold.it/750x405" class="img-responsive">
</div>
</div>
<div class="col-md-small-blocks">
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
</div>
</div>
</section>
And now as you can see, everything is symmetric and responsive :)
Stupid question: I have three images in a row, but they are aligned to the left in their column. How can I align them to the center of the column?
This is my code:
<div class="container partners">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="congaz.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
</div>
And CSS:
.partners {
display:block;
margin: 0 auto;
vertical-align:middle;
}
Add the text-center class to your column divs
<div class="col-md-4 col-sm-4 col-xs-4 text-center">
First of all you can not write 2 class tag on same element
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
instead of this you can write class="img-circle img-responsive"
for center aligning u can use "text-center" class to parent div..
or you can also apply style="float:none; margin:0 auto;" to img.
thanks, hope this will help you.
The idea is to make image block element and margin of auto. but as the margin:auto won't work except you assign some width of the elemet.
.partners img{
display: block;
margin: auto;
text-align: center;
width: 150px;
}
.partners {
display:block;
margin: 0 auto;
vertical-align:middle;
}
.partners img{
display: block;
margin: auto;
text-align: center;
width: 150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container partners">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="ogon.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="congaz.png" alt="ogon" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
</div>
<div class="text-center">
<img src="swz.png" alt="streetwize" class="img-circle" class="img-responsive" style="max-height:180px">
</div>
it would work defiantly.