We Keep Coding

Page keeps refreshing when I click on a Bootstrap Modal

I have a page with two buttons connected to two different bootstrap modals. They were all working fine but all of a sudden stopped. Whenever I click on either button now, the page just keeps refreshing as opposed to displaying the respective modal. I do not know what the problem is as there is no error in the console.
The site is hosted on https://storzy.netlify.app/
I have searched high and low but can't seem to find what might be stopping the modal from displaying correctly now.
Please how do I go about stopping the page from refreshing and showing the correct modal instead?
Thank you.

change the form to div for your login and signup parents
<div class="form-inline mt-3 mt-lg-0">
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal">Sign up</button>
</div>

If the button is within a form, the default behavior is submit. If the button is not within a form, it will do nothing.
Hence to avoid the page refresh, add type="button" to the buttons to prevent it.
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal" type="button">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal" type="button">Sign up</button>

Bootstrap Button Hover issue

When I hover over a bootstrap button on my website it doesn't show the link in the bottom left corner in chrome. Am I missing something here? Here is the code I am currently using for the button.
<button type="button" class="btn btn-primary navbar-btn m-l-15 m-r-15" onclick="location.href='{$relative}/upload'">{translate c='menu.upload'}</button>

You can use an <a> element with a role of button and style it to look like a button but using the same classes that you are currently using.
Only caveat to this would be that you should determine the correct element to use in your situation - for example - a link (a element) should navigate you to a new location or context - whilst a button should be used if it does something in the same location / context.
Also - if the bottonhad other functionality that navigating to the desired location - you will need to re-introduce the click handler and apply logic to perform that function.
<a
href="{$relative}/upload"
role="button"
class="btn btn-primary navbar-btn m-l-15 m-r-15"
>{translate c='menu.upload'}</a>

You can replace it with a link , and style it.
Have a visit to Bootstrap website and you will find Details here.

You can put your link as follows and it may solve your problem
<a href="your_link_here">
<button type="button" class="btn btn-primary navbar-btn ml-5 mr-5">
{translate c='menu.upload'}
</button>
</a>

First change the margin-left and margin-right from m-l-15 and m-r-15 to ml-1 and mr-1. In bootstrap ml and mr class only take values from 1 to 5. It don't takes the values more than 5 in class. You have to give it to css.
Try This:
<a role="button" class="btn btn-primary navbar-btn ml-5 mr-5"
href="{$relative}/upload">{translate c='menu.upload'}</a>

Using Html Extension with ActionLink

I have written an MVC5 Html extension to determine whether a button I have on screen is disabled.
It is as below:
public static HtmlString IsButtonEnabled(this HtmlHelper html, bool buttonEnabled)
{
return new HtmlString(buttonEnabled ? "" : "disabled=\"disabled\"");
}
My cshtml is as below:
<div class="col-sm-12">
<a class="btn btn-default btn-block btn-metro" #Html.IsButtonEnabled(Model.IsMyButtonEnabled)
onclick="location.href='#Url.Action("Index","MyController")'">
<img src="~/images/myImage.png"> <span class="h2">My Button</span>
</a>
</div>
The button is getting disabled as expected - however, due to using the onclick allows it to still be clicked. Is it possible to use my Html Extension with a Html.ActionLink?
I realise I could quite easily prevent the click using some js on the page - however, I would like to avoid that if possible.
UPDATE
The extension method is used by 10 different buttons on the screen. The generated markup for one of the buttons is as below:
<div class="col-sm-12">
<a class="btn btn-default btn-block btn-metro" disabled="disabled" href="/MyController/Index">
<img src="/myApp/images/myImage.png"> <span class="h2">My Button</span>
</a>
</div>
With Stephen comment below I change the on click to just be href - however, even though the button is disabled I can still click on it and the site navigates to the url specified

You could change the "a" tag to "button" tag. The URL tag is not meant to be disabled.
<div class="col-sm-12">
<button class="btn btn-default btn-block btn-metro" #Html.IsButtonEnabled(Model.IsMyButtonEnabled)
onclick="location.href='#Url.Action("Index","MyController")'">
<img src="~/images/myImage.png"> <span class="h2">My Button</span>
</button>
</div>

button href not working

<button type="submit" class="btn btn-primary submitSignUp" >Sign Up</button>
Why does this not work? I have a different page called signUp and on-click of the sign-up button, I want it to go to the signUp page.

You should not place <button> inside <a> element as <button> consumes mouse events preventing <a> element click generation.
So try just this
Sign Up

to have the same result I would suggest you to change your code to this:
<a class="btn btn-primary submitSignUp" href="signUp.html">Sign Up</a>

Pop a temporary window with buttons next to clicked element in AngularJS

I have a page (using Bootstrap and AngularJS) with several instances of the same button, each instance relates to a particular element the button is next to.
I want to implement a temporary window that will pop as soon as I click on one of the instances and will include a number of buttons.
For instance, imagine a table with data, each record showing different status and hence the options that will be offered will depend on the status of the record. Also, at the right of each record there is a button giving access to the possible actions on the record. Whenever I click on a button, a small window needs to be shown next to the clicked button showing the applicable actions (e.g. "Delete", "Activate", "Retire", etc.).
The size of the temporary window will adjust according to the number of buttons shown.

I found a nice solution (at least, it very well complies with my needs). It is a bootstrap dropdown button into which it is possible to embed a dynamic list of buttons (again, depending on the contents of the record in my example).
So, the HTML would look like:
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<button ng-if="Delete" type="button" class="btn btn-warning" ng-click="Delete($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Delete </font></button>
<button ng-if="Retire" type="button" class="btn btn-warning" ng-click="Retire($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Retire </font></button>
<button ng-if="Activate" type="button" class="btn btn-warning" ng-click="Activate($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Activate</font></button>
<button ng-if="Promote" type="button" class="btn btn-warning" ng-click="Promote($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Promote </font></button>
</div>
</div>
Thanks to those that posted suggestions.

<td style="position:relative">
<button>
button to be clicked
</button>
<div style="position: absolute; display:inline-block; /*width, height, top, bottom*/ these option you need to set">
option1 option 2 option 3
</div>
</td>
On click of the button hide/show this div. Because the div-Element is absolute to its parent container, it will be always near the button if you give proper attributes.