How to change bootstrap columns width - html

how to expand top panels (marked as red) so as to be over the entire width of the page (marked as green)?
All must have the same width.
And second and similiar problem.
I need to add 7th table at the bootom. How to do it, so they all have the same width?
Online demo: bootply
My code is here:
<div class="container-full">
<div class="row clearfix">
<div class="col-md-3 column well">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-9 column">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row clearfix">
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
</div>
<div class="col-md-1 column">
</div>
<div class="col-md-1 column">
</div>
</div>
<div class="row clearfix">
<div class="col-md-1 column">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
</div>
<div class="col-md-1 column">
</div>
<div class="col-md-1 column">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row clearfix">
<div class="col-md-2 column">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 column">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 column">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 column">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 column">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 column">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>


If you have 9 col-md-1 columns it is impossible since they cant be divided by 12 (grid system has 12 parts).
However, you can have 3 col-md-4 additional wrappers and put 3 col-md-4 columns inside each and that should give you the result you ask for.
Something similar to this:
<div class="container-full">
<div class="row clearfix">
<div class="col-md-3 column well">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-9 column">
<div class="col-md-4">
<div class="col-md-4">
...content...
</div>
<div class="col-md-4">
...content...
</div>
<div class="col-md-4">
...content...
</div>
</div>
<div class="col-md-4">
<div class="col-md-4">
...content...
</div>
<div class="col-md-4">
...content...
</div>
<div class="col-md-4">
...content...
</div>
</div>
<div class="col-md-4">
<div class="col-md-4">
...content...
</div>
<div class="col-md-4">
...content...
</div>
<div class="col-md-4">
...content...
</div>
</div>
</div>
</div>
Edit: Fixed spelling mistake to wrapper col-md-3 => col-md-4


I've had to do this on RARE occasion...but when necessary, it can help...but anyway, you can create a custom grid definition so you could have a 7 column grid:
<div class='row grid7'>
<div class='col-md-1'>1/7th</div>
<div class='col-md-1'>1/7th</div>
<div class='col-md-1'>1/7th</div>
<div class='col-md-1'>1/7th</div>
<div class='col-md-1'>1/7th</div>
<div class='col-md-1'>1/7th</div>
<div class='col-md-1'>1/7th</div>
</div>
Then, some CSS to make it work:
.grid7 .col-md-1 { width: 14.285714285714%; }
.grid7 .col-md-2 { width: 28.571428571429%; }
.grid7 .col-md-3 { width: 42.857142857143%; }
.grid7 .col-md-4 { width: 57.142857142857%; }
.grid7 .col-md-5 { width: 71.428571428571%; }
.grid7 .col-md-6 { width: 85.714285714286%; }
.grid7 .col-md-7 { width: 100%; }


This might help
https://github.com/drew-r/bootstrap-n-column
you can create n-column bootstrap layouts using LESS


You can use col-fluid instead in bootstrap then with css specifying its width
HTML
<div class="row">
<div class="col-fluid sidebar">
log in
sign up
</div>
</div>
CSS
.sidebar{
padding-left: 0px;
background-color: #1f1f1f;
min-height: 100vmin;
width: 200px;
}

Related

Adjust card width in bootstrap css

In the following, how do I set all cards to have same widths? I currently see some cards exceeding the specified width because of the the table it is holding. I am viewing it on a laptop.
<main role="main" class="container">
<div class="container">
<div class="main-body">
<div class="row gutters-sm">
<div class="col-md-15">
<div class="card mb-3">
<div class="card-body">
<!-- stuff here-->
</div>
</div>
</div>
</div>
<div class="row gutters-sm">
<div class="col-md-15">
<div class="card mb-3">
<div class="card-body">
<!-- stuff here-->
</div> <!--end of card-->
</div>
</div>
</div>
<div class="row gutters-sm">
<div class="col-md-15">
<div class="card mb-3">
<div class="card-body">
<table class="table mb-0 table-hover">
<thead class="bg-primary">
<tr>
<th scope="col">SSSSSS</th>
<th scope="col">DDDDDD</th>
<th scope="col">FFFFFF</th>
<th scope="col">TTTTTT</th>
<th scope="col">GGGGGGGGG</th>
<th scope="col">AAAAAA</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mb-0"><div class="col-md-1 text-secondary">String 1 </div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">String 2 </div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">String 3</div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">String 4</div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">TTTT </div></td>
<td class="mb-0">
<div class="col-sm-12">
<a class="btn btn-secondary " name="education" href="/edit/2">Edit</a>
<a class="btn btn-danger " name="education" href="/delete/2">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>
<!-- stuff here-->
</div> <!--end of card body-->
</div>
</div>
</div>
</div>
</div>
</main>

