Position right bottom button with angled and boostrap

Question

Use Stripped bootstrap table with Angular 6. That’s the screen:

See that there’s a button plus in the upper left corner and it should be under the table, right side. This is my html

<nav class="navbar navbar-dark bg-dark">
    <a style="display: block; width: 100%; text-align: center; margin: 0;" class="navbar-brand" href="#">SISTEMA ATLAS</a>

    <div>
        <button type="button" class="btn btn-primary">Primary</button>
    </div>
    <div>
        <button type="button" class="btn btn-success">Success</button>
    </div>

  </nav>

<div>
  <table class="table table-striped">
      <thead>
          <tr>
              <th>Código</th>
              <th>Nome</th>
          </tr>
      </thead>
      <!--Table head-->

      <!--Table body-->
      <tbody>
          <tr *ngFor="let operator of dataSource">
              <td>{{ operator.operatorId }}</td>
              <td>{{ operator.name }}</td>
            </tr>
      </tbody>
  </table>

</div>
<div>
  <button type="button" class="btn btn-primary btn-xs row">+</button>
</div>

how I position the button plus in the lower right-hand corner?

EDIT1

see how my new html is and even so, sending does not go down the table, by the way, I can not position anything under the table.

<nav class="navbar navbar-dark bg-dark col-sm-12">
  <!-- <a style="display: block; width: 100%; text-align: center; margin: 0;" class="navbar-brand" href="#">SISTEMA ATLAS</a>  -->
  <div class="col-md-11">
      <button type="button" class="btn btn-primary btn-xs pull-right">Teste</button>
  </div>
  <div class="col-md-1">
      <button type="button" class="btn btn-success pull-right">Novo</button>
  </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
        <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="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th><button type="button" class="btn btn-success pull-right">Enviar</button></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

In the screenshot below, I can show how the Send button looked

Answer 1

You have to use the Bootstrap classes to get everything in line like I said in your other question.

The class to align the btn to the right is the pull-right original of the BS.

Here is the official documentation of floats bootstrap https://getbootstrap.com/docs/3.3/css/#helper-classes-floats

Also, you need to use the grid classes to "encapsulate" the components on the grid and have the correct flow of the elements on the page

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
    <div class="row">
        <div class="com-xs-12">
            <nav class="navbar navbar-dark bg-dark">
                <a style="display: block; width: 100%; text-align: center; margin: 0;" class="navbar-brand" href="#">SISTEMA ATLAS</a>
            
                <div>
                    <button type="button" class="btn btn-primary">Primary</button>
                </div>
                <div>
                    <button type="button" class="btn btn-success">Success</button>
                </div>
            
              </nav>
        </div>
    </div>
</div>

    <div class="container">
        <div class="row">
            <div class="com-xs-12">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <button type="button" class="btn btn-primary pull-right">Primary</button>
            </div>
        </div>
    </div>