I am using fontawesome with my buttons but they are not the same size as shown in the pictures. I have tried fa-fw options but that makes things even worse. Any ideas what I can try ?
<td>
<span title="Personel" class="btn btn-default btn-sm fa fa-user" />
<span title="Belgeler" class="btn btn-default btn-sm glyphicon fa fa-inbox" />
<span title="Kayıtlar" class="btn btn-default btn-sm glyphicon fa fa-folder" />
<span title="Araçlar" class="btn btn-default btn-sm fa fa-truck" />
<span title="Güncelle" class="btn btn-default btn-sm fa fa-pencil" />
<a class="modal-link" href="#Url.Action("Delete", "Members",new { #item.MemberId })"><span title="Sil" class="btn btn-danger btn-sm fa fa-trash" /></a>
</td>
http://fortawesome.github.io/Font-Awesome/examples/
here's the link..To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
hope this works..
It's because of the glyphicon classes in your HTML. http://jsfiddle.net/q6bpdsmt/1/
Fixed HTML:
<td>
<span title="Personel" class="btn btn-default btn-sm fa fa-user" />
<span title="Belgeler" class="btn btn-default btn-sm fa fa-inbox" />
<span title="Kayıtlar" class="btn btn-default btn-sm fa fa-folder" />
<span title="Araçlar" class="btn btn-default btn-sm fa fa-truck" />
<span title="Güncelle" class="btn btn-default btn-sm fa fa-pencil" />
<a class="modal-link" href="#Url.Action("Delete", "Members",new { #item.MemberId })"><span title="Sil" class="btn btn-danger btn-sm fa fa-trash" /></a>
</td>
Related
This question already has answers here:
Space between buttons with bootstrap class
(4 answers)
Closed 5 years ago.
I would like to put some space between rows with buttons (three buttons in each row). In my example each row is inside div element marked with bootstrap class btn-toolbar.
I know I can solve this problem with using inline styling and put parameter like margin-top or writing custom css class but I am wondering if there is some bootstrap class for this?
Code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br/>
<button type="button" class="btn btn-primary" style="margin-right:30px;">Nazaj</button>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down"></span></button>
<input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/><h2 style="display:inline-block;position:relative;top:5px;padding-left:3px;">/</h2>
<input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>
<button type="button" class="btn btn-primary" style="margin-right:30px;"><span class="glyphicon glyphicon-arrow-down" ></span></button>
<button type="button" class="btn btn-success">Shrani</button>
<br/>
<br/>
<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>
<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>
<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>
<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>
<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>
<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>
you can use form-group to give space of 15px to give vertical space.
If you want to give space between col-md-column-* use col-md-offset-*
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br/>
<button type="button" class="btn btn-primary" style="margin-right:30px;">Nazaj</button>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down"></span></button>
<input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/><h2 style="display:inline-block;position:relative;top:5px;padding-left:3px;">/</h2>
<input type="text" class="form-control" style="width:50px;display:inline-block;position:relative;top:1px;"/>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>
<button type="button" class="btn btn-primary" style="margin-right:30px;"><span class="glyphicon glyphicon-arrow-down" ></span></button>
<button type="button" class="btn btn-success">Shrani</button>
<br/>
<br/>
<div class="btn-toolbar form-group">
<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>
<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>
<div class="btn-toolbar form-group">
<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>
<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>
<div class="btn-toolbar form-group">
<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>
<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>
I have an html file in which I want to display icons in button.
I am using 3 different images of by Awesome Font i.e
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fa fa-user-plus" aria-hidden="true"></i>
<i class="fa fa-user-times" aria-hidden="true"></i>
I have included its library in my project.
Only first image tag i.e <i class="fa fa-user" aria-hidden="true"> is working rest are not displaying the icon. Need Help!
Thanks in advance.
<div class="col-md-6" style="text-align:center">
<button class="btn btn-primary" type="button" ng-click="onUnAssignUsers()"><i class="fa fa-user-times" aria-hidden="true"></i>Unassign Users</button>
<button class="btn btn-primary" type="button" ng-click="onAssignUsers()"><i class="fa fa-user-plus" aria-hidden="true"></i>Assign Users</button>
<button class="btn btn-primary" type="button" ng-click="onUsers()">Users</button>
</div>
Make sure you are using latest version of Font-Awesome.
Here is the link i used for fiddle and is the latest CDN from bootstrapcdn.
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
You missed out <i class="fa fa-user-times" aria-hidden="true"></i> on Users Button.
Check https://jsfiddle.net/luzan/det1ovqa/
you are not using the latest version. Those icons are included in version 4.
Try this one. I think there is <link rel="stylesheet" href="path-to-your-fontawesome-css-file/css/font-awesome.css">
<link rel="stylesheet" href="http://fontawesome.io//assets/font-awesome/css/font-awesome.css">
<div class="col-md-6" style="text-align:center">
<button class="btn btn-primary" type="button" ng-click="onUnAssignUsers()"><i class="fa fa-user-times" aria-hidden="true"></i> Unassign Users</button>
<button class="btn btn-primary" type="button" ng-click="onAssignUsers()"><i class="fa fa-user-plus" aria-hidden="true"></i> Assign Users</button>
<button class="btn btn-primary" type="button" ng-click="onUsers()"><i class="fa fa-user" aria-hidden="true"></i> Users</button>
</div>
I'm trying to put all the controls on the same row without using the class row 'cause this controls are near a column, that also have other controls. So my structure is actually this:
<div class="col-xs-12 col-md-4">
<button class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
Add</button>
<button class="btn btn-default" >
<span class="glyphicon glyphicon-plus"></span>
Remove</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-repeat"></span>
Refresh</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-fullscreen"></span>
</button>
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Hello world">
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
</div>
and this is a jsfiddle
How you can see the buttons are on the same line but the textbox go ahead, I don't know wham is wrong. Someone could help? Thanks.
Use this type of grid section and http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp and adjust screen size according to this link
<div class="row">
<div class="col-sm-4">
<button class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
Add</button>
<button class="btn btn-default" >
<span class="glyphicon glyphicon-plus"></span>
Remove</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-repeat"></span>
Refresh</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-fullscreen"></span>
</button>
</div>
<div class="col-sm-4">
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Hello world">
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
</div>
</div>
I have set of buttons aligned fine on desktop but on mobile, when buttons wraps, second row sticks with first set of buttons and starts a little inside.
Please see following fiddle for the problem;
https://jsfiddle.net/u4dq9x38/
HTML:
<div role="toolbar" class="btn-toolbar bottom-buffer">
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
</div>
Is there any way to fix this?
Remove the btn-toolbar class, seems like it adds a space before the first element, so not designed to work for wrapping
You may need to add a bottom and right margin to each button individually
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.btn-toolbar>.btn:nth-child(1){
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div role="toolbar" class="btn-toolbar bottom-buffer">
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
<a class="btn btn-default btn-sm" href="">
<span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
Button
</a>
</div>
I have the following code which displays some buttons:
Fiddle
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>A
</li>
<li>B
</li>
</ul>
<button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div>
I want to pull the "X" to the far right of the group. I have tried .pull-right, float:right but neither seem to work.
Any ideas appreciated!
I would put the close ("X") button in its own .button-group and pull the group to the right:
<!-- previous button location -->
</div><!-- close the existing group -->
<div class="button-group pull-right">
<!-- new button location -->
<button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div><!-- end .btn-toolbar -->
Here's an update to your fiddle.
The advantage to this approach is that you get the correct button rounding based on the .button-group rules and you don't need to alter or override existing Bootstrap framework CSS.
Updated HTML
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div id ="b"class="btn-group" role="group" aria-label="Toolbar Group">
<button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
<button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
<button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">
Configuration
<span class="caret"></span>
</button>
<ul class="dropdown-menu as-toolbar-dropdown" role="menu">
<li>A</li>
<li>B</li>
</ul>
<button type="button" id="right" class="btn btn-default as-btn-text as-refresh-btn">X</button>
</div>
</div>
Updated CSS:
#b{
width:100%;
}
#right{
float:right;
}
Working Example:http://jsfiddle.net/tmurmvnx/
In bootstrap 4 you can use the strong text class, check this simple example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="btn-group btn-group-lg float-right" role="group">
<button type="submit" class="btn btn-dark">
Btn 1
</button>
<button type="submit" class="btn btn-primary">
Btn 2
</button>
</div>
For more information check this documentation:
https://getbootstrap.com/docs/4.0/utilities/float/
https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment