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>
Related
so I'm currently trying to disable a button but also have the same button type. If anyone can help me with examples it would be great! Thanks so much to the ones that help! :D
<!--- I want this one to be the working button. --->
<a
class="project-link"
target="_blank"
href="/gimkit"
>Use <i class="fas fa-check-circle"></i> </a
>
<!--- this one to be the button that doesn't work. (disabled)
--->
<a
class="project-link"
target="_blank"
href="/support"
>Help <i class="fas fa-question-circle"></i> </a
>
I want something like this, but have the Help Button with a question mark to be faded instead of the normal button.
https://i.stack.imgur.com/QXRMz.png
For <button> element, just add the disabled property:
<button type="button" disabled>Help</button>
I think the button-elements answer is the best solution.
But if you really want to stick with the Anchor-Tags, you could also try to add a helper css class. For example you can use something like this:
<a
class="project-link disabled"
target="_blank"
href="/support"
onclick="return false;"
>Help <i class="fas fa-question-circle"></i> </a
>
And the css of the .disabled class could look like this:
.project-link.disabled{
opacity:0.5;
}
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'm using the framework bootstrap 4 and I was wondering why is my button not re directing the user to another page?
<button type="button" a href="https://www.google.com" class="btn btn-outline-primary">Contact Us <i class="fas fa-envelope"></i></button>
Buttons are not links (and don't have a boolean a attribute).
If you want a link, use a link:
Contact Us <i class="fas fa-envelope"></i>
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