In this code snippets post I provided reusable Bootstrap Modal Dialog with code example.

Bootstrap JavaScript modal

Bootstrap JavaScript modal plugin you can use to add confirm dialogs, user notifications, or completely custom popup content.

Reusable bootstrap confirm box

Add following html code in your shared layout view

<!-- Modal -->
   <div class="modal fade" id="bsModal" tabindex="-1" role="dialog" aria-labelledby="bsModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
       <div class="modal-content">
     <div class="modal-header">
   <h5 class="modal-title" id="exampleModalLabel">Confirm message</h5>
  <button type="button" id="btnClose" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
          </button>
       </div>
    <div id="confirmMsg" class="modal-body">
     
     </div>
  <div class="modal-footer">
 <button type="button" id="btnCancel" class="btn
btn-warning" data dismiss="modal">Cancel</button>
<button type="button" id="btnOk"  class="btn btn-success">Ok</button>
     </div>
       </div>
         </div>
          </div> 

jQuery reusable model confirms box code to perform actions like delete, update, reject etc

Button Delete, Update, Reject events

//Perform delete 
$("#btnDelete").click(function (e)
{ 
 //Delete product on confrim ok click
  BsConfirmModel("Are you sure you wish to delete?", "Delete", e);
});
 
//Perform update 
$("#btnUpdate").click(function (e) {
 //Update order on confrim ok click 
  BsConfirmModel("Are you sure you wish to update?", "Update", e);
});
 
//Perform Reject order
$("#btnReject").click(function (e) {
  //Reject order on confrim ok click   
  BsConfirmModel("Are you sure you wish to reject?", "Reject", e);
}); 

Reusable bootstrap confirm function

function BsConfirmModel(msg, actionType,event) {
    event.preventDefault();
    $("#confirmMsg").text(msg);
    $('#bsModel').modal({
        backdrop: 'static',
        keyboard: false
    });
 
    $("#bsModel").off('click').on('click', '#btnOk', function (e) {
        e.preventDefault();
        switch (actionType) {
            case 'Delete':
                //code block
                // Ajax call to delete
 
                break;
            case 'Update':
                //code block
                // Ajax call to update
                break;
            case 'Approve':
                //code block
                // Ajax call to approve order
                break;
            
            case 'Reject':
                //code block
                // Ajax call to reject order
                break;
 
            default:
                //code block
                //default ajax call
                break;
 
        }
        $('#bsModel').modal('hide');
        $('#bsModel').data('modal', null);
    });
 
    $("#btnCancel").off("click").on('click', function (e) {
        e.preventDefault();
        $('#bsModel').modal('hide');
        $('#bsModel').data("modal", null);
    });
 
    $("#btnClose").off("click").on("click", function (e) {
        e.preventDefault();
        $("#bsModel").modal("hide");
        $('#bsModel').data("modal", null);
    });
} 

I want to perform search for my products if someone entered some search value in

Input search text box and hit keyboard enter button.

The .nav-tabs class is used to generate a tabbed interface with nav-tabs as tabs in bootstrap.

Tab Nav

<ul class="nav nav-tabs">
          <li class="nav-item">
          <a class="nav-link active" href="#userList">User list </a>
          </li>
          <li class="nav-item">
          <a class="nav-link" href="#details">Details</a>
          </li>
          <li class="nav-item">
          <a class="nav-link" href="#rewards">Rewards</a>
        </li>
  </ul> 

Tab content (Tab pane)

<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show
active" id="userList" role="tabpanel" aria-labelledby="user-tab">some actual
list data here..</div>
<div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">some
actual details data here…</div>
<div class="tab-pane fade" id="rewards" role="tabpanel" aria-labelledby="rewards-tab">Rewards data here...</div>
</div>    

jQuery Code to show specific tab

Show first tab

$(".nav-tabs a:first-child").tab("show");

Show 2nd tab

$(".nav-tabs a:nth-child(2)").tab("show"); 

Show last tab

$(".nav-tabs a:last").tab("show"); 

To hide tab simply remove active class from nav-item

$(".nav-tabs a.active").removeClass("active");