I have the following grid - http://codepen.io/vmpen/pen/GqrXQz where aspect ratios must be preserved, whilst being responsive. With no padding
the grid behaves correctly.
<div class="container">
<div class="row-fluid">
<div class="col-xs-3 grid-sizer"></div>
<div class="text-center feature feature--full col-xs-12">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/1080x270"></div>
</div>
<div class="text-center feature feature--width2 col-md-6 col-sm-12">
<div class="img-wrapper height2"><img class="img-responsive" src="https://placehold.it/540x540"></div>
</div>
<div class="col-md-3 col-sm-6 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-3 col-sm-6 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-3 col-sm-6 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-3 col-sm-6 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-3 feature">
<div class="img-wrapper height2"><img class="img-responsive" src="https://placehold.it/270x540"></div>
</div>
<div class="col-md-3 feature">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/270x270"></div>
</div>
<div class="col-md-6 feature feature--width2">
<div class="img-wrapper"><img class="img-responsive" src="https://placehold.it/540x270"></div>
</div>
<div class="col-md-9 feature feature--width3 feature--width3">
<div class="img-wrapper last"><img class="img-responsive" src="https://placehold.it/810x270"></div>
</div>
</div>
</div>
When items are padded the height of images do not compensate for the padding, making the grid misaligned.
I have managed to fix this with setting a fixed height but that breaks the responsiveness of the grid and aspect ratios. Can someone point me to some well established techniques to solve this problem. As a final point I have tried various masonry solutions to no avail. My problem is quite similar to this - https://github.com/metafizzy/isotope/issues/877
I came across this answer - How to use border with Bootstrap
outline: #fff solid 10px;
It provides the same affect for borders around the image but isn't calculated by the browser when rendering containers.
Related
I am new to bootstrap and I'm stuck on the following problem:
In mobile, I want "big-guy" to occupy the whole width and the "small-guys" to be evenly positioned underneath it. So far so good.
The problem is: in medium displays, I want the "big-guy" to occupy 75% of the width and the small-guys should be placed on its left, stacked on top of each other.
So far, this is the code I have, I would like to keep this structure if possible.
<div class="row">
<div id="big-guy" class="col-sm-12"></div>
<div id="small-guy-1" class="col-sm-4"></div>
<div id="small-guy-2" class="col-sm-4"></div>
<div id="small-guy-3" class="col-sm-4"></div>
</div>
Image for reference:
You would use nesting and the appropriate responsive grid sizes...
<div class="row">
<div id="big-guy" class="col-sm-9 py-sm-0 py-3">
</div>
<div class="col-sm-3">
<div class="row">
<div id="small-guy-1" class="col-4 col-sm-12">
</div>
<div id="small-guy-2" class="col-4 col-sm-12 py-sm-4 py-0">
</div>
<div id="small-guy-3" class="col-4 col-sm-12">
</div>
</div>
</div>
</div>
Responsive demo
Here it is.
<div class="container">
<div class="row">
<div class="col-md-9 pt-5">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2019/12/26/11/04/new-years-day-4720210_960_720.jpg" title="" alt="">
</div>
<div class="col-md-3">
<div class="row pt-5">
<div class="col-4 col-md-12 col-sm-4">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2013/02/21/19/14/firecracker-84715_960_720.jpg" title="" alt="">
</div>
<div class="col-4 col-md-12 col-sm-4">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2013/02/21/19/14/firecracker-84715_960_720.jpg" title="" alt="">
</div>
<div class="col-4 col-md-12 col-sm-4">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2013/02/21/19/14/firecracker-84715_960_720.jpg" title="" alt="">
</div>
</div>
</div>
</div>
</div>
I'm creating project based in html and css. I have created this code in bootstrap inside a container and I want this to be responsive.
<div class=" container">
<div class="row">
<div class="col-md-12 col-sm-12 client "> <b>SEI GIÀ CLIENTE? ACCEDI </b>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3"></div>
<div class="col-md-3 col-sm-3 labelField">
<div class="row">
<div class="col-md-4 col-sm-4 labelField">
<strong><br>EMAIL</strong>
</div>
<div class="col-md-8 col-sm-8">
<input class="ut" type="mail">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3"></div>
<div class="col-md-3 col-sm-3 labelField">
<div class="row">
<div class="col-md-4 col-sm-4 labelField">
<strong><br>PASSWORD</strong>
</div>
<div class="col-md-8 col-sm-8">
<input class="ut" type="mail">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3 "></div>
<div class="col-md-6 col-sm-6 col-xs-6 pass"> Hai dimenticato la password?
</div>
<div class="col-md-3 col-sm-3 col-xs-3"></div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<a href="#">
<img src="images/entra.png" class="img-responsive registrati ">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<a href="#">
<img src="images/fb.png" class="img-responsive registrati ">
</a>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="divider"></div>
</div
Here is my css:
.registrati {
margin-top: 20px;
margin-left: 338px;
margin-bottom: 8px;
width: 33%px;
}
.pass {
font-style: Arial black;
color: black;
font-size: 0.8em;
margin-left: 339px;
margin-bottom: 20px;
margin-top: 20px;
text-decoration: underline;
}
Here is what my result should look like:
The result is not responsive. My question is have I done something wrong or bootstrap doesnt let me to modify the classes as I did? So what should I do to make this responsive?
All the scripts and links required for responsivity are in my page but not here for a shorter demo. Thanks!
I can't run your snippet on my Mac but just by looking at your code, I would remove width: 80%; height: 100%; If you really want it to be responsive the "bootstrap way", try letting it handle your div containers in terms of sizes first. Have you tried that?
Looks fine in terms of responsiveness without your stylesheet: https://jsfiddle.net/DTcHh/23755/
EDIT: those margins seem pretty large? Maybe it just looks like it's not responsive because of the huge margins. Can you maybe provide a sketch of what it should look like?
EDIT2: Here is my answer: https://jsfiddle.net/DTcHh/23757/ I cleaned it up a bit. Your problem was that you had way too many divs and columns; you should check out Bootstrap's grid documentation again and use col-md-offset if you want to offset things by design.
First of all I am assuming that you have included bootstrap css and js properly. Going further you don't need additional css for making your page responsive. Bootstrap does that. Always remember bootstrap has 12 columns in a row. So u need to use it properly for your page to show responsiveness.
<div class="container contain">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-2 col-xs-12 text-center">
<a href="#">
<img src="https://www.google.co.in/logos/doodles/2016/2016-doodle-fruit-games-day-12-5125886484414464.3-scta.png" class="registrati img-responsive">
</a>
</div>
<div class="col-lg-6 col-md-4 col-sm-8 col-xs-12 pass text-center">
<a href="https://www.google.co.in/logos/doodles/2016/2016-doodle-fruit-games-day-12-5125886484414464.3-scta.png">
Hai dimenticato la password?
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-2 col-xs-12 text-center">
<a href="#">
<img src="https://www.google.co.in/logos/doodles/2016/2016-doodle-fruit-games-day-12-5125886484414464.3-scta.png" class="registrati img-responsive">
</a>
</div>
</div>
</div>
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 want the 2 elements in the center to be aligned.
I thought that if the first row has: item(1 col)-item-(2 col)-item(offset 1) and second row has: item(offset 4) they will be aligned but they are not.
Could this be because of margins?
How can I make div of header.png and div of data.title vertically aligned?
The code
<div class="row">
<div class="col-xs-1 col-xl-1 profile-image-container">
<img class="img-responsive" src="{{data.owner_image}}"/>
</div>
<div class="col-xs-2 col-xl-2">
<p>#{{data.owner_nick}}</p>
</div>
<div class="col-xs-2 col-xl-2 col-xs-offset-2 col-xl-offset-2 ">
<img class="img-responsive" src="/img/moment/header.png"/>
<!--<div class="moment-header-image"</div>-->
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xl-4 col-xs-offset-4 col-xl-offset-4 moment-title">
<p>{{data.title}}</p>
</div>
</div>
Edit:
Although accepting the answer accepted, all suggestions work. profile-image-container plays with the margins and that's what is causing the problems
<div class="row">
<div class="col-xs-1 col-xl-1 profile-image-container">
<img class="img-responsive" src="{{data.owner_image}}"/>
</div>
<div class="col-xs-2 col-xl-2">
<p>#{{data.owner_nick}}</p>
</div>
<div class="col-xs-2 col-xl-2">
<img class="img-responsive" src="/img/moment/header.png"/>
<!--<div class="moment-header-image"</div>-->
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xl-4"></div>
<div class="col-xs-4 col-xl-4 moment-title">
<p>{{data.title}}</p>
</div>
</div>
As specified in the link css vertical align you can use css for vertically aligning the div.
div.class {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
I have slightly simplified you code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-1">
<img class="img-responsive" src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif" />
</div>
<div class="col-xs-2">
<p>Nick</p>
</div>
<div class="col-xs-2">
<img class="img-responsive" src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif" />
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-3">
<p>Title</p>
</div>
</div>
</div>
It's available on this JS Fiddle.
It seems to do exactly what you needed.
What version of bootstrap are you using? Some older versions didn't have col-xs-offset-* classes (as stated in this question).
Apart from that, pay attention to size of your viewport. I usually only use col-xs-* only.
Last, check your custom (non-bootstrap) CSS. Perhaphs the override some rules?
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>