Bootgrid refresh button not to size

I'm using bootstrap and jquery bootgrid, and all was ok first. Then I started a new project and used bootgrid there. And I get a strange thing: on the grid's control panel, refresh button is smaller than others. But I didn't changed any configs in bootgrid, all are default.

Why it can be and how to fix it? This buttons are generated automatically and i have no ideas...

UPD

JS:

$(function () {
	var autoOutGrig = $("#autoOutGrig").bootgrid({
		navigation: 3,
		ajax: true,
		url: "controllers/getListFiles",
		post: function () {
			return {
				type: 'req',
				expanded: $('#exp').text()
			};
		},
		responseHandler: function (response)
		{
			return response.data;
		}			
	});

HTML:

<div id="autoOut" class="tab-pane fade in active">
	<span id="exp" style="display: none;"></span>
	<h3>Auto OUT</h3>
	<table id="autoOutGrig" class="table table-condensed table-hover table-striped">
		<thead>
			<tr>
				<th data-column-id="date" class="col-md-3">Дата/Время</th>
				<th data-column-id="expander" data-formatter="expander" class="col-md-1">Список</th>
				<th data-column-id="file" class="col-md-4">Имя файла</th>
				<th data-column-id="uid" class="col-md-4">UID</th>
				<th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th>
				<!--					<th data-column-id="respType" class="col-md-2">Тип ответа</th>
									<th data-column-id="respName" class="col-md-2">Имя ответа</th>-->
			</tr>
		</thead>
	</table>
</div>

UPD: styles from chrome inspect.

UPD2: code from the answer below doesn't work on my server. But it works fine on stack snippset!

<!-- begin snippet: js hide: false --> <!-- language: lang-html -->

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css" rel="stylesheet"/>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script>


<script>
 $(function () {
      var testGrid = $("#testGrid").bootgrid({
        navigation: 3,
        ajax: true,
        url: "controllers/getListFiles",
        post: function () {
          return {
            type: 'req',
            expanded: $('#exp').text()
          };
        },
        responseHandler: function (response)
        {
          return response.data;
        }
      });
    });
</script>



    <div id="autoOut" class="tab-pane fade in active">
      <span id="exp" style="display: none;"></span>
      <h3>Auto OUT</h3>
      <table id="testGrid" class="table table-condensed table-hover table-striped">
        <thead>
          <tr>
            <th data-column-id="date" class="col-md-3">Дата/Время</th>
            <th data-column-id="expander" data-formatter="expander" class="col-md-1">Список</th>
            <th data-column-id="file" class="col-md-4">Имя файла</th>
            <th data-column-id="uid" class="col-md-4">UID</th>
            <th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th>
          </tr>
        </thead>
      </table>
    </div>

<!-- end snippet -->

I'd make sure that you are pulling in the latest CSS libraries for your project

• https://cdnjs.com/libraries/jquery
• https://cdnjs.com/libraries/twitter-bootstrap
• https://cdnjs.com/libraries/jquery-bootgrid

It appears to be working okay with the code you provided:

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

$(function () {
  var autoOutGrig = $("#autoOutGrig").bootgrid({
    navigation: 3,
    ajax: true,
    url: "controllers/getListFiles",
    post: function () {
      return {
        type: 'req',
        expanded: $('#exp').text()
      };
    },
    responseHandler: function (response)
    {
      return response.data;
    }           
  });
});

<!-- language: lang-html -->

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script>


<div id="autoOut" class="tab-pane fade in active">
  <span id="exp" style="display: none;"></span>
  <h3>Auto OUT</h3>
  <table id="autoOutGrig" class="table table-condensed table-hover table-striped">
    <thead>
      <tr>
        <th data-column-id="date" class="col-md-3">Дата/Время</th>
        <th data-column-id="expander" data-formatter="expander" class="col-md-1">Список</th>
        <th data-column-id="file" class="col-md-4">Имя файла</th>
        <th data-column-id="uid" class="col-md-4">UID</th>
        <th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th>
      </tr>
    </thead>
  </table>
</div>

<!-- end snippet -->