<section>
<p>A button group is a container for a set of buttons that may or may not be related to each other. This is great for grouping form actions, such as Save and Cancel, Save and Confirm, and so on.</p>
<p><strong>Required</strong>. Add <code>.ae-btn-group</code> and <code>.ae-btn-group-*</code> to the buttons’ parent element to align them to the left, center, right, or justified.</p>
<p><i class="fa fa-mobile"></i> <strong>Mobile view</strong>. Button groups will always stack buttons vertically as block elements.</p>
<table>
<thead>
<tr class="header">
<th>Alignment</th>
<th>Class</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td><code>.ae-btn-group-left</code></td>
<td>Buttons are forced to the left</td>
</tr>
<tr>
<td></td>
<td colspan="2"><div class="ae-btn-group ae-btn-group-left">
    <button class="ae-btn ae-btn-primary" type="submit">Save</button>
    <button class="ae-btn ae-btn-default" type="cancel">Cancel</button>
</div>
</td>
</tr>
<tr>
<td>Center</td>
<td><code>.ae-btn-group-center</code></td>
<td>Buttons are forced to the center</td>
</tr>
<tr>
<td></td>
<td colspan="2"><div class="ae-btn-group ae-btn-group-center">
    <button class="ae-btn ae-btn-primary" type="submit">Save</button>
    <button class="ae-btn ae-btn-default" type="cancel">Cancel</button>
</div>
</td>
</tr>
<tr>
<td>Right</td>
<td><code>.ae-btn-group-right</code></td>
<td>Buttons are forced to the right</td>
</tr>
<tr>
<td></td>
<td colspan="2"><div class="ae-btn-group ae-btn-group-right">
    <button class="ae-btn ae-btn-primary" type="submit">Save</button>
    <button class="ae-btn ae-btn-default" type="cancel">Cancel</button>
</div>
</td>
</tr>
<tr>
<td>Justified</td>
<td><code>.ae-btn-group-justified</code></td>
<td>Button widths will auto adjust based on width</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<p>Individually wrap buttons in <code>&lt;div class=&quot;ae-btn-group&quot;&gt;&lt;/div&gt;</code> to justify-align them. Adjust screen size to see how the buttons automatically fill the width.</p>

<div class="ae-btn-group ae-btn-group-justified">
    <div class="ae-btn-group">
        <button class="ae-btn ae-btn-primary" type="submit">Save</button>
    </div>
    <div class="ae-btn-group">
        <button class="ae-btn ae-btn-default" type="cancel">Cancel</button>
    </div>
</div>
</td>
</tr><tr>
<tr>
<td>Full width</td>
<td><code>.ae-btn-group-full-width</code></td>
<td>Buttons appear at the far left and far right</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<p>Add <code>.ae-btn-left</code> or <code>.ae-btn-right</code> to buttons to position them.</p>
<div class="ae-btn-group ae-btn-group-full-width">
    <button class="ae-btn ae-btn-default ae-btn-left" type="cancel">Cancel</button>
    <button class="ae-btn ae-btn-primary ae-btn-right" type="submit">Save</button>
</div>
</td>
</tr><tr>
</tbody>
</table>
<section>