Position bottom right button with angle and boostrap

Question

Position bottom right button with angle and boostrap

Navigation

#1 by (1 votes)

1

Use stripped table of bootstrap with Angular 6. This is the screen:

Seethatyouhaveaplusbuttonintheupperleftcorneranditshouldbeunderneaththetable,rightside.Thisismyhtml

<navclass="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 do I position the plus button in the lower right corner?

EDIT1

<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 was

html twitter-bootstrap angular

asked by anonymous 11.07.2018 / 22:11

1 answer

Use "-" or "." in a linked list? How to call method of a parent window when another daughter window is closed with WPF

score 1 · Answer 1

You have to use Bootstrap classes to align everything as I said in your other question.

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

Here is the official documentation for Bootstrap's% of% link

In addition, you need to use the grid classes to "encapsulate" the components in 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>