modal sizes support modal-lg for screen md size

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
<table border="1" cellpadding="5" cellspacing="2" id="sort" class="table table-bordered table-hover">
   <thead>
      <tr>
         <th width="10%">No</th>
         <th width="40%">Name</th>
         <th width="20%">Date</th>
         <th width="10%">Status</th>
         <th width="10%">Edit</th>
         <th width="10%">Delete</th>
      </tr>
   </thead>
   <tbody class="ui-sortable">
      <tr id="1" cat_id="88" cat_name="TCS" style="cursor: move;">
         <td id="order_1" style="vertical-align: middle;">1</td>
         <td style="vertical-align: middle;"> <span id="span1">TCS</span> (9)</td>
         <td style="vertical-align: middle;">Dec 20, 2016</td>
         <td style="vertical-align: middle;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox" checked=""><span></span></label></td>
         <td style="vertical-align: middle;"><a data-toggle="modal" data-target="#editCategoryname" data-categorid="1" id="cat_1" data-catname="TCS" class="btn btn-sm btn-primary editcatclick"><i class="icon-pencil"></i></a></td>
         <td width="20%"><a href="#" class=" btn btn-sm btn-danger deletecat"><i class="icon-trash"></i> </a></td>
      </tr>
      <tr id="2" cat_id="107" cat_name="Infy" style="cursor: move;">
         <td id="order_2" style="vertical-align: middle;">2</td>
         <td style="vertical-align: middle;">* <span id="span2">Infy</span> (5)</td>
         <td style="vertical-align: middle;">Dec 27, 2016</td>
         <td style="vertical-align: middle;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag"...

CSS

.modal-dialog {
  position: relative;
  width: auto;
  max-width: 600px;
  margin: 10px;
}
.modal-sm {
  max-width: 300px;
}
.modal-lg {
  max-width: 900px;
}
@media (min-width: 768px) {
  .modal-dialog {
    margin: 30px auto;
  }
}
@media (min-width: 320px) {
  .modal-sm {
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 620px) {
  .modal-dialog {
    margin-right: auto;
    margin-left: auto;
  }
  .modal-lg {
    margin-right: 10px;
    margin-left: 10px;
  }
}
@media (min-width: 920px) {
  .modal-lg {
    margin-right: auto;
    margin-left: auto;
  }
}

JavaScript

$(document).ready(function()
{
        $('#editCategorynameform').bootstrapValidator(
        {
                feedbackIcons:
                {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                },
                fields:
                {
                        catnameedit:
                        {
                                feedbackIcons: 'false',
                                validators:
                                {
                                        notEmpty:
                                        {
                                                message: 'Category Name cannot be empty'
                                        }
                                }
                        }
                }
        }).on('success.form.bv', function(e)
        {
                e.preventDefault();
                addCatSbmt();
        });
});
$('#editCategoryname').on('show.bs.modal', function(e)
{
        var cat_name = $(e.relatedTarget).data('catname');
        var cat_id = $(e.relatedTarget).data('categorid');
        $(e.currentTarget).find('input[name="catnameedit"]').val(cat_name);
        $(e.currentTarget).find('input[name="catidhiddenedit"]').val(cat_id);
});

function addCatSbmt()
{
        var category_name_modal = $("#catnameedit").val();
        var category_id_modal = $("#catidhiddenedit").val();
        var trid = category_id_modal;
        var texttoreplace = category_name_modal;
        $("#span" + trid).text(texttoreplace);
        $("#cat_"+trid).data('catname',texttoreplace)
        $('#' + trid).find(".editcatclick").attr('data-catname', texttoreplace);
          $('.closetagdialog').trigger('click');
}