Bootstrap 3: Span rows in a grid - css

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>

Related

Is there a way to equally level the <div class ="card"> in bootstrap?

I'm struggling on how to level this card equally to each other:
As you can see in the picture below. The card for the top reason for downtime doesn't match what is on the other cards or vice-versa. I want them to on the same height with each other regardless of what is inside on them.
Below is my code:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Reason for downtime
</h5>
<div class="card-body">
<ul id="top5Downtime">
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Down Terminals:
</h5>
<div class="card-body">
<ol id="mostDown">
</ol>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow mb-4">
<h5 class="card-header">
Top Up Terminals:
</h5>
<div class="card-body">
<ol id="mostUp">
</ol>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="bar-chart">
</div>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="lineChart">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card shadow mb-3">
<h5 class="card-header">
Planned vs Unplanned Event
</h5>
<div class="card-body">
<div id="pieChart"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow mb-3">
<h5 class="card-header">
Downtime vs Uptime
</h5>
<div class="card-body">
<div id="pieChart2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart2">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart3">
</div>
</div>
</div>
</div>
</div>
<!--END OF div.row-->
<!--END OF div.row-->
</div>
I've tried using the align-self-stretch but it only broke my design. How could I proceed?

Applying display: flex (or .d-flex class) to each of the .cols in same row will make them have equal height:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Reason for downtime
</h5>
<div class="card-body">
<ul id="top5Downtime">
</ul>
</div>
</div>
</div>
<div class="col-md-5 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Down Terminals:
</h5>
<div class="card-body">
<ol id="mostDown">
</ol>
</div>
</div>
</div>
<div class="col-md-4 d-flex">
<div class="card shadow mb-4 w-100">
<h5 class="card-header">
Top Up Terminals:
</h5>
<div class="card-body">
<ol id="mostUp">
</ol>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="bar-chart">
</div>
</div>
</div>
</div>
</div>
<!--End of div.row-->
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="lineChart">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 d-flex">
<div class="card shadow mb-3 w-100">
<h5 class="card-header">
Planned vs Unplanned Event
</h5>
<div class="card-body">
<div id="pieChart"></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="card shadow mb-3 w-100">
<h5 class="card-header">
Downtime vs Uptime
</h5>
<div class="card-body">
<div id="pieChart2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart2">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow mb-5">
<div class="card-body">
<div id="barChart3">
</div>
</div>
</div>
</div>
</div>
<!--END OF div.row-->
<!--END OF div.row-->
</div>
You also have to apply .w-100 to cards inside .d-flex cols, to make them stretch to full column width on smaller responsiveness intervals.
Important note: this solution relies on the fact you only have 1 card in each .col. If you have more than one, you'll need to add .flex-column to your .col as well.
But, for your example, .d-flex to .cols is enough.

Bootstrap grid displaying column out of row in small screen

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

how to adjust the column width in bootstrap based in container?

i am creating the layout something like this :
[my layout on paper][1]
but from html and using bootstrap i got following like this :
http://jsfiddle.net/52VtD/7352/
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<div class="sidemargin">
<%--<div>
<span class="verticaltextname1">Project</span>
</div>
<div>
<span class="verticaltextname1">Work History</span>
</div>--%>
</div>
</div>
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
<div class="row">
<div class="col-xs-3">
<div class="topBox">About me</div>
</div>
<div class="col-xs-3">
<div class="topBox">Specialization</div>
</div>
<div class="col-xs-3">
<div class="topBox">Awards</div>
</div>
<div class=" col-xs-3">
<div class="topBox">Testimonials</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="topBox">Project</div>
</div>
<div class="col-xs-3">
<div class="topBox">Description</div>
</div>
<div class="col-xs-3">
<div class="topBox">Achievements</div>
</div>
<div class="col-xs-3">
<div class="topBox">Clients</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="topBox">
WorkedAs
</div>
</div>
<div class="col-xs-6">
<div class="topBox">
Skills
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="topBox">
Responsibilities
</div>
</div>
<div class="col-xs-6">
<div class="topBox">
Work involved
</div>
</div>
</div>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<div class="sidemargin">
</div>
</div>
</div>
</div>
http://jsfiddle.net/52VtD/7352/
how can i adjust the greenyellow column as per my paper starch, and create the same space between each box?

Responsive rows height issue

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

Nested panel height

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>

Resources