I wanted to create an image grid with one full image on the left and 4 thumbnail images on right of the big image. Something like what I've done here:
https://codepen.io/ashwindkini/pen/qabRok
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/450x450" alt="" />
</div>
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
</div>
How do I prevent the second set of images (thumbnails) from increasing the size of row?
Are you able to make the larger image actually a larger image so that it scales responsively in comparison with the smaller "thumbnails"?
It would help to remove padding from the columns so that the width of the image (forced by column padding) doesn't limit the height of the image.
Everything can go in a single row..
<div class="container">
<div class="row">
<div class="img col-sm-6 col-md-6">
<img src="//placehold.it/600/666" class="center-block img-responsive" alt="big image">
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450/EEE" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450/444" class="img-responsive" >
</div>
</div>
</div>
http://www.codeply.com/go/y9nZTlXSWT
The "row" element should not be a direct child of another row element. You should put it as a child of another col-md-6.
Here's the example:
https://codepen.io/anon/pen/dpGvOJ
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/450x450" alt="" />
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 2 years ago.
I'm new to bootstrap. I'm trying to create a gallery of some amazing arts. But, I'm facing some issues. All of the columns are taking up equal height even though the image isn't that large. How can I remove the extra space?
<div class="container-fluid">
<div class="row content" id="images">
<div class="col-md-4">
<img src="..\images\allyson-beaucourt-HaD6zYONkg0-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-4">
<img src="..\images\annie-spratt-52hSxHwXE7I-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-4">
<img src="..\images\amr-taha-ig_Qc8qoTSI-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-4">
<img src="..\images\annie-spratt-Pzyyzaiy-LE-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-4">
<img src="..\images\arno-senoner-FOM8031NAG8-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-4">
<img src="..\images\bp-miller-f6BffCg5Ymc-unsplash.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
this is how I want it to look.
This can be helpful
<div class="container-fluid">
<div class="row">
<div class="col-md-6 content" id="images">
<div class="col-md-12 ">
<img src="..\images\allyson-beaucourt-HaD6zYONkg0-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-12 ">
<img src="..\images\annie-spratt-52hSxHwXE7I-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-12 ">
<img src="..\images\amr-taha-ig_Qc8qoTSI-unsplash.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-6 content" >
<div class="col-md-12 " style="max-height: 50%">
<img src="..\images\annie-spratt-Pzyyzaiy-LE-unsplash.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-12 " style="max-height: 50%">
<img src="..\images\arno-senoner-FOM8031NAG8-unsplash.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
see more on bootstrap grid
I want to design like this in bootstrap css , picture
What i have tried is
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="img1.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img3.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img5.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img2.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img4.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img6.jpg">
</div>
</div>
The height of images img1.jpg,img4.jpg,img5.jpg need to increase as shown in image attcahed,
Is there any Experts in CSS?
Add the .img-fluid class to each of your images so they scale with the parent div's. That should work.
https://getbootstrap.com/docs/4.0/content/images/#responsive-images
You can achieve the desired layout with modification on your html code. Try this code.
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="img1.jpg">
<br>
<img class="img-responsive" src="img2.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img3.jpg">
<br>
<img class="img-responsive" src="img4.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img5.jpg">
<br>
<img class="img-responsive" src="img6.jpg">
</div>
</div>
I am trying to create a website with several images and content in columns using Bootstrap as a framework.
Is it possible to somehow make all of the columns automatically adjust to the height of the row? Here is my code:
<div class="row">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
READ MORE
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
LEARN MORE
</div>
</div>
</div>
In the above example the two "col-md-3 col-xs-6" columns are not the same height as the "col-md-6 col-xs-12" column.
How can I make them adjust to the height of the row so that all of the content is in line?
Thanks.
You may use css flexbox to achieve same height for all the columns. So your code would be:
<div class="row heightadjust">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
READ MORE
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
LEARN MORE
</div>
</div>
</div>
and write a custom css
.heightadjust {
display: flex;
}
I just started learning HTML and CSS and am running into images misalignment and trying to make them the same size. How can I fix this?
This is the current HTML:
<div class="container text-center">
<h3>Find Your University</h3><br>
<div class="row">
<div id="cities">
<div class="col-sm-4">
<img src="https://media.timeout.com/images/100644443/image.jpg" class="img-responsive" style="width:100%" alt="London">
</div>
<div class="col-sm-4">
<img src="http://www.gaiasg.com/img/si1.jpg" class="img-responsive" style="width:100%" alt="Singapore">
</div>
<div class="col-sm-4">
<img src="http://images.trvl-media.com/media/content/shared/images/travelguides/Argentina-8-smalltabletRetina.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="http://www.travelstart.com.ng/blog/wp-content/uploads/2014/02/Lagos.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="https://www.sohohousechicago.com/system/files/082014/53e8a9c2f9426120f600002e/xlarge/063696_002.jpg?1424778295" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="http://www.tnetnoc.com/dealsImages/landingPages/destinationLandingPages/other/Sydney-345x225.1.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
</div>
And the CSS:
#cities .col-md-3 {
height:570px;
overflow:hidden;
}
you need to use another row for each 3 images:
<div class="container text-center">
<h3>Find Your University</h3><br>
<div id="cities">
<div class="row">
<div class="col-sm-4">
<img src="https://media.timeout.com/images/100644443/image.jpg" class="img-responsive" style="width:100%" alt="London">
</div>
<div class="col-sm-4">
<img src="http://www.gaiasg.com/img/si1.jpg" class="img-responsive" style="width:100%" alt="Singapore">
</div>
<div class="col-sm-4">
<img src="http://images.trvl-media.com/media/content/shared/images/travelguides/Argentina-8-smalltabletRetina.jpg" class="img-responsive" style="width:100%" alt="Image">
</div> </div>
<div class="row">
<div class="col-sm-4">
<img src="http://www.travelstart.com.ng/blog/wp-content/uploads/2014/02/Lagos.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="https://www.sohohousechicago.com/system/files/082014/53e8a9c2f9426120f600002e/xlarge/063696_002.jpg?1424778295" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<img src="http://www.tnetnoc.com/dealsImages/landingPages/destinationLandingPages/other/Sydney-345x225.1.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
</div>
I don't think that you need a div for every image. Enough to have one main container for them. Try to set 2 different classes, on one of them use float:left and on the other float:right , that way they will be in the same line.
Try looking at this page http://www.w3schools.com/html/html_images.asp "image floating" and test it out to understand how it works.
I have this div:
<section id="categorias">
<div class="container content-section">
<div class="row">
<div class="col-md-3">
<img class="img img-responsive" src="img/catmusica.png"></img>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/catpaisajes.png"></img>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/catgrafiti.png"></img>
</div>
<div class="col-md-3" >
<img class="img-responsive" src="img/catpoly.png"></img>
</div>
</div>
</div>
</section>
That looks like this:
And I want to maintain the 4 columns or at least 2 above and 2 below when I shrink the window but this happens:
I have only bootstraps css.
Thanks
You should also add grid system classes for smaller screens - col-sm-3 and col-xs-3. See following code:
<section id="categorias">
<div class="container content-section">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img img-responsive" src="img/catmusica.png"></img>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="img/catpaisajes.png"></img>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="img/catgrafiti.png"></img>
</div>
<div class="col-md-3 col-sm-3 col-xs-3" >
<img class="img-responsive" src="img/catpoly.png"></img>
</div>
</div>
</div>
</section>
working example
If you want to have only 2 columns on smaller screens then you need to apply this classes on div wrapping images:
<div class="col-md-3 col-sm-6 col-xs-6">
<img class="img img-responsive" src="img/catmusica.png"></img>
</div>