StrugglingCoder StrugglingCoder - 7 months ago 46
HTML Question

How should I align three buttons so that they stack horizontally in Bootstrap

I want to align three buttons on top of a div UI Grid so that they align horizontally equal spaces apart.

I am new to Bootstrap. So please explain what is being done also. Here is what I that I could come up with.

But they span across the entire screen and also first two align next to each other and the other one pulls to the extreme right.

<div class="home-grid-content" ng-controller="TransactionDetailsUnmergeController">
<div ng-style="pleaseWait">
<div class="refresh" style="width:100%;height:100px;">
<h4>Please wait....</h4>
</div>
</div>
<div ng-style="toggleDetails">
<div class="row">
<div class="col-lg-12">
<div style="padding-top:10px; float: left;">
<input type="submit" value="Search" class="btn btn-default" style="width:100px;" id="btnSearch" name="btnSearch" ng-click="caseSearch()" />
</div>
<div style="padding-top:10px; float: right;">
<button type="button" class="btn btn-default" ng-model="SearchRows" ng-click="AddNewSearchRow(SearchRows)">Add New Row</button>
</div>
<div style="padding-top:10px;" class="center-block">
<button type="button" class="btn btn-default" ng-model="SearchRows" ng-click="AddNewSearchRow(SearchRows)">Approve/Reject</button>
</div>
</div>
</div>
<br/>

<div>
<h3>Unmerge Request Log</h3>
<div ui-grid="gridOptions_RQ" ui-grid-selection class="" ui-grid-pagination ui-grid-auto-resize>
<div class="watermark" ng-show="!gridOptions_RQ.data.length">No data available</div>
</div>

<div class="grid-pager">
<uib-pagination boundary-links="true" total-items="totalItems" items-per-page="4" ng-change="pageChanged(currentPage)" ng-show="(totalItems>4) == true"
ng-model="currentPage" class="pagination" direction-links="false" id="HconstUnmerge_1"
first-text="&laquo;" last-text="&raquo;">
</uib-pagination>
</div>
</div>
<br/>

<div>
<h3>Unmerge Process Log</h3>
<div ui-grid="gridOptions_PR" ui-grid-selection class="" ui-grid-pagination ui-grid-auto-resize>
<div class="watermark" ng-show="!gridOptions_PR.data.length">No data available</div>
</div>

<div class="grid-pager">
<uib-pagination boundary-links="true" total-items="totalItems" items-per-page="4" ng-change="pageChanged(currentPage)" ng-show="(totalItems>4) == true"
ng-model="currentPage" class="pagination" direction-links="false" id="HconstUnmerge_1"
first-text="&laquo;" last-text="&raquo;">
</uib-pagination>
</div>
<br/>

<div style="margin-top:8px;">
<button type="button" class="btn btn-default pull-left" ng-click="backToDetailsPage()">Cancel</button>
</div>
</div>
</div>

</div>


I want these three buttons from the extreme left to align next to each other equal spaces apart.

For now it looks like

enter image description here

Answer

Your three buttons all have different floats.You can give them all the same styling. You can also add padding-right: 10px; to the styling to add a space between the buttons.

<div class="col-lg-12">
            <div style="padding-top:10px; padding-right:10px; float: left;">
                <input type="submit" value="Search" class="btn btn-default" style="width:100px;" id="btnSearch" name="btnSearch" ng-click="caseSearch()" />
            </div>
            <div style="padding-top:10px; padding-right:10px; float: left;">
                <button type="button" class="btn btn-default" ng-model="SearchRows" ng-click="AddNewSearchRow(SearchRows)">Add New Row</button>
            </div>
            <div style="padding-top:10px; padding-right:10px; float: left;" class="center-block">
                <button type="button" class="btn btn-default" ng-model="SearchRows" ng-click="AddNewSearchRow(SearchRows)">Approve/Reject</button>
            </div>
        </div>
Comments