Boostrap table footer not displaying at the bottom

Question

I have a Bootstrap responsive table in my AspNet Web API project which not showing me foot text within the table. My foot text shows on the top of the page outside table. I mean I'm trying to keep the footer of bootstrap modal to bottom but I can't, this is my html structure:

<div class="container">

<div class="table-responsive">
         <table class="table table-bordered table-hover" id="Countries">
             <thead>
                 <tr>
                     <th>
                         CountryId
                     </th>
                     <th>
                         CountryName
                     </th>


                     <th class="col-md-2">
                        Action
                     </th>
                 </tr>
             </thead>
             <tbody class="tbody"></tbody>
             <tfoot> All text I put here shows at the top of the page outside of the table</tfoot>

         </table>
     </div>
</div>

Solution

This is very simple because you didn't have defined any row in footer that's why. And also remember to use table-responsive class with table only rather then with div.

Look below code.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>



<div class="container">
  <table class="table table-responsive table-bordered table-hover" id="Countries">
    <thead>
      <tr>
        <th>
          CountryId
        </th>
        <th>
          CountryName
        </th>
        <th>
          Action
        </th>
      </tr>
    </thead>
    <tbody class="tbody"></tbody>
    <tfoot>
      <tr>
        <td colspan="3">All text you were puting here was shown at the top of the page outside of the table but now it is not.</td>
      </tr>
    </tfoot>
  </table>
</div>