I am trying to wrap the last content using border, but when I resize the window border wraps above content too?
<div class="row">
<div class=" col-xs-6 col-sm-3 ">
<img src="image/1.png" class="img-responsive center-block" >
</div>
<div class=" col-xs-6 col-sm-3 ">
<img src="image/2.png" class="img-responsive center-block" >
</div>
<div class=" col-sm-6 clearfix" id="t">
<div class="col-xs-7 ">
<h3>hello</h3>
Add
</div>
<div class="col-xs-5 ">
<img src="image/t.png" class="img-responsive pull-right">
</div>
</div>
</div>
I am using following css
#t{
border: 5px solid rgb(232,226,226);
}
I presume you mean at small screen sizes, it's not behaving as you'd like. The problem is you're not telling bootstrap how to treat that div when the screen is below 768 pixels. Try this:
<div class=" col-xs-12 col-sm-6 clearfix" id="t">
Note I've just added the .col-xs-12 class. Works for me in a quick test.
Related
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 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.
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 hope this image can help me describe what I mean. I want to make the arrow and the boxes inline without the vacant space on the right. you can notice that the left most box is alligned on the white box on top, that is also what I want to achieve in the right. I will attach my code so you can see how did I do this.
Note: I updated the image above. There is a white box on top and under this 4 boxes. I need to align the eplay box to the white box above it and under it. also align the slide show demo box on the white box above and below it. Plus evenly space and size. And after eplay demo, theatre script demo, and audio speech demo box I need to put an arrow image in between. like this image below but need the right side box align to the top white box and under it.
<!--===================DEMOS ==================-->
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 container-nopads" style="">
<div class="col-sm-2 col-md-2 col-lg-2 " >
<div class="demo-box col-sm-12 col-xs-12" id="demo-pdf">
<a href="/versebuster2/eplay/eplay-demo.php" style="text-decoration:none;">
<h4><strong>ePlay Demo</strong></h4><br><br><br>
<img src="images/hovers/pdf-512.png" >
</a>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
<img src="images/arrow-right.png" class="img-responsive" >
</div>
<div class="col-sm-2 col-md-2 col-lg-2 " >
<div class="demo-box col-sm-12 col-xs-12" id="demo-doc">
<h4><strong>Theatre Script Demo</strong></h4><br><br>
<img src="images/hovers/doc-512.png" class="">
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
<img src="images/arrow-right.png" class="img-responsive" >
</div>
<div class="col-sm-2 col-md-2 col-lg-2 " >
<div class="demo-box col-sm-12 col-xs-12" id="demo-mp3">
<h4><strong>Audio Speech Demo</strong></h4><br><br>
<img src="images/hovers/mp3-512.png" class="">
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
<img src="images/arrow-right.png" class="img-responsive" >
</div>
<div class="col-sm-2 col-md-2 col-lg-2 " >
<div class="demo-box col-sm-12 col-xs-12" id="demo-pdf">
<a href="data/pdf/ePlayPPPDemo.pdf" target="_blank" style="text-decoration:none; ">
<h4><strong>Slide Show Demo</strong></h4><br><br><br>
<img src="images/hovers/pdf-512.png" class="">
</a>
</div>
</div>
</div>
</div>
<!--===================END DEMOS ==================-->
Use a .col-md-3 class for this case:
.col-md-3 .inner {margin: 5px; background: #99f; text-align: center;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-3">
<div class="inner">One</div>
</div>
<div class="col-md-3">
<div class="inner">Two</div>
</div>
<div class="col-md-3">
<div class="inner">Three</div>
</div>
<div class="col-md-3">
<div class="inner">Four</div>
</div>
</div>
</div>
Preview:
I am using Bootstrap and trying to achieve the following with thumbnails.
I the div #demo reaches its max height then make anything after this height overflow horizontally and enable a scrollbar horizontally. I tried overflow-x:auto and other tricks but the div overflows vertically. Any ideas on how to do this?
<div class="row">
<a class="col-md-6 col-xs-12" href="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg">
<div class="thumbnail">
<img src="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg" alt="...">
</div>
</a>
<div id="demo" style="overflow-y: auto; max-height: 430px;">
<a class="col-md-4 col-xs-4" href="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg">
<div class="thumbnail">
<img src="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg" alt="...">
</div>
</a>
.....
</div>
</div>
Have a look here: Create horizontally scrolling List Item view using Bootstrap Columns
And also look this sample: http://jsfiddle.net/V5zWT/10/
<div class="DocumentList">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">aaa</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">aaa</div>
</div>
</div>