I'm attempting to redirect users to a URL that includes a question mark. The issue is on click users are directed to the URL leading up to the '?'. So if my designated URL is www.abc.com/help?blahblah users will be directed to www.abc.com/help.
The problem is I don't know whether or not there will be a '?' in the URL, so I cannot have a blanket case..
My form is as follows
<form action="<%=reviewLink%>">
<div class="btn-group" role="group">
<button type="submit" class="btn btn-success small-button">
<i class="fab fa-review"></i>
</button>
<button type="submit" class="btn btn-outline-success large-button"> Review
</button>
</div>
</form>
I ended up solving it on my own. I went ahead and added the following to the button elements.
<a href="<%=reviewLink%>" target="_blank" rel="noreferrer noopener">
Below is my first attempt to build a Razor page w/ Boostrap. When the page is first brought up, the form is collapsed. When the user clicks on the Revisit a quote button, the form then expand. I followed the documentation on Bootstrap's site to the dot, but no idea getting the toggle to work. What am I missing?
#page "/"
<div>
<label>What would you like to do?</label>
<div>
<button class="btn btn-primary"
type="button">
Create a new quote
</button>
</div>
<div>
<button class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#quotesearchForm"
aria-expanded="false"
aria-controls="quotesearchForm">
Revisit a quote
</button>
<div class="collapse" id="quotesearchForm">
<form>
<input /><div class="dropdown" /><button></button>
</form>
</div>
</div>
</div>
Mystery solved...out of the box Blazor only has the bare-bones structure from Bootstrap and does not have the javascript portion. What Blazor wants you to do is to use its code to eliminate the use of javascript. Blazor does that by using its SignalR technology to transmit very small amount of data over the wire to do that. Tim Corey has a YouTube video on this.
How would one put a link on a button with bootstrap?
there are 4 methods in the bootstrap documentation:
Link Button
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
The first one doesn't work for me, no button shows, just the text with the link, have a feeling its the theme im using.
The second one shows the button which is what i want, but whats the code make the button link to another page when clicked?
Cheers
The easiest solution is the first one of your examples:
Link Button
The reason it's not working for you is most likely, as you say, a problem in the theme you're using. There is no reason to resort to bloated extra markup or inline Javascript for this.
If you don't really need the button element, just move the classes to a regular link:
<div class="btn-group">
<a href="/save/1" class="btn btn-primary active">
<i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> Save
</a>
Cancel
</div>
Conversely, you can also change a button to appear like a link:
<button type="button" class="btn btn-link">Link</button>
You can call a function on click event of button.
<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">
<script>
function relocate_home()
{
location.href = "www.yoursite.com";
}
</script>
OR
Use this Code
Link Button
Another trick to get the link color working correctly inside the <button> markup
<button type="button" class="btn btn-outline-success and-all-other-classes">
Button text with correct colors
</button>
Please keep in mind that in bs4 beta e.g. btn-primary-outline changed to btn-outline-primary
This is how I solved
<a href="#" >
<button type="button" class="btn btn-info">Button Text</button>
</a>
Combining the above answers i find a simply solution that probably will help you too:
<button type="submit" onclick="location.href = 'your_link';">Login</button>
by just adding inline JS code you can transform a button in a link and keeping his design.
You can just simply add the following code;
<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>
Just use the anchor tag as a button. Change the role to type as below in bootstrap 5.
<a type="button" class="btn btn-info" href="#">Button</a>
I think the most easiest and clean approach is (without any extra javascript functions):
<a class="btn" href="#">
<i class="fas fa-cloud"></i>
</a>
To use fontawesome icons, you can just put the following link in your header:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
And that's all
As you are asking with Bootstrap, the best option in my opinion is to choose the class btn-link.
<button type="button" class="btn btn-link">Link</button>
If you want the btn-link to send you to another page or activate something such as a modal, you can include the onClick like others suggested.
If you really need the button element, a nice trick that I found to make it work looks like this:
Create a data attribute with the url that you want to redirect
Attach an event listener to fetch the url from the data attribute on element
Open the url using window.open or your preferred method
Html file
<button type="button" id="newpagebutton" class="btn btn-primary mt-4 ml-3">Open new page</button>
Javascript file
$( "#newpagebutton" ).attr('data-buttonlink', 'https://www.apple.com')
$( "#newpagebutton" ).click(function() {
const buttonlink = $("#newpagebutton").data('buttonlink')
window.open(buttonlink)
});
Have a look at how the implementation works on fiddle.js
<div>
<a href='#' className='text-decoration-none'>
<button className="btn btn-primary btn-lg px-5 d-flex justify-content-center" type='submit'>Sign In</button>
</a>
</div>
I'm using Laravel 4 and Twitter Bootstrap 3 to make a simple application, but I have hit something strange when dealing with my forms. I was using an earlier CSS/HTML template system and the submit button worked fine, but now it's entirely unresponsive. I have used the same Laravel Blade code for my form, so I can't figure out why the form refuses to submit.
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<h1>Event Selection</h1>
{{ Form::open(array('action' => 'TicketController#postIndex')) }}
<div class="form-group">
<select id="eventSelect" class="form-control">
#foreach ($events as $event)
<option value='{{$event->eventID}}'>{{ $event->eventName }}</option>
#endforeach
</select>
</div>
<button type="button" id="buttonsub" class="btn btn-primary btn-lg btn-block">Continue</button>
{{ Form::close() }}
</div>
</div>
Full code posted here: https://gist.github.com/verkaufer/6ac3aaf3475cc67c3b96
Is this a Laravel 4 issue or am I just running into something quirky because Twitter Bootstrap 3 is in RC stage?
The type of your button is: button, no submit. Try changing the type from button to submit.
You need to change from:
<button type="button" id="buttonsub" class="btn btn-primary btn-lg btn-block">Continue</button>
To this:
<button type="submit" id="buttonsub" class="btn btn-primary btn-lg btn-block">Continue</button>
Remember that using the right type attribute is quite important. Sometimes it could be for semantic reasons, and sometimes it could for functionality reasons.
What is the proper way to create a button? The first way does not work...
<div class="buttonContainer">
<button type="submit" onclick="moSucess()" >Sign In</button>
</div>
<a id="sincData" href="#sincPage" data-role="button" onclick="moSucess()">Submeter</a>
If you are trying to create a styled JQM button using an a tag, check out the documentation here for this jsfiddle example.
Link button