I have been using this kind of button in bootstrap 3. Normally is the Action to update or modify a row in a table.
I would like to use bootstrap 4, but this button is not rendering correctly.
I know this have changed, but how can I fix this?
This is the code for the button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
Instead of glyphicons Bootstrap 4 recommends using font-awesome. You can read more about migrations here. While the migration documentation states that btn-default is now btn-secondary, to have your button rendered similarly to what you have now you want to use btn-light.
Here's what your updated code would look like with it.
<button type="button" class="btn btn-light">
<i class="fa fa-pencil fa-2x" aria-hidden="true"></i>
</button>
Here's the code in a working codeply project.
From the migration page:
https://v4-alpha.getbootstrap.com/migration/
Renamed .btn-default to .btn-secondary
Dropped the Glyphicons icon font. If you need icons, some options are:
the upstream version of Glyphicons
Octicons
Font Awesome
Related
In my HTML page I need to include a button element with a description and an icon (I use an icon from the fontawesome.com library).
To compile the data in my page I use the Knockout Javascript framework.
Compilation of the descriptive text of the button is done by text binding as in the example:
<button class="btn btn-sm btn-outline-secondary" data-bind="text:GetTranslatedText('SomeText')">
<i class="fas fa-trash-alt"></i>
</button>
The GetTranslatedText("SomeText") function returns the text translated into the language used by the user.
My problem is that when the framework compiles the text of the button, it overwrites the <i> element with which the icon is displayed.
Is there a simple way to concatenate both the text and HTML element of the icon into the binding?
Thanks!
Rather than binding the text to the button, which as you've seen overrides the buttons contents, bind it to a span alongside the icon:
<button class="btn btn-sm btn-outline-secondary">
<i class="fas fa-trash-alt"></i> <span data-bind="text:GetTranslatedText('SomeText')"></span>
</button>
My uib-popover is not hiding on outsideClick.
<button
tooltip-placement="bottom"
tooltip="{{'common.addRemoveColumn'| translate}}"
class="btn btn-default pull-right"
uib-popover
popover-trigger="'outsideClick'"
popover-placement="bottom"
uib-popover-template="'gridColumns.html'"
data-original-title="{{'common.customizeColumn'| translate}}">
<i class="fa fa-columns"></i>
</button>
I have followed these stackOverflow questions,
uib-popover not closing on outside click
How to hide uib-popover on click outside of the popover in angular JS?
and nothing solved the issue.
My angularJs version is 1.3.13.
My Bootstrap version is 3.2.0.
$scope.myTrigger = "outsideClick"
then
popover-trigger="myTrigger">Click Me</button>
Pls check in below URL:
https://codepen.io/minhdynasty/pen/ozvAPJ
It will close th pop up
support me for set link on the button that works in both responsive mode.
<button type="submit" class="btn btn-primary btn-learn">Get now <i class="icon-arrow-right3"></i></button>
I tried this also..
<p><a class="btn btn-primary btn-learn">send Request <i class="icon-arrow-right3"></i></a></p>
in this original code where i should include link
If you are asking how to add a link, in the second piece of code add an href parameter, like so:
<p>send Request <i class="icon-arrow-right3"></i></p>
I am new to programming and just trying to get a simple button to link to google. However it seems every time I press it, it disappears. Any help would be great.
Below I have put my simple button using Boostrap, I just used the button and added an href to link to google with an i class of fa-edit,
<a href="https://www.google.se" class="btn btn-danger">
<i class="fa fa-edit fa-fw"></i>
google
</a>
Fiddle link
I'm sure it's a silly mistake, but any help would be great.
If you add the target attribute it will know to open in a new window I think that is why you are not having any luck making it work in your fiddle.
<a class="btn btn-danger" href="https://www.google.se/"
target="_blank"> <i class="fa fa-edit fa-fw"></i> google</a>
I am converting my bootstrap 2 site to bootstrap 3 and am a bit stuck on a particular control which is several sets of tab pages controlled by toggle buttons.
Here is an example of my working bs2 code:
http://bootply.com/97187
If I run this code in bs3, I get this:
http://bootply.com/97189
The problem as you will see is that the buttons no longer behave like a group of radio buttons. They toggle individually.
I am currently here:
http://bootply.com/97184
This looks like it works but it doesn't. The grey colour you get when you click on a button is in fact, the "I've now got the focus" colour. Click somewhere else and it goes back to white.
I really need the buttons to toggle as they did in bs2. What small thing am I neglecting here?
Your problem is in here:
<div class="well well-sm">
<span>Set A:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default active" href="#tab1" data-toggle="tab">1</button>
<button class="btn btn-sm btn-default" href="#tab2" data-toggle="tab">2</button>
</div>
<span> Set B:</span>
<div class="btn-group">
<button class="btn btn-sm btn-default" href="#tabA" data-toggle="tab">A</button>
<button class="btn btn-sm btn-default" href="#tabB" data-toggle="tab">B</button>
<button class="btn btn-sm btn-default" href="#tabC" data-toggle="tab">C</button>
</div>
</div>
Adding the class active to the button class for tab1 seemed to prevent the buttons from toggling as you want them to. Simply removing the active class seems to fix the problem.
Demo: http://bootply.com/97199
Ok, I've been playing around quite a bit and got to an acceptable solution.
Unlike the Bootstrap 2 version, it requires a bit of JavaScript.
Here it is: http://bootply.com/97426
The only thing it doesn't do is group the button groups into a single component but this is acceptable, unless someone can find a way to do this as well.
Would be nicer if Bootstrap just worked the same way as V2 in this case.