I am having a problem with bootstrap 3 and some thumbnails where although I'm using the same code and the image sizes are exactly the same the last image row is broken on mobile when in vertical only
Here is the code:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=4">
<img class="img-responsive" src="http://mysite/tn-1_256x300.jpg" alt="">
<div class="text-center text_margin">styling</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=5">
<img class="img-responsive" src="http://mysite/tn-2_256x300.jpg" alt="">
<div class="text-center text_margin">colour</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=6">
<img class="img-responsive" src="http://mysite/tn-3_256x300.jpg" alt="">
<div class="text-center text_margin">extensions</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=7">
<img class="img-responsive" src="http://mysite/tn-4_256x300.jpg" alt="">
<div class="text-center text_margin">hair enhancements</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=8">
<img class="img-responsive" src="http://mysite/tn-5_256x300.jpg" alt="">
<div class="text-center text_margin">smoothing treatment</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=9">
<img class="img-responsive" src="http://mysite/tn-6_256x300.jpg" alt="">
<div class="text-center text_margin">hair up</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="meet-the-team">
<img class="img-responsive" src="http://mysite/tn-7_256x300.jpg" alt="">
<div class="text-center text_margin">meet the team</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="/price-list/">
<img class="img-responsive" src="http://mysite/tn-8_256x300.jpg" alt="">
<div class="text-center text_margin">price list</div>
</a>
</div>
</div><!--end row-->
</div><!--end container-->
This is happening because some of the text below the thumbnails is wrapping, and as a result the thumbnail heights are different. One way to fix this problem is to clear the columns float on mobile with CSS like this..
#media (max-width: 768px) {
.row > .col-xs-6:nth-child(2n+1) {
clear: left;
}
}
Demo 1: http://codeply.com/go/Bgt8JFkPht
Another option (simpler), is to use CSS text-overflow ellipsis on the text DIV's since it's these DIVs that are causing the height to be different on each thumbnail. When the thumbnail heights are the same, the row wrapping is not an issue..
Demo 2: http://codeply.com/go/5uOP4bM5pk
Check your text-margin class, when adding a margin or padding to some items in Bootstrap, you change the width of your columns.
Related
On my page I have lots of elements, which I need to show by several in a row in straight columns. Each element is an image of equal size. When you click on it, on it's place appears icon menu with three items in a row. All elements should be centred horizontally and vertically.
There could be a different number of big images (6, 7, 8 or more) so I want to add them in one row-class.
Now, I think I'm doing everything by bootstrap documentation, but elements logic on the page steel appears to be broken.
What am I doing wrong?
Codepen example
<body>
<div class="container-fluid wrapper">
<div class="row center-block text-center">
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row-fluid center-block text-center pagination-centered">
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
</div>
</div>
</body>
Screenshot of what I get:
Screenshot of what I need:
Please point me in the right direction. Thank you in advance. I was able to done it without bootstrap, b I hope it could be done only by the right usage of bootstrap and elements, because I want to save the adaptive layout.
UPD #LegendaryAks fixed the problem with gap by using <div class="clearfix"></div> after icons element, but problem of centering all elements for the adaptive layout and unknown number of total elements is still open.
UPD2 Centering just one element in the end is not enough, because we need to know how to center from one to max number of elements on the last row, sow that we could load all the elements on a page with no worry for the last row centering.
There you go i think this did the trick . You can check the demo at http://codepen.io/anon/pen/QybXQJ?editors=100
What i did is I added a div with class clearfix after the fourth div. I hope this is what you are looking for
<div class="clearfix"></div>
there the solution using only css:
.center-block-big:nth-child(4n+1) {
clear: left;
}
.center-block-big:last-child {
margin: 0 auto;
float: none;
}
the only thing is that in this example i have removed the col-lg-2 to apply it to all resolution, and edited the class name to only apply to the container of the big images and not the twitter ones.
updated codepen
If you want mantain the space on lg resolution you need to play with the col width a bit in this way:
updated codepen
If you have dynamic elements you can use this to make that only if one element is on a row it will be centered:
.center-block-big:nth-child(4n+1) {
clear: left;
}
.center-block-big:last-child:not(:nth-child(5n)) {
margin: 0 auto;
float: none;
}
.center-block-big:nth-child(4n+2),
.center-block-big:nth-child(4n+3),
.center-block-big:nth-child(4n) {
float: left!important;
}
updated codepen, add .center-block-big elements to see the effect
use col-md-12 instead of col-md-6 at the last element of your design.
Try this:
<div class="col-md-12 center-block text-center pagination-centered link">
<a target="_blank" href="#">VK</a>
</div>
AND
<div class="col-md-12 center-block text-center pagination-centered link">
<a target="_blank" href="#">FB</a>
</div>
for vertical align use make a new class
.verticalcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
and use it.
make your HTML structure like below:
First Row..
<div class="row center-block text-center">
<div class="center-block col-md-4">
</div>
<div class="center-block col-md-4">
</div>
<div class="center-block col-md-4">
</div>
</div>
Second Row..
<div class="row center-block text-center">
<div class="center-block col-md-4">
</div>
<div class="center-block col-md-4">
</div>
<div class="center-block col-md-4">
</div>
</div>
I have this div:
<section id="categorias">
<div class="container content-section">
<div class="row">
<div class="col-md-3">
<img class="img img-responsive" src="img/catmusica.png"></img>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/catpaisajes.png"></img>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/catgrafiti.png"></img>
</div>
<div class="col-md-3" >
<img class="img-responsive" src="img/catpoly.png"></img>
</div>
</div>
</div>
</section>
That looks like this:
And I want to maintain the 4 columns or at least 2 above and 2 below when I shrink the window but this happens:
I have only bootstraps css.
Thanks
You should also add grid system classes for smaller screens - col-sm-3 and col-xs-3. See following code:
<section id="categorias">
<div class="container content-section">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img img-responsive" src="img/catmusica.png"></img>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="img/catpaisajes.png"></img>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="img/catgrafiti.png"></img>
</div>
<div class="col-md-3 col-sm-3 col-xs-3" >
<img class="img-responsive" src="img/catpoly.png"></img>
</div>
</div>
</div>
</section>
working example
If you want to have only 2 columns on smaller screens then you need to apply this classes on div wrapping images:
<div class="col-md-3 col-sm-6 col-xs-6">
<img class="img img-responsive" src="img/catmusica.png"></img>
</div>
Usually we can't make <div> center align while working with odd columns. Here is my problem.
This is developed using Bootstrap. I want all inner divs to be in the center. So, when the page is viewed on other devices everything is center-aligned. When viewed at md screen width there is a little space on right side.
I want three columns at md and lg widths, two columns at sm widths, and one column at xs width. On all viewports, it should be center-aligned.
Here is my markup:
<div class="container-fluid">
<div class="row-fluid">
<div class="fleet_bor col-lg-4 col-md-4 col-sm-4 col-xs-12 col-centered">
<a href="http://someurl.com/gulfstream-iii/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/III-01-300x240.jpg" />
</a>
<h4>Gulfstream III</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="http://someurl.com/gulfstream-iv-sp-1/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/V2-1-300x240.jpg" />
</a>
<h4>Gulfstream V2</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="http://someurl.com/gulfstream-iv-sp-1/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/FLEET_SP1.jpg" />
</a>
<h4>Gulfstream SP1</h4>
</div>
<div>
</div>
I have found a best solution regarding this, i have this issue due to odd number of columns so i just added a span column on left and right side and the working columns in middle, that it solved my problem!, here is code what i did.
<div class="entry-content">
<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs"></div>
<div class="col-lg-10 col-md-10 col-sm-11 col-xs-12 moile_fix_">
<div class="fleet_bor col-lg-4 col-md-4 col-sm-6 col-xs-12">
<a href="http://someurl.com/gulfstream-iii/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/III-01-300x240.jpg">
</a>
<h4>Gulfstream III</h4>
</div>
<div class="fleet_bor col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<a href="http://someurl.com/gulfstream-iv-sp-1/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/V2-1-300x240.jpg">
</a>
<h4>Gulfstream V2</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-6 col-xs-12">
<a href="http://someurl.com/gulfstream-iv-sp-1/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/FLEET_SP1.jpg">
</a>
<h4>Gulfstream SP1</h4>
</div>
<div class="fleet_bor col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<a href="http://someurl.com/gulfstream-g550/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/G5500-1-300x244.jpg">
</a>
<h4>Gulfstream G550</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-6 col-xs-12">
<a href="http://someurl.com/gulfstream-v1/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/V1-1-300x240.jpg">
</a>
<h4>Gulfstream V1</h4>
</div>
<div class="fleet_bor col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<a href="http://someurl.com/gulfstream-iv-sp-2/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/FLEET_SP2.jpg">
</a>
<h4>Gulfstream SP2</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-6 col-xs-12">
<a href="http://someurl.com/gulfstream-iv-sp-3/">
<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/FLEET-SP3.jpg">
</a>
<h4>Gulfstream SP3</h4>
</div>
</div>
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs"></div>
</div>
Wrap in outer div and offset the col.
It is not perfect, but it works. You'll need to make the transition fluid as well, but it should help you get everything centered-ish
http://getbootstrap.com/css/#grid-offsetting
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'm trying to make this grid work but I'm not sure what's the best approach here. I have this page with several thumbnails and each thumbnail has a title. The problem is that when the title length is very long it pushes the thumbnail and everything get messy like this:
I would like to find a way to keep thumbnails aligned, so if there is a very long title instead of pushing that thumbnail down, it pushes the whole row.
This is the markup I have so far for this block of thumbnails:
<div class="container">
<div class="content row">
<div class="col-lg-12">
<h1>Fresh Goals and More</h1>
<hr>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title That is Very Long So I Can Test How does Long Titles Behave in My web site display<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<h2>Test Title<h2>
<a class="thumbnail" href="#">
<div class="vignette">
<img class="img-responsive" src="img/placeholder.jpg">
</div>
</a>
</div>
</div><!-- content row close -->
</div><!-- container close -->
Any hint on how can I fix this? Thanks in advance.
this is simple you have to have a row for four thumbs
<div class="row">
<div class="col-md-3">thumb</div><div class="col-md-3">thumb</div><div class="col-md-3">thumb</div>
</div>
<div class="row">
<div class="col-md-3">thumb</div><div class="col-md-3">thumb</div><div class="col-md-3">thumb</div>
</div>
the row will keep the height of the longest column with children thumb
http://www.bootply.com/6C7i5iRZhz