Looking for a way to align multiple items horizontally across two columns within a row in Bootstrap? Check out the sample HTML code below:
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>Short Heading</h1>
<p>Some really long content that might throw off the alignment</p>
<button class="btn btn-primary">Button</button>
</div>
<div class="col-sm-6">
<h1>Very long Heading that needs 2 rows</h1>
<p>Some short content</p>
<button class="btn btn-primary">Button</button>
</div>
</div>
</div>
Check out this fiddle for a live demo http://jsfiddle.net/6pYhx/689/
Here are the two conditions I'm trying to meet:
- Ensure that the header, paragraph, and button elements are all aligned at the same height horizontally. In the example, the right header spans two rows, causing the right paragraph to be misaligned.
- When the screen size changes, all elements in column 1 should stack vertically followed by the elements in column 2. I've attempted to address this with multiple rows, but that messes up the order. I want header 1, paragraph 1, button 1, followed by header 2, paragraph 2, button 2.
Any suggestions on how to achieve this with CSS?