So i have the below Layout created
This is the Code i used to create the layout
<div class="col-xs-12">
<h3 style="margin-top:50px">
Key Projects
</h3>
<div class="row">
<div class="col-lg-6 col-sm-12">
<img id="projectMainImg" src="https://placeimg.com/544/358/arch" alt="" class="img-responsive ">
</div>
<div class="row col-lg-6 col-sm-12" >
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
</div>
</div>
</div>
Now my problem is when i go into chrome debugger and resize the screen i get the following
I taught having col-sm-12 in the div and the class="img-responsive" would make the smaller images stack neatly under the big image when the window is resized.
I have spent alot of time on the BootStrap site but i can't figure it out. Can anyone help explain what i need to do?
Please, have a look. I've replaced all the img-responsive on img-fluid it works as for me. Moreover, they have classes for margins and paddings so it's better not to use inline.
<div class="col-xs-12">
<h3 style="margin-top:50px">
Key Projects
</h3>
<div class="row">
<div class="col-lg-6 col-sm-12">
<img id="projectMainImg" src="https://placeimg.com/544/358/arch" alt="" class="img-fluid">
</div>
<div class="row col-lg-6 col-sm-12">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-fluid">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-fluid">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-fluid">
</div>
</div>
</div>
In latest version of bootstrap img-responsive is replaced with img-fluid class.
change to:
<div class="col-xs-12">
<h3 style="margin-top:50px">
Key Projects
</h3>
<div class="row">
<div class="col-lg-6 col-sm-12">
<img id="projectMainImg" src="https://placeimg.com/544/358/arch" alt="" class="img-responsive ">
</div>
<div class="col-lg-6 col-sm-12" >
<div class="row">
<div class="col-sm-12 col-lg-6">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
</div>
<div class="col-sm-12 col-lg-6">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
</div>
<div class="col-sm-12 col-lg-6">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
</div>
<div class="col-sm-12 col-lg-6">
<img id="projectImage" style="height:176px;width:264px;margin:0px 0px 5px 5px" src="https://placeimg.com/264/176/arch" alt="" class="img-responsive">
</div>
</div>
</div>
</div>
Related
I try to make a 3-column grid with images so that some text overlays these images. I found an example of the linear gradient for this purpose:
.card__content {
position: absolute;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}
So in HTML I have the next:
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="1.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="2.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="3.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
</div>
</div>
</div>
</div>
</div>
But this gradient doesn't glue to the end of the image and climbs out to the right. And the thumbnail's border doesn't stretch for all length of the block, though without the gradient it did. Here is what it looks like now.
Image
Please help!
I have made a few changes:
.card__content {
position: absolute;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
height: 100%;
display: flex;
align-items: center;
padding: 10px;
color: #fff;
}
.thumbnail {
display: inline-block;
border: 0;
}
.thumbnail img {
width: 100%;
max-width: 100%
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
</div>
</div>
</div>
</div>
</div>
I'm not very good in CSS, and so I don't know how to solve my problem. I've a grid images (you can see at https://i.imgur.com/88yDcbN.png). As you can see the first image (I selected) has useless white space below.
How can I move the image below so that there are 50px difference?
Actually I use these classes for my box:
col-sm-6 col-md-4
I'm using bootstrap as you can see.
The other divs inside the col-sm-6 col-md-4 have the right height.
Thank you for your help!
Example box:
<div class="_00d7">
<div class="row">
<div class="col-sm-6 col-md-4">
<div data-id="11" data-score="4380" class="_4180">
<a class="eac1">
<img src="images/E8wfc3V4Azc.jpg">
</a>
<div class="_96ae">
Punteggio immagine: <b>4380</b>.
</div>
</div>
</div>
</div>
</div>
CSS:
._00d7 ._4180 {
padding: 0;
margin-bottom: 30px;
background-color: #fff;
border-radius: 4px;
border: none;
transition: 0.15s ease-in-out;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.0975);
}
._00d7 .eac1 img {
border-radius: 4px 4px 0 0;
vertical-align: middle;
border-style: none;
margin-right: auto;
margin-left: auto;
display: block;
max-width: 100%;
height: auto;
}
(sorry for classes names, I'm using react)
For that particular layout (a Mansonry-like layout) Bootstrap4 give you a solution: use Card columns: https://getbootstrap.com/docs/4.0/components/card/#card-columns.
I give you an example. This is only a start point, you can customize as you want.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="_00d7">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card-columns">
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/500">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/250">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/100">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Be careful: the images order is vertical:
1 4 7
2 5 8
3 6 9
i made a gallery using bootstrap4 grids, each 6 images is a row, if one of the 6 images is taller than the others, The entire row's images become taller too, And i want to set a fixed size row so images just resize at its size, i use css
height: 100%; width 100%;
to make it fill the size of row because if i didn't all images will stat at its real height and width and become mass.
<body>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="tall-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
<div class="col-lg-2">
<img src="normal-image.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</body>
you can add custom css
.img-fluid{ max-width:100%; max-height:100px; }
I would probably just add a CSS class to the images, last thing you want is a image getting uploaded and covering pretty much whole your site.
img.img-fluid {
height: 250px;
}
I have been attempting to replicate Quora's design in Bootstrap when I encountered following problem. On every question page of Quora, say this one, there is a left sidebar. So for the first section (titled 'Want Answers'), I have a following structure:
<div class="col-lg-2">
<div id="left-sidebar">
<div id="want-answers">
<p><small>18 WANT ANSWERS</small></p>
<hr>
<div class="row">
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
</div>
<div class="row">
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
<div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
</div>
</div>
<!-- /#want-answers -->
Left sidebar is 2 columns wide. Now, as the image displays, each row (horizontal highlighting) extends want-answers div (vertical blue highlighting). Why is so? Shouldn't row encompass the full width of encompassing col-lg-2 div?
I'm not sure if this is a problem but try closing out your image tags like this: <img src="img/350x350.gif}" alt="" width="32px" height="32px"/>
in your code there is no trailing slash.
A large portion of achieving what you are looking for will have to do with overriding default padding and margins that bootstrap applies to rows and or columns. I was able to contain the images and center them with the following modifications:
DEMO
CSS:
#left-sidebar {
text-align:center;
background:#ccc;
}
.min-width {
min-width:153px;
}
#want-answers {
background:#f1f1f1;
min-width:153px;
width:100%;
text-align:center;
}
.no-marg-pad {
padding:0;
margin:0;
}
.img-line {
background:#000;
width:100%;
min-width:153px;
}
.img-padding {
padding:0;
margin-bottom:10px;
}
HTML
<div id="left-sidebar" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 no-marg-pad min-width">
<div class="row no-marg-pad">
<div id="want-answers" class="col-xs-12">
<p><small>18 WANT ANSWERS</small></p>
</div>
</div>
<div class="row no-marg-pad">
<div class="img-line">
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
</div>
</div>
<div class="row no-marg-pad">
<div class="img-line">
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
<div class="col-xs-3 img-padding">
<img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
</div>
</div>
One other thing you may want to look at is defining the column width for small and medium size screens as well e.g. col-sm-2 col-md-2
I'm not sure if you have any custom CSS for #want-answers or #left-sidebar, but one problem is that 4-32px images would usually extend beyond the width of the col-lg-2. Change them to img-responsive so they shrink as needed..
<div class="col-lg-3">
<img src="//placehold.it/350" alt="" width="32px" height="32px" class="img-responsive">
</div>
http://codeply.com/go/OtSvmYQfcX
My problem is that the heights of rows / columns does not fit. The first column has the class col-sm-8 and the second the class col-sm-4
The second class col-sm-4 has another two rows, each with col-sm-12 classes.
I have looked for some Masonry similar jQuery Plugins but I want to stay at CSS. How can I solve this heights and keep responsivity?
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="padding-bottom:30px;">
<div class="col-sm-8">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/inteledison.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600"/>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/inteledison.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600"/>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/bare.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/esp8622.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
</div>
<div class="col-sm-4">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/raspb2b.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
</div>
<div class="col-sm-4">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/beaglebone.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
</div>
</div>
</div>