I have a code like below - columns with full-width images.
<div class="col-3">
<img src="..." class="w-100" />
<div>Name</div>
</div>
As images can be of different size, it's not guaranteed that content below images will be displayed in one line (image's height is supposed to differ, depending on image's width).
In other words, when an image within .col is 200 px width, should be 200 px height, etc. (width = height).
Example 1 with css:
#import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
.img-prev {
height: 200px;
overflow: hidden;
}
.img-prev img {
max-height: 100%;
width: auto;
max-width: inherit;
margin: auto;
display: block;
}
<div class="container">
<div class="row">
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
Example 2 html:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
</div>
</div>
</div>
</div>
Example 3 with jq:
var imgs = $('.img-prev>img');
imgs.each(function(){
var item = $(this).closest('.img-prev');
item.css({
'background-image': 'url(' + $(this).attr('src') + ')',
'background-position': 'center center',
'-webkit-background-size': 'cover',
'background-size': 'cover',
});
$(this).hide();
});
.img-prev {
height: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="container">
<div class="row img-list">
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
</div>
</div>
try this one,
<div class="container">
<img src="loginBackground.jpg" class="img-fluid" alt="Cinque Terre" width="200" height="200">
</div>
Related
When adding the bootstrap class "img-fluid" to my images they don't appear, when inspecting the element it sets the image at 0x0 pixels.
The html:
<div class="col">
<div class="row no-gutters">
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid"
alt="placeholder">
</div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
<div class="w-100"></div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
</div>
</div>
The images are supposed to be the same size as the parent(div.col) and be responsive to the parent.
Here's an answer based on my comment.
Because you have a .col element as a child of a flex parent, the flex-basis is set to 0. That basically equates to width: 0.
To get around that, set the flex-basis to auto on the .col that are children of the .row element.
.row>.col {
flex-basis: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col">
<div class="row no-gutters">
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="w-100"></div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
</div>
</div>
Example what i need:
Image:
My code is this:
<div class="container">
<div class="row">
<div class="col-3">
<img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
</div>
<div class="col-6">
<img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Belgrade">
</div>
<div class="col-3">
<img src="image1.png" class="img-thumbnail float-right" alt="Niš">
</div>
</div>
<!-- THIS IS PROBLEM -->
<div class="row">
<!-- THIS COLUMN NEED TO BE BELOW 1 COLUMN / LEFT SIDE -->
<div class="col-3">
<img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
</div>
<!-- THIS COLUMN NEED TO BE BELOW 3 COLUMN / RIGHT SIDE -->
<div class="col-3 ml-auto">
<img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
</div>
</div>
<!-- END PROBLEM -->
<div class="row">
<div class="col-4">
<img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
</div>
<div class="col-4">
<img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Novi Sad">
</div>
<div class="col-4">
<img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
</div>
</div>
</div>
I can't figure where is the problem. If someone know where problem is, write solution. Thanks
PS. Sorry for my Bad english
Thanks All..
Edit: I've updated my answer to include background images, and to mimic the original layout better. Thanks to AndreiGheorghiu for help answering this more accurately.
.grid{
display: grid;
grid-gap:10px;
height:500px;
grid-template-columns: 1fr .2fr 1fr .2fr 1fr;
grid-template-areas: "topLeft large large large topRight"
"midLeft large large large midRight"
"bottomLeft bottomLeft bottomCenter bottomRight bottomRight";
}
.pic{
background: url(https://placeimg.com/400/400/any) no-repeat center/cover;
font: 700 20px sans-serif;
color:white;
display:flex;
align-items:center;
justify-content:center;
text-shadow:2px 2px 5px #000;
}
.pic-1{
grid-area: topLeft;
}
.pic-2{
grid-area: large;
}
.pic-3{
grid-area: topRight;
}
.pic-4{
grid-area: midLeft;
}
.pic-5{
grid-area: midRight;
}
.pic-6{
grid-area: bottomLeft;
}
.pic-7{
grid-area: bottomCenter;
}
.pic-8{
grid-area: bottomRight;
}
<div class="grid">
<div class="pic pic-1">Foxwoods</div>
<div class="pic pic-2">New York City</div>
<div class="pic pic-3">Las Vegas</div>
<div class="pic pic-4">Philadelphia</div>
<div class="pic pic-5">San Francisco</div>
<div class="pic pic-6">Miami</div>
<div class="pic pic-7">Boston</div>
<div class="pic pic-8">Washington D.C.</div>
</div>
You can try this code,
Note: Included responsive classes. Run this code as a full page
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail mt-md-4" alt="Novi Sad">
</div>
<div class="col-md-6">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Belgrade">
</div>
<div class="col">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Niš">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail mt-md-4" alt="Novi Sad">
</div>
</div>
<div class="row mt-md-4">
<div class="col-md-4">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
</div>
</div>
</div>
You need to put the small images in the same col. And display them as blocks: display:block; width: 100%; height: auto;.
Here's how I'd personally do it. I'm using .no-gutter class on .rows and white borders on images:
[my-gallery]:not(#_) {
padding: 8px;
}
[my-gallery] img {
display: block;
background-color: #f5f5f5;
width: 100%;
height: auto;
border: 8px solid white;
}
[my-gallery] .strethed img {
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" my-gallery>
<div class="row no-gutters">
<div class="col">
<img src="https://picsum.photos/300/200/?random" alt="Novi Sad">
<img src="https://picsum.photos/303/202/?random" alt="Novi Sad">
</div>
<div class="col-6 strethed">
<img src="https://picsum.photos/306/204/?random" alt="Belgrade">
</div>
<div class="col">
<img src="https://picsum.photos/309/206/?random" alt="Niš">
<img src="https://picsum.photos/312/208/?random" alt="Novi Sad">
</div>
</div>
<div class="row no-gutters" >
<div class="col">
<img src="https://picsum.photos/315/210/?random" alt="Novi Sad">
</div>
<div class="col">
<img src="https://picsum.photos/318/212/?random" alt="Novi Sad">
</div>
<div class="col">
<img src="https://picsum.photos/321/214/?random" alt="Novi Sad">
</div>
</div>
</div>
This question already has answers here:
Bootstrap 4 masonry layout utilizing flexbox grid
(3 answers)
Closed 4 years ago.
I want to create a responsive image grid as in the picture below:
How do I use bootstrap columns and rows to achieve this?
<div class="row">
<div class="col-md-3 sm-12"
<img class="img-thumbnail" scr=".......">
</div>
<div class="col-md-3 sm-12"
<img class="img-thumbnail" scr=".......">
</div>
<div class="col-md-3 sm-12"
<img class="img-thumbnail" scr=".......">
</div>
........
...........
.................
.....................
</div>
I place all the columns inside a single row so that the column elements wrap themselves but this does not happen.
When I implement the code above, due to "height: auto" some images are long and this creates void white space between images of different rows.
I get something like this as a result:
You can achieve this with card columns. JSFiddle here:
<div class="container-fluid pt-3">
<div class="card-columns">
<div class="card">
<img class="card-img-top" style="width:100%; height: 200px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 500px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 300px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 400px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 400px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 300px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 500px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 200px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 200px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 500px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 300px;"/>
</div>
<div class="card">
<img class="card-img-top" style="width:100%; height: 400px;"/>
</div>
</div>
</div>
depending on you requirement, you need to replace col-3 with col-sm-3 or col-md-3, etc:
img
{
width: 100%;
margin: 10px 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-3">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Lights" >
<img src="https://www.w3schools.com/w3images/falls2.jpg" alt="Lights" >
<img src="https://www.w3schools.com//w3images/wedding.jpg"alt="Lights" >
</div>
<div class="col-3">
<img src="https://www.w3schools.com/w3images/rocks.jpg" alt="Lights" >
<img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Lights" >
</div>
<div class="col-3">
<img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Lights" >
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" >
<img src="https://www.w3schools.com//w3images/wedding.jpg"alt="Lights" >
</div>
<div class="col-3">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Lights" >
<img src="https://www.w3schools.com//w3images/rocks.jpg" alt="Lights" >
</div>
</div>
I don't think that's possible with just bootstrap.
Look for the masonry ( https://masonry.desandro.com/ ) or isotope ( https://isotope.metafizzy.co/ ) plugin for bootstrap.
I need to made this div in bootstrap 3 as shows in image...
I need to display 4 icons/images in one row and another 4 icons in another row in smaller screen/mobile view..i dont know any error in my code..
please help me to make this as shown as in image.
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="col-md-2"></div>
<div class="col-md-1 text-center ">
<div class="im1">
<img src="/images/speaker.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Sound insultion</h6>
</div>
</div>
<div class="col-md-1 text-center" >
<div class="im1">
<img src="/images/renewable-energy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Save energy</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/window.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Prevent Dust Buildup</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/stormy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Storm Resistant</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/umb.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Blocks Seepage</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/sun.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Thermal Insulation</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/maintenance.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Low maintenance</h6>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</section>
styles
.im1{
padding-top: 8px;
padding-left: 8px;
}
.siz{
width: 40px;
}
.textt{
font-size: 15px;
color:#ffffff;
font-family: 'Times New Roman', Times, serif !important;
}
Here is the image
how to make this image using bootstrap grid system...
I created a code for you. I hope it will help to you.
https://codepen.io/myco27/pen/OvMdGp
img{
width: 100%;
}
.img1{
width: calc(100% / 8);
float:left;
}
#media (max-width: 860px) {
.img1{
width: calc(100% / 4);
float:left;
}
}
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
</div>
</section>
First bootstrap runs in a 12 grid sysytem that is defined or can be broken down into 2,3, or 4 segements...basically any divisor of 12. In your case, to get the first four images in a row (in a small device), we split the grid by 3 i.e "col-md-3" for each image wrapper and "col-lg-1" (for large devices) e.g using a snippet from your code
<div class="col-lg-1 col-md-3 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
Then avoid splitting the grid at the main <div class="col-md-2"></div> wrapper, simply leave it as <div class="row justify-content-md-center"></div>.
This should work just fine.
NB: The number of images willbe only 8 in this container
For Your CSS is simply modify the following
.siz{
width: 100%;
}
Try This. it has 8 div in 1 row. as shown in image
<style>
.main{
background:#034da2;
}
</style>
<div class="col-md-12 main">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
</div>
</div>
</div>
Actually the image is 450*450pixels (both height and width is 15.88cm)
so i want to adjust them in equally to screen please see my screen shot and as you see the name also came in the bottom of each image the name should not so much big and small too it just fit with the image
img {
padding float: left;
border-radius: 150%;
}
<h1>ACTOR</h1>
<img src="img/chadwick.jpg" alt="chadwick" height="15%" width="15%">
<img src="img/michael.jpg" alt="michel" height="15%" width="15%">
<img src="img/lupita.jpg" alt="lupita" height="15%" width="15%">
Bootstrap 3 solution
HTML structure
<div class="row">
<div class="col-...">
<img ...>
<h5>...</h5>
</div>
</div>
Added padding-left and padding-right to each column to make space. Added margin-top to <h5> (Could be something else).
Example
.my-row>div {
padding: 0 7vw;
}
.my-row h5 {
margin-top: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row my-row">
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 1</h5>
</div>
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 2</h5>
</div>
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 3</h5>
</div>
</div>
Bootstrap 4 solution
<div class="row text-center">
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="chadwick"></div>
<div>chadwick</div>
</div>
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="michel"></div>
<div>michel</div>
</div>
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="lupita"></div>
<div>lupita</div>
</div>
</div>