How to keep the original position of my table rows (tr) while I'm using Datatable?

I made a collapsible table and I'm using datatable from bootstrap. Unfortunately, it messed up the original position of the rows. It should be like this :
But when i used the datatable, the position changed, the collapsed contents are at the top like this :
Is there a way to maintain the original position while I'm still using datatable? Cause that seems to be the source of the problem.
Here is the HTML of the table and how i called the datatable :
<table id="mytable" class="table table-hover table-light">
<thead>
<tr>
<th scope="col">Kode Transaksi</th>
<th scope="col">Customer</th>
<th scope="col">Total</th>
<th scope="col">Bayar</th>
<th scope="col">Kembali</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>T15072022101</td>
<td>Nama Customer</td>
<td>Rp. 50.000</td>
<td>- Rp. 50.000</td>
<td>Rp. 0</td>
<td>
<div class="col text-left">
<button type="button" class="btn btn-primary" onclick="#">
<span><i class="fa fa-edit"></i>Print</span>
</button>
<button type="button" class="btn btn-link" onclick="#" data-toggle="collapse" data-target="#tr1" aria-expanded="false" aria-controls="tr1">
<span><i class="fa fa-angle-down"></i></span>
</button>
</div>
</td>
</tr>
<tr class="collapse" id="tr1">
<td colspan="6">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-sm text-left">
<p style="font-weight:500">Kasir : Ria</p>
<p style="font-size:12px;color:grey;font-weight:500"></p>
</div>
<div class="col-sm text-right">
<p>Total Barang : 4</p>
</div>
</div>
<table class="table table-hover table-light">
<tbody>
<tr>
<td class="align-middle">1</td>
<td class="align-middle">Nama Barang 1</td>
<td class="align-middle">
<div class="col-sm text-left">
<p style="font-weight:500;font-size:12px;color:grey;">Jumlah</p>
<p style="font-weight:500;">2 pcs</p>
</div>
</td>
<td class="align-middle">
<div class="col-sm text-left">
<p style="font-weight:500;font-size:12px;color:grey;">Harga</p>
<p style="font-weight:500;">Rp. 15.000</p>
</div>
</td>
<td class="align-middle">
<div class="col-sm text-left">
<p style="font-weight:500;font-size:12px;color:grey;">Total</p>
<p style="font-weight:500;">Rp. 30.000</p>
</div>
</td>
</tr>
<tr>
<td class="align-middle">2</td>
<td class="align-middle">Nama Barang 2</td>
<td class="align-middle">
<div class="col-sm text-left">
<p style="font-weight:500;font-size:12px;color:grey;">Jumlah</p>
<p style="font-weight:500;">2 pcs</p>
</div>
</td>
<td class="align-middle">
<div class="col-sm text-left">
<p style="font-weight:500;font-size:12px;color:grey;">Harga</p>
<p style="font-weight:500;">Rp. 10.000</p>
</div>
</td>
<td class="align-middle">
<div class="col-sm text-left">
<p style="font-weight:500;font-size:12px;color:grey;">Total</p>
<p style="font-weight:500;">Rp. 20.000</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding:0rem;"></td>
<td style="padding:0rem;"></td>
<td style="padding:0rem;"></td>
<td style="padding:0rem;"></td>
<td style="padding:0rem;"></td>
</tr>
<tr>
<td>T15072022103</td>
<td>Nama Customer 2</td>
<td>Rp. 100.000</td>
<td>- Rp. 100.000</td>
<td>Rp. 0</td>
<td>
<div class="col text-left">
<button type="button" class="btn btn-primary" onclick="#">
<span><i class="fa fa-edit"></i>Print</span>
</button>
<button type="button" class="btn btn-link" onclick="#" data-toggle="collapse" data-target="#tr2" aria-expanded="false" aria-controls="tr2">
<span><i class="fa fa-angle-down"></i></span>
</button>
</div>
</td>
</tr>
<tr class="collapse" id="tr2">
<td colspan=6>
<div class="row d-flex justify-content-center align-items-center">
<div class="col-sm text-left">
<p style="font-weight:500">Kasir : Maliachi</p>
<p style="font-size:12px;color:grey;font-weight:500"></p>
</div>
<div class="col-sm text-right">
<p>Total Barang : 7</p>
</div>
</div>
<table class="table table-hover table-light">
<tbody>
<tr>
<td class="align-middle">1</td>
<td class="align-middle">Nama Barang 1</td>
<td class="align-middle">
<div class="col-sm text-left">
<p style="font-weight:500;font-size:12px;color:grey;">Jumlah</p>
<p style="font-weight:500;">5 pcs</p>
</div>
</td>
<td class="align-middle">
<div class="col-sm text-left">
<p style="font-weight:500;font-size:12px;color:grey;">Harga</p>
<p style="font-weight:500;">Rp. 10.000</p>
</div>
</td>
<td class="align-middle">
<div class="col-sm text-left">
<p style="font-weight:500;font-size:12px;color:grey;">Total</p>
<p style="font-weight:500;">Rp. 50.000</p>
</div>
</td>
</tr>
<tr>
<td class="align-middle">2</td>
<td class="align-middle">Nama Barang 2</td>
<td class="align-middle">
<div class="col-sm text-left">
<p style="font-weight:500;font-size:12px;color:grey;">Jumlah</p>
<p style="font-weight:500;">2 pcs</p>
</div>
</td>
<td class="align-middle">
<div class="col-sm text-left">
<p style="font-weight:500;font-size:12px;color:grey;">Harga</p>
<p style="font-weight:500;">Rp. 25.000</p>
</div>
</td>
<td class="align-middle">
<div class="col-sm text-left">
<p style="font-weight:500;font-size:12px;color:grey;">Total</p>
<p style="font-weight:500;">Rp. 50.000</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding:0rem;"></td>
<td style="padding:0rem;"></td>
<td style="padding:0rem;"></td>
<td style="padding:0rem;"></td>
<td style="padding:0rem;"></td>
</tr>
</tbody></table>
Here is the JS to call the datatable :
$(document).ready(function () {
$('#mytable').DataTable();
});
Here are the required script for datatable:
<!-- datatables -->
<script
src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script
src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet"
href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap4.min.css">
Any help would be appreciated , thanks!

