I need the images be in the same height and at the same time responsive, but I don't understand how to do this.
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="container">
<div class="row" style="text-align: center">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img style="width : 100%" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc3/t1/1743484_1417876895127107_960615052_n.jpg" alt="" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img style="width : 100%" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1/1016354_762185537132820_936517474_n.jpg" alt="" />
</div>
</div>
</div>
</div>
http://jsfiddle.net/G26mN/
try this one:
img {
width: inherit; /* Make images fill their parent's space. Solves IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto; /* Add !important if needed. */
}
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="container">
<div class="row" style="text-align: center">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img class="img-responsive" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc3/t1/1743484_1417876895127107_960615052_n.jpg" alt="" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img class="img-responsive" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1/1016354_762185537132820_936517474_n.jpg" alt="" />
</div>
</div>
</div>
</div>
Related
I got this task using bootstrap my task
that's my code that I tried:
https://snipboard.io/aA8pfb.jpg
<body> <div class="container">
<div class="row" style="height: 300px">
<div class="col-lg-6 col-sm-8 h2 bg-primary">1</div>
<div class="mid w-50">
<div class="row ml-0 pb-2" style="height: 150px">
<div class="col-lg-4 col-sm-6 h2 bg-success">2</div>
<div class="col-lg-4 col-sm-6 h2 bg-danger">3</div>
</div>
<div class="row ml-0" style="height: 150px">
<div class="col-lg-4 col-sm-6 h2 bg-warning">4</div>
<div class="col-lg-4 col-sm-6 h2 bg-secondary">5</div>
</div>
</div>
</div>
</div>
and it didn't work that's the result I got using this code:
https://snipboard.io/YVRg84.jpg
What did I do wrong? How can I make it responsive like this picture? And why do my code got space that I can't get rid of between the two rows?
Thank you!
try this -
<div class="container">
<div class="row" style="height: 300px">
<div class="col-lg-6 col-12 h2 bg-primary">1</div>
<div class="mid w-50 col-12 col-lg-6 ">
<div class="row ml-0 pb-2" style="height: 150px">
<div class="col-lg-4 col-sm-6 h2 bg-success">2</div>
<div class="col-lg-4 col-sm-6 h2 bg-danger">3</div>
</div>
<div class="row ml-0" style="height: 150px">
<div class="col-lg-4 col-sm-6 h2 bg-warning">4</div>
<div class="col-lg-4 col-sm-6 h2 bg-secondary">5</div>
</div>
</div>
</div>
also to remove spacing you probably are using height incorrectly please inspect your code in the browser and experiment with the heights of the div , it will fix your spacing problem .
i have problem in Bootstrap Thumbnails.
my thumbnails is like that:
img01. but want to be horizontal.
What am i doing ?
My Code:
HTML:
<div class="hrs" align="center">
<div class="row">
<div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
<div class="thumbnail">
<img src="img/AxMahsool.jpg" alt="AxMahsool01" class="img-responsive" />
<img src="img/AxMahsool.jpg" alt="AxMahsool02" class=" img-responsive" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
<div class="thumbnail">
<img src="img/AxMahsool.jpg" alt="AxMahsool03" class=" img-responsive" />
<img src="img/AxMahsool.jpg" alt="AxMahsool04" class=" img-responsive" />
</div>
</div>
</div>
</div>
Css:
.hrs{
display: table;
margin: 0 auto;
padding: 20px;
color: white;
It's because you have them in separate <div class="row"> containers. What you should do is put all of your images in the same row container(so take out the second <div class="row">) -and/or- try adding this code to your CSS:
.thumbnail>img { display: inline-block; }
I have the following code:
<div class="row second-row">
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
</div>
When we have a big screen, al the images show side by side on the same row, and when I go to a smaller screen they stack one on top of the other.
How can I make a break between each image? I need it to have a white space like each image was on a different row.
I tried adding <br> that were only visible with xs or sm but it didn't work. Is this possible in a simple way, or should I add paddings on a media query?
Try this and see if it works.
<div class="row second-row">
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-xs-1 visible-xs">
<br/>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-xs-1 visible-xs">
<br/>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-xs-1 visible-xs">
<br/>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
</div>
#media only screen and (max-width : 768px) {
.col-class-here {
margin-top: 15px;
}
}
Why would there be a problem with doing this? Pretty much what you suggested yourself. This IS a simple way.
I'm not sure if I'm doing anything wrong but I'm getting a weird bug in a bootstrap grid when I resize my browser. It happens in a matter of a pixel and stops when I keep resizing. One of the images in the grid gets out of place and goes to the bottom. I'll attach a picture of the fail and another one of the normal.
Does anyone know what this bug is and how to fix it?
this is my code:
<section class="container-fluid">
<div class="row">
<div class="col-xs-12"> <img id="imgClickAndChange" src="img.jpg" onclick="changeImage(1)"/> </div>
</div>
<div class="row no-pad">
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img1.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img2.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img1.jpg"/>
</div>
</div>
<div class="row no-pad">
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img2.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img1.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img.jpg2"/>
</div>
</div>
</section>
Only css I used:
Btw it's a customized bootstrap (but the only thing I customized was the min width for a large screen from 1200px to 1900px and removed the grid glutter)
.grid { width: 100%;}
Thank you.
With Bootstrap, try applying the class img-responsive to your images to ensure they never exceed 100% width of their parent.
<img class="img-responsive" src="img1.jpg"/>
Documentation: http://getbootstrap.com/css/#images
If all the images are the same size, there is no issue:
https://jsbin.com/muzug/1/
https://jsbin.com/muzug/1/edit?html,css,output
Also, not necessary to have the col-xs-12, it will always be 100% under the last min-width class used.
Added a rounding error correction.
CSS:
.row.no-pad img {width:100.1%;}
.row.no-pad [class*="col-"] {padding:0;margin-bottom:-1px}
HTML
<section class="container-fluid">
<div class="row no-pad">
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
</div>
</div>
I want to center my images inside the Bootstrap grid like this - http://i.imgur.com/weTvp5Q.jpg; the image should be centered in the blue box (both on desktop and mobile).
here's my html:
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="image img-responsive">
<img class="img-responsive " src="http://i.imgur.com/GFZbJZr.jpg" border="0">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="image img-responsive">
<img class="img-responsive " src="http://i.imgur.com/pJF2nvM.jpg" border="0">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="image img-responsive">
<img class="img-responsive " src="http://i.imgur.com/JYYrpgD.jpg" border="0">
</div>
</div>
</div>
Just use the Bootstrap 3 center-block class in your images...
Demo: http://bootply.com/104077
I also simplfied your markup to remove unnecessary nesting..
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://i.imgur.com/GFZbJZr.jpg" border="0">
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://i.imgur.com/pJF2nvM.jpg" border="0">
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://i.imgur.com/JYYrpgD.jpg" border="0">
</div>
</div>
should be just a matter of css
.image a {
display: block;
}
.image a img {
margin 0 auto;
display: block;
}
Try this.
img {
margin:0 auto;
width:50%
}
This will do the trick ;)
.image.img-responsive {
text-align: center;
}
Try to add in your css:
div.image {
text-align: center;
}