Search code examples
htmlcss

How to place buttons horizontally in a form

In my angular app I have a typical data entry form with the following three buttons at the end:

<div class="form-group">
    <div>
        <button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
    </div>
</div>
<br />
<div class="form-group">
    <div>
        <button id="button2id" name="button2id" class="btn btn-default" >Cancel</button>
    </div>
</div>
<br />
<div class="form-group">
    <div>
        <button id="button3id" name="button3id" class="btn btn-danger">Delete</button>
    </div>
</div>

Currently, all 3 buttons are stacked vertically. What is the CSS syntax to place all 3 of them horizontally?

Solution

  • Just Use:

    .form-group {
    float:left;
}

    Working Example

    Hope this helps.