Element goes outside parrent

I'm having a little problem with my CSS.
If you run the fiddle (had to use fiddle because of StackOverflow body limit), and look at the grey background of CASES.
Then you can see that all the content of Cases is nicely inside it the grey area. But if you click on Casefamily then you will notice that the Casefamily goes outside the grey area. This covers parts of my documentation section.
How can I make the "grey" area expand to its content?
<div id="pvCases_d30dcf2a">
<div class="Cases_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="Controllers_d30dcf2a">
<input class="search_d30dcf2a" placeholder="Search..">
<div class="catchWordContainer_d30dcf2a">
<input class="catchWord_d30dcf2a" placeholder="Catchword">
<div class="catchWordSuggestion_d30dcf2a"></div>
</div>
<div class="dropdown_d30dcf2a">
<div class="selected_d30dcf2a">
<span> Applicant/Proprietor</span><i class="fa fa-caret-down"></i>
</div>
<div class="options_d30dcf2a" style="display: none;">
</div>
</div>
<div class="rightContainer_d30dcf2a">
<button type="button" id="SaveSearchResult">Save</button>
<div class="SearchCollection_d30dcf2a">
<div class="selected_d30dcf2a">
<span> </span><i class="fa fa-caret-down"></i>
</div>
<div class="SearchCollectionOptions_d30dcf2a">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="CaseTable_d30dcf2a">
<table class="table table-striped">
<thead>
<tr>
<th><span>Case Title</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Case Number</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Status</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Case Type</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Family</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Country</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Catchword</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Applicant/Proprietor</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Inventor</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Description</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Classes</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Appl. Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Reg Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Abandoned Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="option_container_d30dcf2a">
<i class="fa fa-cog cog_d30dcf2a"></i>
<div class="cog_options_d30dcf2a">
<div class="row"></div>
<button class="SettingTableOptions_d30dcf2a">Save</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr data-content="{"Id":1,"Title":"Feed for salmonids","Case_Number":"P47931PC01","Status":"Filed","Case_Type":"Parent","Family":"Test","Country":"Denmark","Catchword":"Web","Applicant_x002f_Proprietor":"P47931PC01","Inventor":"Konfab","Description":"<div class=\"ExternalClass4AF54D6F770C4D72987907C1A07DEA48\"><p>​Something<br><br></p></div>","Classes":"dunno","Appl_x002e_Date":"2018-06-21T22:00:00Z","RegDate":"2018-06-21T22:00:00Z","Abandoneddate":null,"Picture":null,"ID":1}">
<td>Feed for salmonids</td>
<td>P47931PC01</td>
<td>Filed</td>
<td class="defaultHidden_d30dcf2a">Parent</td>
<td class="defaultHidden_d30dcf2a">Test</td>
<td class="defaultHidden_d30dcf2a">Denmark</td>
<td>Web</td>
<td>P47931PC01</td>
<td class="defaultHidden_d30dcf2a">Konfab</td>
<td class="defaultHidden_d30dcf2a">
<div class="ExternalClass4AF54D6F770C4D72987907C1A07DEA48">
<p>​Something<br><br></p>
</div>
</td>
<td class="defaultHidden_d30dcf2a">dunno</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">null</td>
<td></td>
</tr>
<tr data-content="{"Id":2,"Title":"case test","Case_Number":"P47931PC02","Status":"Filed","Case_Type":"Parent","Family":"Test","Country":"Denmark","Catchword":"Web","Applicant_x002f_Proprietor":"P47931PC02","Inventor":"Konfab","Description":"<div class=\"ExternalClass3E913664A3344C909C30924BD9212012\"><p>​Something​<br></p></div>","Classes":"dunno","Appl_x002e_Date":"2018-06-21T22:00:00Z","RegDate":"2018-06-21T22:00:00Z","Abandoneddate":null,"Picture":null,"ID":2}">
<td>case test</td>
<td>P47931PC02</td>
<td>Filed</td>
<td class="defaultHidden_d30dcf2a">Parent</td>
<td class="defaultHidden_d30dcf2a">Test</td>
<td class="defaultHidden_d30dcf2a">Denmark</td>
<td>Web</td>
<td>P47931PC02</td>
<td class="defaultHidden_d30dcf2a">Konfab</td>
<td class="defaultHidden_d30dcf2a">
<div class="ExternalClass3E913664A3344C909C30924BD9212012">
<p>​Something​<br></p>
</div>
</td>
<td class="defaultHidden_d30dcf2a">dunno</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">null</td>
<td></td>
</tr>
</tbody>
</table>
<button type="button" class="download_xlsx_d30dcf2a">download as xlsx</button>
</div>
</div>
</div>
</div>
<div class="CaseDetails_d30dcf2a" style="display: block;">
<div class="return_d30dcf2a">
<span> Cases / </span><span>Feed for salmonids</span>
</div>
<div class="CaseDetailContainer_d30dcf2a">
<ul class="tabs_d30dcf2a group">
<li><a class="active_d30dcf2a">Case details</a></li>
<li><a class="">Casefamily</a></li>
</ul>
<div class="box_wrap_d30dcf2a">
<div class="active_d30dcf2a">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Case Number</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">P47931PC01</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Status</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Filed</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Type</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Parent</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Family</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Test</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Country</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Denmark</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Title</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Feed for salmonids</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Applicant/Proprietor</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">P47931PC01</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Inventor</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Konfab</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Description</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">​Something</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Classes</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">dunno</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Appl. date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">21-06-2018</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Reg. Date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">21-06-2018</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Next Renewal</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Abandoned date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Division (subdivision)</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
</div>
</div>
<div class="col-md-3">
<img>
</div>
</div>
</div>
<div class="Casefamily_d30dcf2a">
<table class="table">
<thead>
<tr>
<th>
Case No
</th>
<th>
Name
</th>
<th>
Applicant/Proprietor
</th>
<th>
Appl. date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr class="status_d30dcf2a Filled_d30dcf2a">
<td>
T62039EU02
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Filed
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU03
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Pending_d30dcf2a">
<td>
T62039EU04
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Pending
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU05
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU06
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU07
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

