Avoid scrollbars next to sticky part - css

When using position: sticky to get a sticky header in tables the scrollbar still does cover the part that is sticky.
.container {
display: table;
}
.header-row {
display: table-header-group;
position: sticky;
top: 0;
}
.body-row {
display: table-row;
}
.body, .header {
display: table-cell;
padding: 5px;
border: 1px solid black;
min-width: 100px;
}
.header {
background-color: greenYellow;
}
<div class="container">
<div class="header-row">
<div class="header">Header</div>
<div class="header">Header</div>
<div class="header">Sticky header should not have scrollbar on its right side</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
<div class="body-row">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>
</div>
Is it possible to have it positioned only for the scrollable part (body table, none for header/footer)?

Related

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

Best approach to divide Bootstrap grid columns

I have divided my Bootstrap grid columns following way.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="col-md-12">B1</div>
<div class="col-md-12">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="col-md-12">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
Please find below of visual layout of this code.
Is my approach of dividing grid columns correct or wrong?

Always wrap your column inside a row to avoid any css break when resizing/or something like that
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A </div>
<div class="col-md-6">B
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C </div>
</div>
</div>

You should add row divs for children inside B.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>

Just add an row div inside B for every line of columns inside: b, b1.1, b1.2 and b2.1, b2.2. This should help.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class='row'>
<div class="col-md-12">B1</div>
</div>
<div class='row'>
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class='row'>
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>

You should always wrap your columns inside the row for better layout without spacing in the columns or clearfix for layout with spacing:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="clearfix">
<div class="col-md-12">B1</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
You might be interested to see this Q/A, Remove padding from columns.

Bootstrap more then 12 units [duplicate]

This question already has answers here:
Bootstrap 3 - Use more than 12 columns in a row
(3 answers)
Closed 4 years ago.
sometimes it works perfect, sometimes i have big problems with the following ..
Can i write it like this?
<div class="container">
<div class="row">
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
</div>
</div>
Or does i have to seperate each "row"?
<div class="container">
<div class="row">
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
<div class="col-md-4">
Testing ...
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
Testing ...
</div>
</div>
</div>
in my current project the floating issn't correct so that the last column doesnt have the right margin..

Either you can use smaller units instead of larger ones, i.e., .col-md-3 instead of .col-md-6 or use fluid layout.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");
<div class="container-fluid">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
<div class="col-md-4">
<div class="row-fluid">
<div class="container-fluid">
Col
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Your first example reacts exactly as it should. Any time you have more than 12 cols, the offending cols bump down to the next row (not .row which is different). Because you have 16 cols, the last group of 4 sits on next row.
To fit 16 sections on a single visible row (again, not .row), you will need to nest columns like so:
http://www.bootply.com/2VfLJXjcXt
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test1
</div>
<div class="col-md-3">
Test2
</div>
<div class="col-md-3">
Test3
</div>
<div class="col-md-3">
Test4
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test5
</div>
<div class="col-md-3">
Test6
</div>
<div class="col-md-3">
Test7
</div>
<div class="col-md-3">
Test8
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test9
</div>
<div class="col-md-3">
Test10
</div>
<div class="col-md-3">
Test11
</div>
<div class="col-md-3">
Test12
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-3">
Test13
</div>
<div class="col-md-3">
Test14
</div>
<div class="col-md-3">
Test15
</div>
<div class="col-md-3">
Test16
</div>
</div>
</div>

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

Resources