How to put 2 buttons side by side in the same column of a table in html?

Navigation
1

The 2 buttons in the last column of the table are one below the other. How do I get them side by side? 

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <title>Budget</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/estilo.css">
    <script src="../js/script.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="../img/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script></head><body><div><divclass="container">
    <h2>Itens cadastrados</h2>
    <table class="table table-sm">
        <thead class="thead-dark">
            <tr>
                <th>Categoria</th>
                <th>Rubrica</th>
                <th>Item</th>
                <th>Descrição</th>
                <th>Valor</th>
                <th>Quantidade</th>
                <th>Nota fiscal</th>
            </tr>
        </thead>
            <tbody>
                <c:forEach items="${itens}" var="item">
                    <tr>
                        <td> --- </td>
                        <td> --- </td>
                        <td> ${item.nome}</td>
                        <td> ${item.descricao}</td>
                        <td> ${item.getValor_uniforme()}</td>
                        <td> ${item.quantidade}</td>
                        <td>
                            <div>
                                <form action="cadastrarNotaFiscal" method="GET">
                                    <input type="hidden" name="item_id" value="${item.id }">
                                    <button class="btn btn-link"> <img src="../img/adicionar.png" alt="Logo" style="width:100%;"> </button>
                                </form> 
                                <form action="visualizarNotaFiscal" method="GET">
                                    <input type="hidden" name="item_id" value="${item.id }">
                                    <button class="btn btn-link"> <img src="../img/visualizar.png" alt="Logo" style="width:100%;"> </button>
                                </form>
                            </div> 
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
      </div>
</div>
</body>
    
asked by anonymous 11.05.2018 / 22:57

1 answer

0

Use class .btn-group ( see documentation ): 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="btn-group">
  <form action="cadastrarNotaFiscal" method="GET">
      <input type="hidden" name="item_id" value="${item.id }">
      <button class="btn btn-link"> <img src="../img/adicionar.png" alt="Logo" style="width:100%;"> </button>
  </form> 
  <form action="visualizarNotaFiscal" method="GET">
      <input type="hidden" name="item_id" value="${item.id }">
      <button class="btn btn-link"> <img src="../img/visualizar.png" alt="Logo" style="width:100%;"> </button>
  </form>
</div>

Without the class: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div>
  <form action="cadastrarNotaFiscal" method="GET">
      <input type="hidden" name="item_id" value="${item.id }">
      <button class="btn btn-link"> <img src="../img/adicionar.png" alt="Logo" style="width:100%;"> </button>
  </form> 
  <form action="visualizarNotaFiscal" method="GET">
      <input type="hidden" name="item_id" value="${item.id }">
      <button class="btn btn-link"> <img src="../img/visualizar.png" alt="Logo" style="width:100%;"> </button>
  </form>
</div>
    
11.05.2018 / 23:18
force autoplay on audio player Bitdefender accusing viruses when compiling c ++ source with CodeBlocks [closed]