Here's a problem I have. Please resize the window from XS to LG to see the problem.
http://www.bootply.com/ViRGDgxLoQ
In LG mode, everythings good.
In XS mode, everythings good.
MD mode is not good on the last set of panels. I was expecting panel 3 to be below panel 1 even if it brings it down a little.
I can't make 2 different because it'll break for logic for LG screens.
Is that possible?
You need another wrapper, something like this:
<div class="container">
<h2>Obvious Behavior</h2>
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">Title1</div>
<div class="panel-body">Content here1..</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">Title2</div>
<div class="panel-body">Content here2..</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">Title3</div>
<div class="panel-body">Content here3..</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">Title4</div>
<div class="panel-body">Content here4..</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Desired Behavior</h2>
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">Title1</div>
<div class="panel-body">Content here1..</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">Title2</div>
<div class="panel-body">Content here2..<br>Content here2..<br>Content here2..</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">Title3</div>
<div class="panel-body">Content here3..</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">Title4</div>
<div class="panel-body">Content here4..</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Bad Behavior</h2>
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="panel panel-success">
<div class="panel-heading">Title1</div>
<div class="panel-body">Content here1..<br>Content here1..<br>Content here1..</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="panel panel-success">
<div class="panel-heading">Title2</div>
<div class="panel-body">Content here2..</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="panel panel-success">
<div class="panel-heading">Title3</div>
<div class="panel-body">Content here3..</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="panel panel-success">
<div class="panel-heading">Title4</div>
<div class="panel-body">Content here4..</div>
</div>
</div>
</div>
</div>
</div>
Forked your code
Related
How can I display my Hello-div-2 after Hello-div-3 in small screen?
Right now the flow is
Hello-div-1, Hello-div-2, Hello-div-3, Hello-div-4.
It should be
Hello-div-1, Hello-div-3, Hello-div-2, Hello-div-4.
<div class="container">
<div class="row">
<div class="col-md-8 col-12 bg-primary">
<h2 class="font-weight-light">Hello-div-1</h2>
</div>
<div class="col-md-4 col-12 bg-success">
<h2 class="font-weight-light ">Hello-div-2</h2>
</div>
</div>
<div class="row">
<div class="col-md-8 col-12 bg-info">
<h2 class="font-weight-light">Hello-div-3</h2>
</div>
<div class="col-md-4 col-12 bg-warning">
<h2 class="font-weight-light">Hello-div-4</h2>
</div>
</div>
</div>
if you can't change structure only solution which i can think of is
<div class="container">
<div class="row">
<div class="col-md-8 col-12 bg-primary">
<h2 class="font-weight-light">Hello-div-1</h2>
</div>
<!-- hide this in small screen -->
<div class="col-md-4 col-12 bg-success">
<h2 class="font-weight-light ">Hello-div-2</h2>
</div>
</div>
<div class="row">
<div class="col-md-8 col-12 bg-info">
<h2 class="font-weight-light">Hello-div-3</h2>
</div>
<!-- show this in small screen -->
<div class="col-md-4 col-12 bg-success">
<h2 class="font-weight-light ">Hello-div-2</h2>
</div>
<div class="col-md-4 col-12 bg-warning">
<h2 class="font-weight-light">Hello-div-4</h2>
</div>
</div>
</div>
Put them all in the same .row and use the .order- classes...
<div class="container">
<div class="row">
<div class="col-md-8 col-12 bg-primary order-0 order-md-0">
<h2 class="font-weight-light">Hello-div-1</h2>
</div>
<div class="col-md-4 col-12 bg-success order-2 order-md-0">
<h2 class="font-weight-light ">Hello-div-2</h2>
</div>
<div class="col-md-8 col-12 bg-info order-1 order-md-0">
<h2 class="font-weight-light">Hello-div-3</h2>
</div>
<div class="col-md-4 col-12 bg-warning order-3 order-md-0">
<h2 class="font-weight-light">Hello-div-4</h2>
</div>
</div>
</div>
https://codeply.com/p/m8sgEDDmp2
I'm trying to set the background-color of card-body in bootstrap 4, however I'm not sure how I can obtain the card-body element as each body has a different parent (I think my understanding of this is correct), is it possible to do this using the below code?
I've put a sample snippet below which shows the paragraphs working, but the cards are not working here:
.bg-alt:nth-child(5n+1){background-color: #5bc0de;}
.bg-alt:nth-child(5n+2){background-color: #ed9c28;}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin ">
<div class="card">
<div class="bg-alt">
98787667f
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
45645656u57u5
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
456456456456
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
123123123
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
123123
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
324234234
</div>
</div>
</div>
</div>
</body>
</html>
The "card-body" is always the ONLY child (never the fifth), as the "nth-child" selector only references immediate siblings.
Try:
.col-xl-2:nth-child(5n+1) .bg-alt {background-color: #5bc0de;}
.col-xl-2:nth-child(5n+2) .bg-alt {background-color: #ed9c28;}
I would like to know if there's a better solution to solve the space problem between the two first columns in this code: https://jsfiddle.net/5vtc1Lhp/#&togetherjs=qkIyJnDkmf
I did try to place div inside div, but the width of the div decreased in the first example ( at the top). At the botton it works fine, but I had to define a padding value in px which I don't like since it's a fixed value and I don't know if this spacement should change automatically.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-12">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
<hr>
Bellow is OK.
<hr>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-8" style="padding: 0 0px 0 30px;">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
Thank you!
Container gives gutter of 30px(15px on left and right)
If you remove the container and give it a row.It will give -15px padding on both sides. And that's what you are looking for, right?
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
I'm trying to do something pretty simple, but still have not been able to figure it out- even with all the snippets I have seen online.
In the following layout I want to span the panel on the right across 3 rows, how can I achieve this?
Here is my html:
<div class="container">
<h1>TEST</h1>
<div class="col-md-2">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
</div> <!--end grid -->
<div class="row
style="height: 300px;"
">
<div class="col-md-8">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Span ME</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
</div>
</div>
</div>
Unless you use JavaScript/jquery to calculate the height of the col-md-2, the only CSS options would be to..
1) Use flexbox sizing..
http://www.bootply.com/125623
The downside is that this is not supported by all browsers (yet)
2) Use height 100% on the "SPAN ME" panel and it's containers..
http://www.bootply.com/125613
The downside is that it's set to 100% height of the browser, not the height of the left col-md-2
Try this code :
<div class="container">
<h1>TEST</h1>
<div class="row">
<div class="col-md-offset-10"></div>
<div class='col-md-2'>
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-10"></div>
<div class='col-md-2'>
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
</div>
</div>
<div class="row">
<div class='col-md-2'>
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Span ME</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
</div>
</div>
Try this it's , the same i just added one panel:
<div class="container">
<h1> TEST </h1>
<div class="row">
<div class="col-md-offset-10"></div>
<div class='col-md-2'>
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-10"></div>
<div class='col-md-2'>
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-10"></div>
<div class='col-md-2'>
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
</div>
</div>
<div class="row">
<div class='col-md-2'>
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footer">
FOOTER
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Span ME</h3>
</div>
<div class="panel-body">
BODY
</div>
<div class="panel-footerenter code here">
FOOTER
</div>
</div>
</div>
</div>
</div>
I have a situation similar to: http://jsfiddle.net/gP5Dg/
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 0, 0</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 0</div>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 1</div>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
(You may have to expand the html sub-window to see what I mean)
I would like for panel 0, 0 to occupy the full height of the containing panel. How can I do this? I am new to css, and have tried setting the min-height of various parts to 100%, but this has not worked.
The contents of these inner panels can vary. It would be useful if I could control the percentage of the total that each panel in a column can take up. I assume there is no way I can do this without some kind of javascript ?
You can use Javascript to redefine the height size of the panel, you need to define the id of the elements:
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="row" id="panel_parent">
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body" id="panel00">Panel 0, 0</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 0</div>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 1</div>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
and then when the document is ready you assign the height of the panel00 with the value of the panel parent:
$(document).ready(function(){
$('#panel00').height($('#panel_parent').height());
});
You can also use a percentage of the size, multiplying it by a value, in this case the 50% you have to multiply by 0.5
$('#panel00').ready(function(){
$('#panel00').height($('#panel_parent').height()*0.5);
});
Without any javascript.
First you must set parent height. then you can set panel heights.
For panel height you should set 100% minus margin and padding (10px )
See: http://jsfiddle.net/Kmhtt/
CSS:
.parentHeight
{
height: 500px; !important;
}
.fullHeight
{
height: calc(100% - 10px); !important;
}
HTML:
<div class="col-md-8 col-md-offset-2 parentHeight">
<div class="panel panel-default fullHeight">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="row fullHeight">
<div class="col-md-6 fullHeight">
<div class="panel-body fullHeight">
<div class="panel panel-default fullHeight">
<div class="panel-body ">Panel 0, 0</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 0</div>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 1</div>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-body">Panel 1, 2</div>
</div>
</div>
</div>
</div>
</div>
</div>