<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="d-flex justify-content-center"> <div class="p-3" style="background-color:#1a1d1e"> <div class="table-controls" > <span> <label class="text-success">Campo: </label> <select id="filter-field" class="form-group form-group-lg"> <option></option> <option value="name">Nome Completo</option> <option value="nascimento">Data Nascimento</option> <option value="nascimento">E-Mail</option> <option value="nascimento">Telefone</option> <option value="genero">Genero</option> </select> </span> <span> <label class="text-success">Tipo: </label> <select id="filter-type" class="form-group form-group-lg"> <option value="=">=</option> <option value="<"><</option> <option value="<="><=</option> <option value=">">></option> <option value=">=">>=</option> <option value="!=">Não Tem</option> <option value="like">Parece</option> </select> </span> <span><label class="text-success">Valor: </label> <input id="filter-value" type="text" class="form-group form-group-lg" placeholder="valor para filtrar"></span> <button id="filter-clear" class="btn btn-primary">Limpar Filtro</button> </div> </div> </div> <div id="example-table"></div>