HTML Bootstrap - Display two buttons 50% of the Div's width

user_4991677 0
Viewed 16230

I have a modal window that needs to display two buttons at the bottom, say Proceed and Cancel using Bootstrap's button for this.

I want these buttons to be side by side occupying the whole width of the div.

If I set the width of the buttons to be 50%, they are shown one on top of the other. Only when I set the width, say, 49% they are shown next to each other, but then they are not taking the whole width.

I've seen this many times, but can't figure out how to do it.

Here is a sample code of what I'm doing:

<div align="center">
    <button type="button" class="btn btn-warning" ng-click="Cancel()"  aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Cancel</font></button>
    <button type="button" class="btn btn-success" ng-click="Proceed()" aria-haspopup="true" aria-expanded="false" style="width:50%"><font size="6">Proceed</font></button>
</div>
twitter-bootstrap css html
6 Answers

"btn-block" is what you'd generally want so the buttons stretch within their columns (for anyone finding this in Google).

<div class="row">
    <div class="col-md-6">
        <button class="btn btn-warning btn-block">Cancel</button>
    </div>
    <div class="col-md-6">
        <button class="btn btn-success btn-block">Proceed</button>
    </div>
</div>
user_5624330

Bootstrap has the clearfix class, which can be able to use float-left and float-right classes.

Here is how to use: https://getbootstrap.com/docs/4.0/utilities/clearfix/

An example:

<div class="clearfix">
     <button type="button" class="btn btn-success float-left" style="width: 48%;">Save</button>
     <button type="button" class="btn btn-danger float-right" style="width: 48%;">Cancel</button>
</div>
user_49320210
Related