replace position: absolute with position: relative, it will expand parent element
#pvCases_d30dcf2a .CaseDetails_d30dcf2a .CaseDetailContainer_d30dcf2a .box_wrap_d30dcf2a>div {
position: relative;
}

Hello Peter it doesn't respect the parent because it is a table, and tables are not responsive. The best solution is to make the parent div to have a CSS attribute of overflow-x : scroll, to enable people to view all the content and to contain you content.
#pvCases_d30dcf2a .CaseDetails_d30dcf2a .CaseDetailContainer_d30dcf2a
.box_wrap_d30dcf2a>div{
overflow-x : scroll;
}

Placing two rows on the same line with bootstrap elements

I would like to display two rows (tr) on the same line with equal width. I tried adding col-sm-6 to the tds, but it's the trs are getting displayed on two separate lines. Here's the html:
<div className="jumbotron col-sm-12 text-left row">
<div className="panel panel-info">
<div className="panel-heading">
HEADER
</div>
</div>
<table className="table table-bordered table-condensed table-responsive">
<tbody>
<tr>
<td className="col-sm-6 col-centered leftCol">
<div>
{"hello1"}
</div>
</td>
</tr>
<tr>
<td className="col-sm-6 col-centered rightCol">
<div>
{'hello2'}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

You will have to insert class col-sm-6 for tr tags if you want them on same line.
Here is the working fiddle of your code
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div className="jumbotron col-sm-12 text-left row">
<div className="panel panel-info">
<div className="panel-heading">
HEADER
</div>
</div>
<table className="table table-bordered table-condensed table-responsive">
<tbody>
<tr class="col-sm-6">
<td className="col-centered leftCol">
<div>
{"hello1"}
</div>
</td>
</tr>
<tr class="col-sm-6">
<td className="col-centered rightCol">
<div>
{'hello2'}
</div>
</td>
</tr>
</tbody>
</table>
</div>

