Title: Bootstrap horizontally align nested accordions
Tags: html;css;twitter-bootstrap
Question: I am trying to place two nested accordions within the same row so that they appear side-by-side both taking up half the space of the parent accordion.
<div class="panel-group" id="accordion1"&gt;
<div class="panel panel-default"&gt;
<div class="panel-heading"&gt;
<h4 class="panel-title"&gt;<a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne"&gt;
Collapsible Group #1
</a&gt;</h4&gt;
</div&gt;
<div id="collapseOne" class="panel-collapse collapse in"&gt;
<div class="panel-body"&gt;This is a simple accordion inner content...</div&gt;
</div&gt;
</div&gt;
<div class="panel panel-default"&gt;
<div class="panel-heading"&gt;
<h4 class="panel-title"&gt;<a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo"&gt;
Collapsible Group #2 (With nested accordion inside)
</a&gt;</h4&gt;
</div&gt;
<div id="collapseTwo" class="panel-collapse collapse"&gt;
<div class="panel-body"&gt;
<!-- Here we insert another nested accordion --&gt;
<div class="row"&gt;
<div class="col-md-3"&gt;
<div class="panel-group sub-panel" id="accordion2"&gt;
<div class="panel panel-default"&gt;
<div class="panel-heading"&gt;
<h4 class="panel-title"&gt;<a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne"&gt;
Collapsible Inner Group Item #1
</a&gt;</h4&gt;
</div&gt;
<div id="collapseInnerOne" class="panel-collapse collapse in"&gt;
<div class="panel-body"&gt;Anim pariatur cliche...</div&gt;
</div&gt;
</div&gt;
</div&gt;
</div&gt;
<div class="col-md-6"&gt;
<div class="panel-group" id="accordion3"&gt;
<div class="panel panel-default"&gt;
<div class="panel-heading"&gt;
<h4 class="panel-title"&gt;<a data-toggle="collapse" data-parent="#accordion3" href="#collapseInnerTwo"&gt;
Collapsible Inner Group Item #2
</a&gt;</h4&gt;
</div&gt;
<div id="collapseInnerTwo" class="panel-collapse collapse"&gt;
<div class="panel-body"&gt;Anim pariatur cliche...</div&gt;
</div&gt;
</div&gt;
</div&gt;
</div&gt;
<!-- Inner accordion ends here --&gt;
</div&gt;
</div&gt;
</div&gt;
</div&gt;
.panel-heading {
background: #00BFFF !important;
text-align: center;
#accordion3 {
float: right;
.sub-panel {
display: inline;
here is a link to a JS fiddle: http://jsfiddle.net/tdcqgo4k/
Ive tried using .row .row-fluid with .span* as well as trying to use col-- classes. please help!

Here is the accepted answer: Remove float from your CSS for the third accordian, and change your column definitions to both use col-xs-6 for the column parents of the nested accordians
Demo Fiddle
<div class="panel-group" id="accordion1"&gt;
<div class="panel panel-default"&gt;
<div class="panel-heading"&gt;
<h4 class="panel-title"&gt;<a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne"&gt;
Collapsible Group #1
</a&gt;</h4&gt;
</div&gt;
<div id="collapseOne" class="panel-collapse collapse in"&gt;
<div class="panel-body"&gt;This is a simple accordion inner content...</div&gt;
</div&gt;
</div&gt;
<div class="panel panel-default"&gt;
<div class="panel-heading"&gt;
<h4 class="panel-title"&gt;<a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo"&gt;
Collapsible Group #2 (With nested accordion inside)
</a&gt;</h4&gt;
</div&gt;
<div id="collapseTwo" class="panel-collapse collapse"&gt;
<div class="panel-body"&gt;
<!-- Here we insert another nested accordion --&gt;
<div class="row"&gt;
<div class="col-xs-6"&gt;
<div class="panel-group sub-panel" id="accordion2"&gt;
<div class="panel panel-default"&gt;
<div class="panel-heading"&gt;
<h4 class="panel-title"&gt;<a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne"&gt;
Collapsible Inner Group Item #1
</a&gt;</h4&gt;
</div&gt;
<div id="collapseInnerOne" class="panel-collapse collapse in"&gt;
<div class="panel-body"&gt;Anim pariatur cliche...</div&gt;
</div&gt;
</div&gt;
</div&gt;
</div&gt;
<div class="col-xs-6"&gt;
<div class="panel-group" id="accordion3"&gt;
<div class="panel panel-default"&gt;
<div class="panel-heading"&gt;
<h4 class="panel-title"&gt;<a data-toggle="collapse" data-parent="#accordion3" href="#collapseInnerTwo"&gt;
Collapsible Inner Group Item #2
</a&gt;</h4&gt;
</div&gt;
<div id="collapseInnerTwo" class="panel-collapse collapse"&gt;
<div class="panel-body"&gt;Anim pariatur cliche...</div&gt;
</div&gt;
</div&gt;
</div&gt;
</div&gt;
<!-- Inner accordion ends here --&gt;
</div&gt;
</div&gt;
</div&gt;
</div&gt;
.panel-heading {
background: #00BFFF !important;
text-align: center;
Comment for this answer: it seems to work. Thanks! Can you explain why using xs-6 works while using md-6 does not?


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:01/27/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><twitter-bootstrap>', 'Title': 'Bootstrap horizontally align nested accordions', 'ViewCount': 2985, 'id': 28174602, 'user_AboutMe': '', 'user_AccountId': 5691450.0, 'user_DisplayName': 'TDmoneybanks', 'user_Reputation': 468.0, 'user_Views': 50.0, 'user_id': 4499414.0}}