Menu
I have written a bootstrap code as follows -
.panel-heading {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
a, a:hover, a:visited, a:active {
text-decoration: none !important;
color: white !important;
}
span.dpi1 {
color: crimson;
}
span.dpi2 {
color: red;
}
table,td,tr{
border-top-color:
}<div>
<div>
<div class="panel panel-primary">
<div class="panel-body" style="margin-left: 10px;">
<div class="row">
<div class="col-md-12">
<label>Enter <span class="dpi1">*</span></label>
<input id="searchText" type="text" size="50" autofocus="autofocus" />
<button id="searchButton" type="button" class="btn btn-primary" >Search</button>
</div>
<div class="pull-right">
<label><span class="dpi2">* Mandatory</span></label>
</div>
</div>
</div>
</div>
<br />
<div>
<div class="row pull-right">
<button type="button" class="btn btn-primary" id="expand"><span class="glyphicon glyphicon-arrow-down">Expand All</span></button>
<button type="button" class="btn btn-primary" id="collapse"><span class="glyphicon glyphicon-arrow-up">Collapse All</span></button>
</div>
<br />
<br />
<div class="row">
<div class="panel-group accord" id="showAgain">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapseA"><span style="color: white">Summary</span></a></div>
<div id="collapseA" class="panel-collapse collapse in">
<div class="panel-body" style="white-space: nowrap; overflow-y: scroll;">
<div class="col-md-4">
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
<div class="col-md-4">
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
<div class="col-md-4">
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<div class="panel-group accord">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapseB"><span style="color: white">Information</span></a></div>
<div id="collapseB" class="panel-collapse collapse">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>xx</th>
<th>xxx</th>
<th>xxx</th>
</tr>
</thead>
<tr>
<td><b>Customer No</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>First Name</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>Last Name</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>Address</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>Contact No.</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>Email</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel-group accord">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapseC"><span style="color: white">Information</span></a></div>
<div id="collapseC" class="panel-collapse collapse">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
</tr>
</thead>
<tr>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel-group accord">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapse1"><span style="color: white">Information</span></a></div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body" style="overflow: scroll; white-space: nowrap; overflow-y: scroll;">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
</tr>
</thead>
<tr>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="panel-group accord">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapse2"><span style="color: white">Information</span></a></div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body" style="overflow: scroll; white-space: nowrap; overflow-y: scroll;">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
</tr>
</thead>
<tbody>
<tr>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
</div>All the rows are coming properly but the second one which is having two panels is not properly aligned with the other rows and the display looks like this -
The second row is not aligned properly. Can someone help me to align it correctly with the other rows?
971
asked Mar 03 '26 01:03
With Bootstrap, a .row must be wrapped into a .container or a .container-fluid. You should add 2 .container-fluid as in this Bootply
That doesn't solve the problem described in your question: you should also add .col-xs-12 (xs or another width interval) as direct child of each .row. Once it's done, you should move "grid modifiers" like .pull-right from .row to those column elements; otherwise I'm pretty sure it doesn't play nice with Bootstrap grid.
See Grid documentation
- Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
- Use rows to create horizontal groups of columns.
- Content should be placed within columns, and only columns may be immediate children of rows.
- Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
- etc
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
