Trouble aligning images and making them same size HTML & CSS - html

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.

Related

How to fix equal column the height problem in bootstrap [duplicate]

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

Bootstrap grid custom layout

I have been learning this design
<section>
<div class="container">
<div class="row">
<div class="row">
<div class="col-lg-12 col-md-12">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<img src="image.png" alt="" class="img-fluid">
</div>
<div class="col-lg-6 col-md-6">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</section>
I am getting the below design
Could you please help me on this design and let me know where am i going wrong?
Thank you

<section>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<img src="image.png" alt="" class="img-fluid">
</div>
<div class="col-lg-6 col-md-6">
<div class="row">
<div class="col-lg-12 col-md-12">
<img src="image.png" alt="" class="img-fluid">
</div>
<div class="col-lg-12 col-md-12">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</section>

How to increase height of first row image in bootstrap

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>

How can I align Bootstrap Columns vertically so that they are the same height?

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;
}

Bootstrap CSS Grid Customize

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>