I have bootstrap panels currently buttons are displaying in inline , how can i display these buttons in vertically ?
main.html
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Control</div>
<div class="panel-body">
<!-- <div class="btn-group-vertical">-->
<button type="button" class="btn btn-danger btn-rad btn-lg" style="margin-left: 10px" ng-click="recordLogs()" ng-disabled="disabledRecBtn"><span class="glyphicon glyphicon-record"></span></button>
<!-- <br>-->
<button type="button" class="btn btn-primary btn-lg" style="margin-left: 10px" ng-click="stopLogs()" ng-disabled="disabledStopBtn"><span class="glyphicon glyphicon-stop"></span></button>
<!--<br>-->
<button type="button" class="btn btn-default btn-lg" style="margin-left: 10px" ng-click="searchLogs()"><span class="glyphicon glyphicon-search"></span></button>
<!--<br>-->
<button type="button" class="btn btn-default btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close"></span></button>
<!-- </div>-->
</div>
</div>
It looks like you already have the answer there. Use class="btn-group-vertical"
. And add a custom style to add space between the buttons. Demo .
.btn-group-vertical > button{
margin-bottom:10px;
}
.panel-body button {
display: block;
float: none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.