I want to display buttons to the right in bootstrap panel-heading i tried to add pull-right class on all buttons but its breaking some css rules on panel-body, How can i display all buttons on right side in bootstrap panel-heading ?
main.html
<div class="col-md-11">
<div ng-show="showMessage">
<p class="recordMessage">File is being recorded to the server ,once you stop recording it will prompt for cancel or download. </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">DIT LOGS
<div class="pull-right" style="padding-right: 300px">
<button type="button" class="btn btn-danger btn-rad btn-lg"><span class="glyphicon glyphicon-record"></span></button>
<button type="button" class="btn btn-primary btn-rad btn-lg"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-success btn-rad btn-lg"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-info btn-rad btn-lg"><span class="glyphicon glyphicon-folder-open"></span></button>
</div>
</div>
<div class="panel-body display-logs" scroll-bottom="event">
<ul style="list-style: none;">
<li ng-repeat="message in event track by $index" ng-class="{lastItem: $last}"><span><strong>Log:</strong></span><span>{{message}}</span></li>
</ul>
</div>
</div>
</div>
try putting them in an other div
<div class="panel-heading">DIT LOGS
<div class="pull-right">
<button type="button" class="btn btn-danger btn-rad btn-xs"><span class="glyphicon glyphicon-record"></span></button>
<button type="button" class="btn btn-primary btn-rad btn-xs"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-success btn-rad btn-xs"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-info btn-rad btn-xs"><span class="glyphicon glyphicon-folder-open"></span></button>
</div>
</div>
Related
I found some come to make a button that is also an input file with a label :
<label>
Import
<input type="file" hidden>
</label>
So I put in on the toolbar on my project where I'm using a button group :
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="newNetwork()">New network</button>
<label class="btn btn-primary">
Import
<input type="file" (change)="import($event.target.files)" hidden>
</label>
<button class="btn btn-primary" (click)="export()">Export</button>
</div>
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="addElement('station')">Add station</button>
<button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
<button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
</div>
<div class="btn-group" role="group">
<button class="btn"
[ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
(click)="link()">
Add link
</button>
<button class="btn"
[ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
(click)="edit()">
Edit
</button>
<button class="btn"
[ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
(click)="remove()">
Remove
</button>
</div>
</div>
The thing the label is actually a bit shorter than other buttons.
I tried to fix it's height :
<label style="height: 101%" class="btn btn-primary">
It works but now the text isn't vertically centered !
Is there a way to make it look like a normal button ?
You can remove the margin of that label like this:
(I would not recommend inline css).
.export {
margin: 0px;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="newNetwork()">New network</button>
<label class="btn btn-primary export">
Import
<input type="file" (change)="import($event.target.files)" hidden>
</label>
<button class="btn btn-primary " (click)="export()">Export</button>
</div>
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="addElement('station')">Add station</button>
<button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
<button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
</div>
<div class="btn-group" role="group">
<button class="btn"
[ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
(click)="link()">
Add link
</button>
<button class="btn"
[ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
(click)="edit()">
Edit
</button>
<button class="btn"
[ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
(click)="remove()">
Remove
</button>
</div>
</div>
I am trying to arrange a few buttons in boostrap 3.4.
I managed to do it (probably by luck) and this is how it looks
This is the code I used. The idea is to create rows and then various divs within the row with the appropriate columns widths col-xs-N.
<div id="cfd_panel" class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#analysis" href="#collapse2">CFD</a>
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="row">
<div class="col-xs-6">
<button type="button" class="btn btn-block btn-default btn-sm" id='create_cfd_domain' onclick='create_cfd_domain_btn()'>
Create/Update Domain
</button>
</div>
<div class="col-xs-3" style="padding-right: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" onclick='map_to_area_btn()' >
Airflow Map
</button>
</div>
<div class="col-xs-3" style="padding-left: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" onclick='open_cfd_paraview_btn()' >
View
</button>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<button type="button" class="btn btn-block btn-default btn-sm" id='mesh_cfd_domain' onclick='openfoam_mesh_btn()'>
Mesh
</button>
</div>
<div class="col-xs-3" style="padding-right: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" onclick='open_cfd_paraview_samples_btn()' >
Samples
</button>
</div>
<div class="col-xs-3" style="padding-left: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" onclick='import_from_aws_btn()' >
Import
</button>
</div>
</div>
<div class="row">
<div class="col-xs-3" style="padding-right: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" id='run_cfd_cases' onclick='openfoam_run_btn()'>
Run
</button>
</div>
<div class="col-xs-3" style="padding-left: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" id='sample_cfd_cases' onclick='openfoam_get_results_btn()' >
Sample
</button>
</div>
<div class="col-xs-6" style="padding-left: 10px; ali">
<button type="button" class="btn btn-link btn-sm" id='open_cfd_settings' onclick='open_cfd_settings_btn()' >
Settings
</button>
<button type="button" class="btn btn-link btn-sm" id='open_wind_template' onclick='open_wind_template_btn()' >
OFTemplate
</button>
</div>
</div>
</div>
</div>
I am now trying to rearrange the buttons in a different way, but I cannot manage to do it correctly by changing the column widths. This is what happens. The goal is to have MESH and RUN button on the same line and on the first column.
Is there a proper way to do it?
I working with css, trying to do a custom upload file.. I want something like this:
but for some reason my layout separate in 3 lines when I put into bootstrap modal, like this:
what am I doing wrong? why I can´t show it in just one line?
HTML:
<button class="btn btn-primary btn btn-xs" id="openUpload" style="background-color:#3399FF;color:#FFFFFF">
<span class="glyphicon glyphicon-chevron-up"></span>Importar</button>
<div class="modal" id="uploadModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" style="overflow: hidden">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add new File</h4>
</div>
<div class="modal-body col-md-12" id="modal-body">
<div id="upload">
<div class="col-md-12">
<div id="drop">
<span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn">
<button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
</span>
</div>
</div>
<div class="fileupload-buttonbar">
<div>
<button type="submit" class="btn btn-success start">
<i class="glyphicon glyphicon-upload"></i><span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-upload"></i><span>Clear upload</span>
</button>
<button type="reset" class="btn btn-danger cancel">
<i class="glyphicon glyphicon-ban-circle"></i><span>Cancel All</span>
</button>
</div>
</div>
<ol class="files upload-files-list"></ol>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Fiddle Demo
I search Bootstrap documentation but I get similar result, I try with given code but I get same result:
Just wrap your icon, input, button into input-group class.
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn"><button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button></span>
</div>
Also you have used col-md-12 wrongly, use row class before it.
Updated Fiddle
This seems to work :
<div id="drop" class="input-group">
<span class="input-group-addon input-group-prepend"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn input-group-append">
<button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
</span>
</div>
Demo
Note the classes input-group, input-group-append and input-group-prepend
I have a problem with three buttons on my site.
I would like to have some space between those buttons.
Is it possible to do this, without using inline styling?
Perhaps bootstrap has some classes for this?
I know I can simply do it with:
style='margin-right:5px;'
or write custom class with this property.
I am just wondering if bootstrap has some classes for this?
Here is example.
Problem is with this three buttons:
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
Try to put them inside btn-toolbar or some other container.
<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
Yes you have to wrap them
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
EDITED CODEPEN
<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
d-flex justify-content-between
<div class="col-md-3 mt-4 d-flex justify-content-betweend-flex justify-content-between">
<button type="submit" class="btn btn-info text-light" id="atndanceFilter"> <i class="fa fa-search"></i> Filter Report</button>
Reset
</div>
Will work like magic.
Image
So as you can see in the image above, the History button is not affected by the black outlines like the other buttons is. Apparently the button is not in the class but as you can see in the code below it is.
<div class="container" id="main-container">
<div class="row main-row">
<div class="col-sm-3">
<div style="padding-top: 10px; margin-bottom: 20px;">
<div id="topleft-menu">Menu</div>
<div class="topleft-link-wrapper logout" style="display: none;">
<button class="topleft-link btn btn-primary btn-block" id="change-trade-url-btn"><span class="glyphicon glyphicon-pencil"></span> Change your trade URL</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-info btn-block" data-toggle="modal" data-target="#about-modal"><span class="glyphicon glyphicon-list-alt"></span> About/How it works</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-warning btn-block" id="support-btn"><span class="glyphicon glyphicon-question-sign"></span> Support</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-default btn-block" id="donate-btn"><span class="glyphicon glyphicon-usd"></span> Donate</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-success btn-block" id="history-btn"><span class="glyphicon glyphicon-list"></span> History</button>
</div>
I don't know why this problem occurs.
Also if you wanna inspect the site visit; www.csgoxd.net
The other elements have the css declaration:
.topleft-link-wrapper:not(:last-child)
So your last child element will not have the border declarations.