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>
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.
Probably I'm missing something or have misinterpreted BS documentation, the html below works as expected if I use text instead of images, as I place the images it breaks on xs and sm.
By expected I mean: 1 row 8 columns on >= md, 2 rows 4 columns on sm, 4 rows 2 columns on xs.
On my browsers (Chrome/Firefox) the behavior seems to be:
first row always correct
second row align the first image to the right and break the line (go to the next line)
Any suggestion?
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
</div>
</div>
i believe its because the height of your divs is different. the image is 50px while the text is slightly less, so when bootstrap puts them in their columns, it sees that the right column is shorter than the left, so it'll put the next image (2nd) under the 1st text block.
if you do something like this it should work.
*in essence, all you have to do is make sure that the heights of the divs are equal
div.text-center{
min-height: 50px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
</div>
</div>
I think I see what you're experiencing. This is a common issue with BS, actually. What's happening is the fifth column has room under the fourth column to squeeze itself in there. You could add a custom class to the columns to set a min-height and force the fifth column down. In other words, since a new row isn't explicitly defined, any columns greater than 12 will squeeze themselves wherever they can go. You can get around this by defining the min-height on a custom class to equal the height of your tallest element in the row.
I think this is what you're seeing: https://jsfiddle.net/ejutc5bf/
Here's my fix:
HTML:
<divhttps://jsfiddle.net/DTcHh/#update class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-1 text-center custom">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center custom">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center custom">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center custom">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center custom">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center custom">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center custom">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center custom">
<span class="stat-title">999</span><br />text
</div>
</div>
</div>
CSS:
.custom{
min-height: 100px;
}
Fiddle
*You'll likely want to make your own custom class and apply it to that. If you apply it to a pre-existing class (text-center, for example) it will apply to ALL of those classes if and when they're used in the future.
The images are likely larger than their container div columns. Try this:
img { max-width: 100% }
In order to make your images responsive, you need to use img-responsive class.
<img class="img-responsive" src="http://placehold.it/50x50" />
See http://getbootstrap.com/css/#images
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