We Keep Coding

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>

Open more than one materialize modal on same page in meteor js

id of 1st modal is "modal1" and 2nd modal id is "modal2"
HTML code ->
1st Modal Call on Same Page
<div class="input-field col s12 m6 left-align">
<button class="btn waves-effect waves-light modal-trigger importButton" style="height:45px !important">Import Data
<i class="material-icons right">import_export</i>
</button>
</div>
2nd Modal Call on Same Page
<div class="modal-trigger" style="cursor: pointer;">
<img src="abc.png" alt="" class="circle">
</div>
JS Code ->
'click .modal-trigger': function(event) {
event.preventDefault();
$('#modal1').openModal();
},
'click .importButton':function(event) {
event.preventDefault();
$('#modal2').openModal();
}

You have to give refrence of another template {{>import}} (my template
name is import) in which my modal2 is defined.

Your question is not very clear. From what I understand, there are 2 modals that can be opened from the same template. The catch here is that bootstrap does not support multiple modals stacking up over each other.
Multiple open modals not supported Be sure not to open a modal while
another is still visible. Showing more than one modal at a time
requires custom code.
So, before the first modal is open, you must first always check if the other modal is in closed state, and similarly, before the second modal is open, you must check if the first modal is closed, if not then close it.
There is one package in meteor that appears to help handle multiple modals. you can check out peppelg:bootstrap-3-modal to get a better implementation of bootstrap modals in meteor. Specifically the part where they mention the use of below:
Modal.allowMultiple = true

jQuery expand all and collapse all with inspinia

I'm using the Inspinia theme.
An example page
If you click the fa-chevron icon in the upper right of each ibox, it collapses the ibox.
I want to collapse all the iboxes with a collapse all button. And then expand them all with an expand all button.
The buttons look like:
<button type="button" data-action="expand-all" class="btn btn-white btn-sm">Expand All</button>
<button type="button" data-action="collapse-all" class="btn btn-white btn-sm">Collapse All</button>
I want clicking "Collapse All", to, in-effect, click all of the minimize panel buttons.
How?

I'm not sure what version you are using, but for the AngularJS implementation in directives.js you can see the function iboxTools that handles this. If you just want to use jQuery to manually do it it's as simple as:
//slide up (or down) all ibox content
$('div.ibox-content').slideUp();
//change the chevron
$('.ibox-tools a.collapse-link i').toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');

There are two popovers . At the same time both popovers should not be shown.At a time only one popover should be visible.Is it possible?

How can i have a dismissible popover that should hide when clicking on button also?
Right now only when clicking outside popover will close.But i want it to close when clicking on that button also.
<button popover-template="dynamicPopover.templateUrl" data-toggle="popover"
popover-title="{{dynamicPopover.title}}" popover-trigger="focus" class="btn btn-default" popover-placement="bottom" popover-elem>Popover With Template</button>
This is the link plnkr.co/edit/ioN7D5OQyRF7KMYw36l0?p=preview

Just remove
popover-trigger="focus"
here is an updated plunkr.
hope it helps.

How do I make bootstrap Collapse sections also submit a form?

I have a page with lots of areas that you can click to collapse, but I would like to save the users preferences for the parts they collapse in their account server-side so when they revisit the page the parts they collapsed previously will stay that way.
My problem is, I cant get the button to both collapse and submit a http post form in the background, I can do one or the other but not both at the same time on one button.
Here is the button the user clicks:
<button type="button" class="btn btn-mini btn-link" data-toggle="collapse" data-target="#Section_1" name="button" value="save_collapse_choice_1"><strong>Section 1</strong></button>
And here is the section that would collapse in or open up
<div id="Section_1" class="collapse in">
This will collapse (And does)
</div>
Then I simply have a form called backend.php which is in the page and if I didn't have the data-toggle="collapse" on my button, then that form submits successfully with the name button and the value save_collapse_choice_1
Obviously when I have this in the actual page the class="collapse in" would have some PHP in there to add or remove the "in" part dependant on what setting is stored on the server for this users account.

Why not use $.ajax() and post to the backend.php the value of the open/close divs and run the open-close in the same page?
Something like
$('button[data-toggle="collapse"]').click(function() {
/* open and close code */
$.ajax() {
url: 'backend.php&save-collapse-choice'
});
});