We Keep Coding

Why bootstrap float-right class not working for my button?

The bootstrap float-right class did not work with my buttons.
This is my html code snippet:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<button type="button"
id="reset_button"
class="btn btn-outline-secondary btn-lg float-right"
disabled="disabled">Reset</button>
<button type="button"
id="convert_button"
class="btn btn-primary btn-lg float-right"
disabled="disabled">Submit</button>
</div>
I want to make buttons align right but when I add the float-right class in both the buttons it doesn't work.
Can anyone please tell me what's wrong with my code and how can I fix this...

Instead of float there are probably better Bootstrap options.
Try removing the float-right and instead use d-flex with justify-content-end on the top line of your code like this....
<div class="container-fluid d-flex justify-content-end">
<button type="button" id="reset_button" class="btn btn-outline-secondary btn-lg" disabled="disabled">Reset</button>
<button type="button" id="convert_button" class="btn btn-primary btn-lg"
disabled="disabled">Submit</button>
</div>

The code is working for me. I just copied your snippet and buttons are on the right side.
Problem is meaby in parent DIRs with different CSS or something else is rewriting your style.
You can also see this, when you run your snippet here.

Like previous answers has stated, maybe there are some other styles in a parent div or element that aren't compatible with the float classes.
Try adding in a parent div the clearfix Bootstrap class, that should solve the issue in your code.

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>

Google Translate font tag

When I start translating on my web page (right click -> Translate to English), and then click on submit button on my form, the text in the button is multiplied. I realised that google translate wraps text in my button in double font tags, and if I click on the button more than one time, the text will mulitply.
Here is code before translation:
<button type="button" class="btn btn-success-ox btn-block btn-spin">
Update app details
</button>
After translatation and clicking on button 3 times:
<button type="button" class="btn btn-success-ox btn-block btn-spin">
<font><font class="">
Update app details
</font></font>
<font><font>
Update app details
</font></font>
<font><font>
Update app details
</font></font>
</button>
I am interested if there is way to intercept a function that adds font tags, or somehow to not add font tags at all?

Add the 'notranslate' class to the element you wish to block from containing the Google <font> tag:
<button type="button" class="btn btn-success-ox btn-block btn-spin">
<span class="notranslate">Update app details</span>
</button>

Bootstrap: Collapse and Tooltip together

I want to know if its possible to have tooltip on a collapse anchor tag. The code which is use for collapse is:
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Data</a>
It works fine but now I want to add a tooltip to it. So I changed the code to:
<a data-toggle="collapse tooltip" title ="Tooltip Message" data-parent="#accordion" href="#collapseOne">Data</a>
Now it shows the tooltip but the collapse function does not work. What changes I have to do so that both functionality works. I know the text of anchor tag can actually show the message I want to use as tooltip message but just want to know if its possible to have both functionality together

From the Bootstrap Javascript overview page:
Component data attributes
Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.
Try this:
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span data-toggle="tooltip" title="Tooltip Message">Data<span>
</a>

Another solution is to change trigger for tooltip. Default trigger is:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Which will work like this:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
But you can change it to:
$(function () {
$('[data-tooltip="true"]').tooltip()
})
Which will work like this:
<button type="button" class="btn btn-default" data-tooltip="true" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

Load <div> in javascript

I am facing problem in loading div into my javascript,
My code is:-
$(document).ready(function()
{
$('#example').hide();
$("#myDiv").tooltip({trigger:'hover',placement:'left',html:true,title:'Rate Us'}).popover({trigger:'click',placement:'top',content:$("#example").html(),});
});
<div id="example">
<button type="button" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i></button>
</div>
I am not able to load button in the example div on popover.
What should I write in content:$("#example").html(), to load example div?
Please help me.

you cannot use content: for html content on popovers without setting html:true
see here for more information about popovers http://getbootstrap.com/javascript/#popovers
jsfiddle http://jsfiddle.net/CsR5Z/1/