In bootstrap, buttons with icons are implemented using a combination of <button> and <span>:
http://getbootstrap.com/components/#glyphicons-examples
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
In font awesome, buttons are implemented using combination of <a> and <i>:
http://fontawesome.io/examples/
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
Is there a better way? Or are the selection of these tags completely arbitrary?
It completely depends upon the usage.
In bootstrap you can implement buttons using combination of <a> and <i>. Similarly , in font-awesome buttons with icons can be implemented using a combination of <button> and <span>.
For example: If we need to submit a form and the submit button contains a font-awesome icon then we do it like this--
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="fa fa-trash-o fa-lg" aria-hidden="true"></span>
</button>
Another example: If we need to use a normal link and the link contains a bootstrap glyphicon icon then we can do it like this--
<a class="btn btn-danger" href="#">
<i class="glyphicon glyphicon-align-left"></i> Delete</a>
Another example using <i> tag.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="btn btn-warning">
<i class="fa fa-trash-o fa-lg"></i>
</button>
<button class="btn btn-primary">
<i class="fa fa-trash-o fa-lg"></i> Delete
</button>
<button class="btn btn-danger">
Delete <i class="fa fa-trash-o fa-lg"></i>
</button>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<span class="glyphicon glyphicon-envelope"></span>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>
Related
I installed material bootstrap5 to my Vue project and its working fine. I can use components and icons directly from material bootstrap page like :
<a class="btn btn-primary btn-lg btn-floating insta" style="background-color: #ac2bac;" href="#!" role="button">
<i class="fab fa-instagram"></i>
</a>
<a class="btn btn-primary btn-lg btn-floating facebook" style="background-color: #ac2bac;" href="#!" role="button">
<i class="fab fa-facebook"></i>
</a>
and i get nice icons; but i want to use fontawseome icons and when i paste the icon code from fontawesome site for vuejs like
<font-awesome-icon icon="fa-solid fa-paper-plane" />
It doesn't work and it shows nothing. I installed font awesome with mdb5. How can I use it ?
the whole code is:
<div class="SocialMediaBar">
<div class="socialMediaIcons" >
<a class="btn btn-primary btn-lg btn-floating insta" style="background-color: #ac2bac;" href="#!" role="button">
<i class="fab fa-instagram"></i>
</a>
<a class="btn btn-primary btn-lg btn-floating facebook" style="background-color: #ac2bac;" href="#!" role="button">
<i class="fab fa-facebook"></i>
</a>
</div>
It show 2 icons from mdb5 site and nothing more.
This is what I want to achieve this in django/bootstrap.
The user is supposed to select options from two DDLs and enter a number in the box, then press update to post parameters to server.
But it does not work.
And below is the code I have written:
(I have removed some django lines - but there will be loops and variables to get data from the form)
<form class="form-inline " method="post" action="{% url 'historical' %}">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCrypto"
name="crypto" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{Selected-Coin}}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownCrypto">
<a class="dropdown-item">BTC</a>
<a class="dropdown-item">XRP</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
id="dropdownCurrency" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{Selected-Currency}}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownCurrency" name="currency">
<a class="dropdown-item" href="#USD">USD</a>
<a class="dropdown-item" href="#EUR">EUR</a>
</div>
</div>
<input class="form-control " type="number" aria-label="Period"
name="period" value="10"> days
<button class="btn btn-outline-secondary " type="submit">Update</button>
</form>
after click in my single button ,the dropdown is under my datatables !
my code :
<div class="dropdown">
<button type="button" class="btn btn-icon" aria-label="btnGroup" data-toggle="dropdown" >
<i class="icon icon-dots-vertical"></i>
</button>
<div class="dropdown-menu" aria-labelledby="btnGroup">
<a class="dropdown-item" href="#">Modifier Contrat</a>
<a class="dropdown-item" href="#">Supprimer Contrat</a>
</div>
</div>
If you want the dropdown to stay within your modal without adjusting the z-index you can align the dropdown the the right edge of your button using the class 'dropdown-menu-right' on the 'dropdown-menu' div:
<div class="dropdown">
<button type="button" class="btn btn-icon" aria-label="btnGroup" data-toggle="dropdown" >
<i class="icon icon-dots-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroup">
<a class="dropdown-item" href="#">Modifier Contrat</a>
<a class="dropdown-item" href="#">Supprimer Contrat</a>
</div>
How can I build a nested dismissible alerts in bootstrap.
The idea is to have a box (a filter) with boxes inside (filter-criteria) and have the user click crosses to delete the entire filter of just a filter criteria.
* EDIT *
Given the feedback I came up with the following :
<div class="alert alert-info NewsAudienceFilterContainer col-md-12 " id="0" style="">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<span class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Werkjaar : 2016 - 2017
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</span>
<span class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Activiteit : Piano
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</span>
<span class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Lesgever / Coach : Piano Heleen
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</span>
<span class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Dag : Maandag
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</span>
</div>
Problem : when clicking on the X of the filter-options, the entire filter disappears.
Compare to the sample. I've used <span> in stead of <div>. Is that the reason ?
* EDIT 2 * Functioning workaround.Add an id to the 'filter-option' and use 'data-target' attribute on the button.
<span class="filter-option" id="DayOfWeekFilter242375497">
<button class="btn btn-info filter" type="button" data-dismiss="alert" data-target="#DayOfWeekFilter242375497">
Dag : Woensdag
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<input name="NewsAudienceFilter.DayOfWeek" type="hidden" value="Wednesday">
</span>
I've created a fiddle for this based on bootstrap framework as you've requisted.
HTML
<div class="panel panel-default">
<div class="panel-body">
Example
<div class="panel panel-default">
<button type="button" class="close" id="close-filter-box" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="panel-heading">Filter box with filter-criteria</div>
<div class="panel-body">
<div class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Filter 1 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Filter 2 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Filter 3 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Filter 4 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="filter-option">
<button class="btn btn-info filter" type="button" data-dismiss="alert">
Filter 5 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
CSS
#close-filter-box {
margin: 10px;
}
.filter {
margin: 5px;
}
.filter .glyphicon-remove {
vertical-align: bottom;
margin-bottom: 4px;
opacity: .7;
}
.filter .glyphicon-remove:hover {
opacity: 1.0;
color: #fff;
}
I hope this comes close to what you try to achieve.
Functioning workaround.Add an id to the 'filter-option' and use 'data-target' attribute on the button.
<span class="filter-option" id="DayOfWeekFilter242375497">
<button class="btn btn-info filter" type="button" data-dismiss="alert" data-target="#DayOfWeekFilter242375497">
Dag : Woensdag
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<input name="NewsAudienceFilter.DayOfWeek" type="hidden" value="Wednesday">
</span>
I want to create somthing that in bootsrap:
[colorpicker | input box | button] [toggle button]
I have used:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send</button>
<button class="btn btn-default">Users</button>
</span>
</div>
However, I don't know what colorPicker for bootstrap I should use (only 9 colors pickers) and how to add it on left side.
Any help is welcome.
Fiddle: http://jsfiddle.net/5B5v5/
Since I think you're saying you want a color picker with just 9 color options, I would go with a dropdown instead of a fully baked color-picker plugin... like so:
<div class="form-inline">
<div class="input-group">
<div class="input-group-btn">
<!-- COLOR PICKER -->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><span style="color:cyan" class="glyphicon glyphicon-tint"></span> Cyan</li>
<li><span style="color:blue" class="glyphicon glyphicon-tint"></span> Blue</li>
<li><span style="color:magenta" class="glyphicon glyphicon-tint"></span> Magenta</li>
<li>...more...</li>
</ul>
<!-- END COLOR PICKER -->
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div>
<button class="btn btn-primary" type="button">Send</button>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-user"></span></button>
</div>
</div>
DEMO: http://www.bootply.com/ecziRvg9Jg
If you do find a true color picker that lets you do 9 colors only, attach it to the button I commented in the code.