How to add search filter to bootstrap

Asked

Viewed 1,264 times

0

Whoa, look at me again. Guys, I’ve been able to do a lot on my own in this bootstrap template, in trial and error, and by researching the documentation, I’ve been able to get almost everything the way I want it. But I’m picking up to make the modifications I need on this specific page of my site. I would like to add a search filter, similar to this: https://prnt.sc/mri80y. In addition to decreasing the size of the table letters so that all the information fits on the same page. My website: http://tratspay.com/app/todas-vendas.html Current code of the table:

<!-- Main content -->
<div class="content"> 
  <!-- Small boxes (Stat box) -->
  <div class="row">
    <div class="col-lg-3"> 


        <!-- /.box-body --> 
      </div>
      <!-- /.box --> 
    </div>
    <!-- /.col -->
    <div class="col-lg-12">
      <div class="info-box">
        <div class="box-body">
          <div class="right-page-header">
            <div class="d-flex">
              <div class="align-self-center">

              </div>
              <div class="ml-auto">

              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table id="example2" class="table table-bordered table-hover no-wrap">
              <thead>
                <tr>
                  <th>Transação</th>
                  <th>Produto</th>
                  <th>Afiliado</th>
                  <th>Forma de Pagto</th>
                  <th>Status</th>
                  <th>Data de Pedido</th>
                  <th>Data de Finalização</th>
                  <th>Valor de Venda</th>
                  <th>Comissão</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                   <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-info">Finalizado</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                    <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-warning">Aguardando</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                   <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                    <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                 <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                 <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                   <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                   <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                   <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
                    <td>1</td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Formula do Juliano</a></td>
                   <td>Jackson Oliveira<p>Email: [email protected] <p>44-1234-1234</p></td>
                  <td><img src="dist/img/img1.jpg" class="img-circle img-w-30" alt="User Image"> <a href="#">Alexander</a></td>
                  <td>Cartão de Crédito</td>
                  <td><span class="label label-success">Concluído</span></td>
                  <td>12/12/12</td>
                  <td>12/12/12</td>
                  <td>R$ 97,00</td>
                  <td>R$ 43,20</td>
                </tr>
                <tr>
html css twitter-bootstrap bootstrap-4

  • But on the filter you need the btns next to each other with the icon in eh this?

  • I’d need the buttons and the search fields, you know?

1 answer

0


Face on the table and the font size just vc put on font-size Meno for table with the ID you are using, see in the image the markings I left in red and notice how the font size in the table.

inserir a descrição da imagem aqui

About the filter follows the example, I have not used your table pq is unfeasible here in the answer. But notice that before the example table I have put a col-12 new and within it the btns of Bootstrap, inside the btn I used a <i> with an icon of Fontawesome and ready

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    
</style>
</head>
<body>
    
<div class="container">
    <div class="row">
        <div class="col-12">
            <button type="button" class="btn btn-primary m-2">
                <i class="fa fa-filter"></i>
                Primary
            </button>
            <button type="button" class="btn btn-primary m-2">
                <i class="fa fa-filter"></i>
                Primary
            </button>
            <button type="button" class="btn btn-primary m-2">
                <i class="fa fa-filter"></i>
                Primary
            </button>
            <button type="button" class="btn btn-primary m-2">
                <i class="fa fa-filter"></i>
                Primary
            </button>
        </div>
        <div class="col-12">
            <table class="table">
                <thead>
                    <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</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>
            
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="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>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

  • How do I add the fields below? Thanks again for the force!

  • How so low? If you want them after the table eh only put snippet of the html of the col-12 with the btns after the html block of the table. Type to col12 first with the table inside and dps a col of the btns

Browser other questions tagged html css twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.