<div className="jumbotron col-sm-12 text-left row">
<div className="panel panel-info">
<div className="panel-heading">
HEADER
</div>
</div>
<table className="table table-bordered table-condensed table-responsive">
<tbody>
<tr>
<td className="col-sm-6 col-centered leftCol" style="height: 200px;">
<div>
{"hello1"}
</div>
</td>
</tr>
<tr>
<td className="col-sm-6 col-centered rightCol" style="height: 200px;">
<div>
{'hello2'}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Adding style will do it.

<div className="jumbotron col-sm-12 text-left row">
<div className="panel panel-info">
<div className="panel-heading">
HEADER
</div>
</div>
<table className="table table-bordered table-condensed table-responsive">
<tbody>
<tr>
<td className="col-sm-6 col-centered leftCol">
<div>
{"hello1"}
</div>
</td>
<td className="col-sm-6 col-centered rightCol">
<div>
{'hello2'}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

break-word does not work inside table.td

I expect something like this:
|-----------panel-heading---------------------|
| | Name | Sex | |
| wrap-word | wrap-word |
| wrap-word |
but as you can see, the long word 111... and 222... does not wrap and the table is longer than panel
How to fix it?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">test </div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Sex</th>
<th></th>
</tr>
</thead>
<tbody>
<tr >
<td>ff</td>
<td>wer</td>
<td>1</td>
<td>asdf</td>
</tr>
<tr class="">
<td colspan="4">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12"> <h2 style="word-wrap: break-word">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</h2>
</div>
<div class="col-lg-6 col-md-6 col-xs-12"> <h2 style="word-wrap: break-word">22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</h2>
<hr>
</div>
</div>
<div class="row"> <h2 style="word-wrap: break-word">33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</h2>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

You can make the words (long strings) break with word-break: break-word; in addition to your word-wrap like this:
h2 {
word-wrap: break-word;
word-break: break-word;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">test </div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Sex</th>
<th></th>
</tr>
</thead>
<tbody>
<tr >
<td>ff</td>
<td>wer</td>
<td>1</td>
<td>asdf</td>
</tr>
<tr class="">
<td colspan="4">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12"><h2>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</h2>
</div>
<div class="col-lg-6 col-md-6 col-xs-12"><h2>22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</h2>
<hr>
</div>
</div>
<div class="row"><h2>33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</h2>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
This will also work on other elements like divs, spans etc.
What's the difference between word-wrap and word-break?
word-wrap: The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
word-break: The word-break CSS property is used to specify how (or if) to break lines within words
In conclusion you need them both to break long strings without any spaces where the word-wrap could take in place.

Use table-layout:fixed this will wrap the table within the width of the parent div and text will break automatically.
table{
table-layout:fixed;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">test </div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Sex</th>
<th></th>
</tr>
</thead>
<tbody>
<tr >
<td>ff</td>
<td>wer</td>
<td>1</td>
<td>asdf</td>
</tr>
<tr class="">
<td colspan="4">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12"> <h2 style="word-wrap: break-word">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</h2>
</div>
<div class="col-lg-6 col-md-6 col-xs-12"> <h2 style="word-wrap: break-word">22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</h2>
<hr>
</div>
</div>
<div class="row"> <h2 style="word-wrap: break-word">33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</h2>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>