Bootstrap table search

Filter/Search feature lets you find desired information in table data. Use the search input field to type name, number value or that word you're looking for and the searching feature will filter the results for you.


Basic example

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="card">
    <div class="card-body">

        <!-- Grid row -->
        <div class="row">
        
            <!-- Grid column -->
            <div class="col-md-12">
        
                <div class="input-group md-form form-sm form-2 pl-0 mb-0">
                    <input class="form-control my-0 py-1 grey-border" type="text" placeholder="Search" aria-label="Search">
                    <div class="input-group-append">
                        <span class="input-group-text waves-effect grey lighten-3" id="basic-addon1">
                            <a><i class="fa fa-search text-grey" aria-hidden="true"></i></a>
                        </span>
                    </div>
                </div>
        
            </div>
            <!-- Grid column -->
        
        </div>
        <!-- Grid row -->

        <!--Table-->
        <table class="table table-striped">

            <!--Table head-->
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <!--Table head-->

            <!--Table body-->
            <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>
                <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 body-->
        </table>
        <!--Table-->

    </div>
</div>
.input-group.md-form.form-sm.form-2 input {
    border: 1px solid #bdbdbd;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.input-group.md-form.form-sm.form-2 input.grey-border  {
    border: 1px solid #e9ecef;
}
.input-group input[type=text]:focus:not([readonly]) {
    box-shadow: none;
}
.form-2 .input-group-text {
    border: 1px solid #e9ecef;
}