I have successfully created two buttons on the same line. The second button is collapsible and when clicked, it adds a row of two more buttons to the view.
However, the newly collapsed row of buttons appears aligned with the second button. I would like them to be aligned in a new line when expanded. Is there a way to achieve this?
<div class="span5 offset4">
<button class="btn-primary btn-large btn-bank" type="button"
style="width: 100%;">Big Button </button>
</div>
<div id="collapsabilebutton">
<a href="#show" data-toggle="collapse"><button
class="btn btn-large">
Second Button - Click to expand a new row of buttons</button></a>
</div>
<div id="show" class="collapse">
<button class="btn btn-small">Hi</button>
<button class="btn btn-small">Hi</button>
</div>
I am looking for a way to align the newly expanded row of buttons with the big button at the top, rather than with the small button next to it. Any suggestions?
EDIT 1 : Bootstrap version 2.3
EDIT 2 : Added Image since its tough to re-create the fiddle exactly.
The goal is to position the 'Hi' buttons not directly below the 'Click Me' button, but aligned with the 'Big Button' instead.
**EDIT 3 ( Answer )**
The solution is actually quite simple. The collapsible buttons should be placed within the div tags of the parent element you want them to align with! By making this adjustment to the code provided:
<div class="row">
<div class="span5 offset4">
<button class="btn-primary btn-large btn-primary" type="button"
style="width: 100%;">Large Button</button>
<div id="show" class="collapse">
<button class="btn btn-small">Hi</button>
<button class="btn btn-small">Hi</button>
</div>
</div>
<div id="collapsabilebutton">
<a href="#show" data-toggle="collapse"><button
class="btn btn-large">Click</button></a>
</div>
</div>