Placing button below table is not working

Question

With this HTML I cannot place the buttons below the table. I tried several ways, the current one was another attempt.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <form style="width:400px; margin: 0 auto;">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Nome</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let operator of dataSource">
                            <td>{{ operator.operatorId }}</td>
                            <td>{{ operator.name }}</td>
                        </tr>
                    </tbody>
                </table>                
            </form>          
      </div>
      <button type="submit" class="btn btn-primary" >Atualizar</button>
      <button type="submit" class="btn btn-primary" >Deletar</button>  
    </div>
</div>

See how the buttons appear Update and Delete

Answer 1

The ideal would be to "encapsulate" the Btns within a .row as the documentation says. Besides, I don’t see why you put your <table> within a <form>

Test with this code to see if it solves. Note that I changed the tag form by a div and separated the btns into another row

NOTE: This code works both in BS3 and 4

Tip: Check by inspecting the elements or in your CSS if the first . Row with the table is not with position:absolute setate.

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


  <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div style="width:400px; margin: 0 auto;">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Nome</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let operator of dataSource">
                            <td>{{ operator.operatorId }}</td>
                            <td>{{ operator.name }}</td>
                        </tr>
                    </tbody>
                </table>                
            </div>          
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <button type="submit" class="btn btn-primary" >Deletar</button>  
        <button type="submit" class="btn btn-primary" >Atualizar</button>
      </div>
    </div>  
</div>