I am having some issues with my CSS four-column table.
When one of the pictures is shorter, it goes out of whack. (see screenshot)
This is the CSS :
#results{background:#fff;padding:0 0 26px}
.result{float:left;width:25%}
.result-cover{border:1px solid #ccc;margin:0 4px 8px;padding:0 0 6px}
.result-img{border:1px solid #ccc;height:auto;margin:9px;overflow:hidden}
.result-img img{display:block;margin:0;width:100%}
.result .row{background:#fff;font:400 16px/20px 'MdCn',Arial,sans-serif;height:18px;overflow:hidden;padding:0 10px;text-transform:uppercase}
.result .row.stripe{background:#f6f9fb}
.result .row:last-child{font-family:'BdCn',Arial,sans-serif}
.prop{color:#373736;float:left;width:40%}
.value{color:#0f92cb;float:right;width:60%}
This is my HTML snippet :
<div id="results" class="clr">
<div id="results-inside" class="clr block">
<div class="result">
<div class="result-cover">
<div class="result-img"><img src="images/res.jpg" alt="" /></div>
<a class="result-title" href="#">31698-1</a>
<div class="result-props">
<div class="row clr">
<div class="prop">Code1:</div>
<div class="value">29A</div>
</div>
<div class="row clr">
<div class="prop">Code2:</div>
<div class="value">24A0</div>
</div>
<div class="row clr">
<div class="prop">Code3:</div>
<div class="value">0</div>
</div>
<div class="row clr">
<div class="prop">Code4:</div>
<div class="value">627A</div>
</div>
</div>
</div>
But when one of the pictures is shorter the alignment goes wonky.
What you could do is add a div around your 4 blocks and float it left and give it a width of 100% that would clear each row.
Solved my issue using :nth-child()
Thank you CBroe.
I realize :nth-child() may not work with older browser.
But that is not an issue for my case.
Thank you
Related
this is my page structure
HTML
<div class="container" style="padding-top:20px">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12" style="height:80px">
1st
</div>
<div class="col-md-12" style="height:50px">
3rd
</div>
<div class="col-md-12" style="height:50px">
5th
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12" style="height:50px">
2nd
</div>
<div class="col-md-12" style="height:40px">
4th
</div>
<div class="col-md-12" style="height:90px">
6th
</div>
</div>
</div>
</div>
</div>
I made a jsFiddle for it
https://jsfiddle.net/ytke8mn3/
I marked the columns with 1st,2nd,3rd,4th,5th,6th
The issue I'm facing is after resizing my page to a certain width in bootstrap below 992px.
I would like the columns to show in this order > 1st,2nd,3rd,4th,5th,6th
rather than 1st 3rd 5th 2nd 4th 6th
How to achieve this. Thanks
I found something that worked for me, it aligned the elements very well for me. I'm happy with it so far. it required a little bit of dom element restructuring(less written code) but that's okay.
<div class="container" style="padding-top:20px">
<div class="row">
<div class="col-md-8" style="height:80px">1st</div>
<div class="col-md-4" style="height:40px">2nd</div>
<div class="col-md-8" style="height:40px">3rd</div>
<div class="col-md-4" style="height:80px">4th</div>
<div class="col-md-8" style="height:80px">5th</div>
<div class="col-md-4" style="height:30px">6th</div>
</div>
</div>
https://github.com/desandro/masonry
I don't know how it is implemented but it's working. below is a jsfiddle
https://jsfiddle.net/p5u976mt/
The outer containers col-md-8 and col-md-4 make it impossible to reorder it the way you want to with https://getbootstrap.com/docs/4.0/layout/grid/#order-classes
You could hide the two outer containers and show a third one only for narrow device-widths with the 6 elements in the right order (would be very easy but a bad practice, because you repeat yourself).
I am not sure what exactly your actual requirement is. You can try the following bootstrap structure to get this ordering correctly.
Fiddle goes here
.row {
background: #f8f9fa;
}
.row > div {
border: solid 1px #6c757d;
}
I am struggling adding spacing (or margin) between columns using the grid system in bootstrap. My html and css is below. I could not get any of the solutions posted online to work. The goal is spacing between col-8 and col-4. Any suggestions? Thanks!
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
hello
</div>
<div class="col-md-4">
<div class="row" align="center">
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_circle_black-128.png" class="icon-resize" alt="github">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_black-128.png" class="icon-resize" alt="linkedin">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_black-128.png" class="icon-resize" alt="twitter">
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
max-width: 960px;
height: 100%;
}
here is what you're looking for:
gridGutterWidth
It's usual to download the raw (.scss or .less) versions of bootstrap, so you can control the css output at build time. If you don't use any of them, you may find the http://getbootstrap.com/customize/ comfortable.
You could apply inline by
<div class="col-md-4" style="padding-left:1em">
I have managed to create a page that looks like this:
<div class="container">
<div class="row fullscreen">
<div class="col-md-6 pink-panel">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 gray-panel">
</div>
</div>
<div class="row">
<div class="col-md-6 orange-panel">
</div>
<div class="col-md-6 black-panel">
</div>
</div>
</div>
</div>
</div>
You can view it here
The problem I have is that I would like to have a small margin between each panel (right and top). If I add top margin I get this:
http://codepen.io/r3plica/pen/jPVQqy
which you can see makes the rows not line up anymore, which is not what I want. Similarly, if I add a right margin, predictably I get this:
http://codepen.io/r3plica/pen/NqbErr
Now I know the reason for both these issues. I could try and write some JavaScript to help me fix the issue, but I would prefer to solve this in pure CSS.
Has anyone encountered this issue before and solved it?
you could nest your color-panels
<div class="container">
<div class="row fullscreen">
<div class="col-md-6">
<div class="col-md-12">
<div class="pink-panel">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="gray-panel">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="orange-panel">
</div>
</div>
<div class="col-md-6">
<div class="black-panel">
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/0z76regv/
You must remember that bootstrap uses specific margins and paddings for its layout (e.g. negative margins for row classes) To fit elements in desired way you should remember that each col-* block has its width described in percentage.
I would suggest two solutions:
Overloading default percentage for columns if you don't mind changing 5px to arbitrary values. You could e.g. set col-md-6 classes to use only 49.5% of its width and remaining 0.5% for margins.
http://codepen.io/anon/pen/QbGJgp
.col-md-6 {
width: 49.5%;
margin-right: 0.5%;
}
.row {
margin-bottom: 0.5%;
}
Using calc() function to substract aforementioned 5px from proper elements. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/calc, however this functionality isn't very compatible with older browsers: http://caniuse.com/#feat=calc.
http://codepen.io/anon/pen/yNVQoz
.col-md-6 {
width: calc(50% - 5px);
margin-right: 5px;
}
My codes can be previewed here (Bootply)
The HTML part looks like this:
<div class="container">
<div class="row">
<a href="#a">
<div class="my-border">
<div class="col-md-3">A</div>
<div class="col-md-3">A1</div>
</div>
</a>
<div class="my-border">
<a href="#b">
<div class="col-md-3">B</div>
<div class="col-md-3">B1</div>
</a>
</div>
</div>
</div>
And the CSS part:
.my-border
{
border: medium double rgb(250,0,255)
}
I want to make borders like this
-----------
|A A1|B B1|
-----------
But I found borders are not shown correctly..
Moreover, I have another two questions:
Is it ok to wrap a <div class="my-custom-class"> between <div class="col-xx"> and <div class="row">. If not, what is the preferred way?
Is it ok to wrap a <a href="my-custom-link"> around serveral <div>s? If not, what might be the preferred way?
Thanks!
Because you miss write the point for my-border class, and you must write the content of columns inner in cols divs.
You can too extends the columns divs with your border class.
Look: http://www.bootply.com/73dXGqF2i5
Try this: Solution
CSS
.my-border
{
border: medium double rgb(250,0,255)
}
HTML
<div class="container">
<div class="row">
<center>
<a href="#a">
<div class="my-border">
<div class="col-md-3">A</div>
<div class="col-md-3">A1</div>
<a href="#b">
<div class="col-md-3">B</div>
<div class="col-md-3">B1</div>
</a>
</div>
</a>
</center>
</br>
<div class="my-border">
</div>
</div>
</div>
My HTML code:
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span12">banner</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
Css:
.span4:nth-child(3n+1){
color: red;
}
In result there must be 1, 4, 7 red colored. But it's not.
Example: http://jsfiddle.net/473UR/
How to solve that problem?
.nth-child works with the consecutive element. If there is any other elements comes in between it starts calculating from the first.
<div class="span4">1</div> <-- this is first-child -->
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span12">banner</div>
<div class="span4">4</div> <-- sequence reset.
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
That's because .span12 counts as a child too. If you remove it, it will work
You need to move your banner div and it will work
EXAMPLE
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
<div class="span12">banner</div>