Develop Reference

dropdown is working in desktop but not in mobile

Dropdown element is working fine on desktop view but not on mobile view. Click and hover events are not working. What should I do, so them will work on mobile view. I am a new learner stuck with this problem, I tried to google it but couldn't find any solution.
<div class='dropdown-table'>
<button class='dropbtn dottedOpenOrders'>︙</button>
<div class='dropdown-content'>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-default btn-edit-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/edit-dropdown.png" /> </span><span>Edit</span></a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-danger btn-close-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/cancel-dropdown.png" /> </span> <span>Cancel </span> </a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-default btn-play-pause-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/pause-dropdown.png" /> </span> <span>Pause/Resume </span> </a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-warning btn-exit-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/exit-dropdown.png" /> </span> <span>Force exit </span> </a>
</div>
</div>

How can you trigger an even when clicking on a bootstrap button without an id?

For a javascript project, I need to be able to interact with three bootstrap buttons.
The code for the buttons goes as follows:
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
I am not allowed to modify this line, so simply adding an id to the button is out of the question.
That being said, how can I add an click listener to these buttons and interact with them?
Thank you for your time.

You can use querySelector, see example below:
var button1 = document.querySelector('[data-id="0"]')
var button2 = document.querySelector('[data-id="1"]')
var button3 = document.querySelector('[data-id="2"]')
button1.addEventListener("click", () => {
console.log("button1");
});
button2.addEventListener("click", () => {
console.log("button2");
});
button3.addEventListener("click", () => {
console.log("button3");
});
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>

They already seem to have ids that you can query for using querySelector along with attribute selectors.
document.querySelector("a[data-id='0']").addEventListener("click", () => {
console.log("You clicked data id 0");
});
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>

Try to use the classname:
var elements = document.getElementsByClassName("btn");
var myFunction = function() {
console.log("Button with data-id", this.getAttribute("data-id"), "clicked");
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunction, false);
}
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>

Simply use data-id as selector.
see example
let elem = document.querySelector('[data-id="0"]');
console.log(elem)
elem.click();
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>

How to make the buttons horizontal full width

I am trying to create three buttons horizontal and equal in size.
But what I managed to do so far is three buttons full width vertically as shown below.
<section class="section">
<div class="container-fluid">
...
<h2 class="display-5">User Management</h2>
<br>
<br>
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
...
</div>
and the output is:
How can I make them horizontal and taking the full width?

Bootstrap comes with a very powerful Grid system that you can use, utilizing the classes row (for rows) and col (for columns) respectively.
The col class utilizes a number system of 1-12, indicating the size of the column in width. One entire row holds a max possible value of 12. How you choose your layout is entirely up to you. You can even nest the row and col classes as you wish to get the grid that you desire. More about Bootstrap Grid here.
Example:
<div class="row">
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
</div>
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
</div>
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
</div>
</div>
Code snippet example:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
</div>
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
</div>
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
</div>
</div>

Wrap them inside a div, you can remove the btn-block and add col class to take columns automatically, something like below :
<div class="row">
<a class="btn btn-info btn-lg col" role="button" href="{{ url_for('create_user') }}">Create New User</a>
<a class="btn btn-info btn-lg col" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
<a class="btn btn-info btn-lg col" role="button" href="{{ url_for('change_user_password') }}">Change User
Password</a>
</div>

How to make dropdown item a submit

My code below submit's perfectly as i want but the Add & Create new item in the bootstrap dropdown i need to be a submit, i've tried with javascript but then the html5 validation dosen't trigger. Is my only option to try and style the submit button like the bootstrap dropdown-item ?
$('btnWorkorder_Add_Create').click(function(event) {
event.preventDefault();
$('#WorkOrderFrm').append('<input type="hidden" name="btnWorkorder_Add_Create" value="1">');
$("#WorkOrderFrm").valid();
$('#WorkOrderFrm').submit();
});
HTML
<form id="WorkOrderFrm" name="WorkOrderFrm" action="/proc/WorkOrderFrm.php" method="post" autocomplete="off">
<div class="btn-group">
<div class="btn-group">
<button type="submit" id="BtnAdd" class="btn btn-custom btn-sm" name="btnWorkorder_Add">Add</button>
<button type="button" class="btn btn-custom btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="" name="btnWorkorder_Add_Create" id="btnWorkorder_Add_Create">Add & Create New</a>
</div>
</div>

Why are you needing a dropdown if there is only one option?? Why not just use <input type='submit' value='Add And Create New' />

you are missing '#' tag. try this code and let me know if it is still not working
$('#btnWorkorder_Add_Create').click(function(event) {
event.preventDefault();
$('#WorkOrderFrm').append('<input type="hidden" name="btnWorkorder_Add_Create" value="1">');
$("#WorkOrderFrm").valid();
$('#WorkOrderFrm').submit();
});

How to avoid that modal window change CSS on site

As it is usually on any admin page I have 3 buttons next to each other. One for detail, one for edit and one for delete, it looks like:
<a n:href="detail $candidate->id">
<button type="button" class="btn btn-success btn-sm">
<i class="glyphicon glyphicon-search" style="margin-right:0px"></i>
</button>
</a>
<a href="#">
<button type="button" class="btn btn-info btn-sm">
<i class="glyphicon glyphicon-pencil" style="margin-right:0px"></i>
</button>
</a>
<a n:href="delete! $candidate->id">
<button type="button" class="btn btn-danger btn-sm">
<i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
</button>
</a>
After that I decide I need to add "Confirm modal" when user press "DELETE" to avoid missclicks
<a
data-nette-confirm="modal"
data-nette-confirm-title="Confirm"
data-nette-confirm-text="Are you sure you want to delete?"
data-nette-confirm-ok-class="btn-danger"
data-nette-confirm-ok-text="Yes"
data-nette-confirm-cancel-class="btn-success"
data-nette-confirm-cancel-text="No"
class="btn btn-danger"
data-ajax="off" // or class="ajax"
n:href="delete! $candidate->id">
<button type="button" class="btn btn-danger btn-xs">
<i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
</button>
</a>
After this I just get my DELETE button twice that BIG as others, I try to just make it xs but still so much bigger. Is there a way how can I avoid this change?

Try removing:
// or class="ajax"
It overwrites previously defined class="btn btn-danger".