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>
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 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 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>
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 am trying to display 3 images in a row with a title, some text underneath the title and a button. I have tried doing this in bootstrap only to get the text moving all over the place. This seems like the only way I could get the text to stay put, but now as you can see my images are stacked on top of each other rather than next to each other. Any help would be appreciated!
<section class="part2">
<div class="container">
<div class="row">
<div class="text-center">
<img alt="" class="resize-image" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Teach</p>
<img alt="" class="resize-image" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Read</p>
<img alt="" class="resize-image" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Play</p>
</div>
</div>
</div>
this is what it looks like now
i am trying to get it to look something like this
You will need to add grids to your rows. This should work
<section class="part2">
<div class="container">
<div class="row">
<div class="col-md-4">
<img alt="" class="resize-image center-block" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
<p class="text-center">Teach</p></div>
<div class="col-md-4"><img alt="" class="resize-image center-block" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
<p class="text-center">Read</p></div>
<div class="col-md-4"><img alt="" class="resize-image center-block" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg" />
<p class="text-center">Play</p></div>
</div>
</div>
</section>
Please use this example. You need to use bootstrap grid classes like "col-md-x" where x is number from 1 to 12.
<section class="part2">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img alt="" class="resize-image" id="image2" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Read</p>
</div>
<div class="col-md-4 text-center">
<img alt="" class="resize-image" id="image1" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Teach</p>
</div>
<div class="col-md-4 text-center">
<img alt="" class="resize-image" id="image3" src="/wp-content/themes/creativeforces/images/kid2.jpg">
<p>Play</p>
</div>
</div>