Bootstrap Search Boxes:

Bootstrap Web Search Box with Users Tab

If you are a web designer and are thinking of ways to improve your website more, then you have probably already thought about adding a properly designed search box. search bars and search boxes are of utmost importance for any website and benefit both the users and the web owner. The only problem is, designing a professional HTML web search with an actual result page needs a lot of skills in the field and a lot of time and effort to spare. This is why many prefer to just use a web search template and instantly get the results.

The following is the code for professionally made CSS web search which you can use to get the search box for your own. It’s fast, it’s easy and requires no fee as our codes are completely free of charge. This search box is really great and has many advantages. For instance, you can add a certain user to the search results and show extra information about them in a separate tap. It also features coloured icons and has a sleek design to it. overall, this is the search box to use if you care about your website and its users. All you have to do is to scroll down to the code section.

CSS Web Search

HTML Web Search

Web Search Template

<!-- This script got from frontendfreecode.com -->
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="search-result-box card-box">
                    <div class="row">
                        <div class="col-md-8 offset-md-2">
                            <div class="pt-3 pb-4">
                                <div class="input-group">
                                    <input type="text" id="" name="" class="form-control" value="Admin Dashboard">
                                    <div class="input-group-append">
                                        <button type="button" class="btn waves-effect waves-light btn-custom"><i class="fa fa-search mr-1"></i> Search</button>
                                    </div>
                                </div>
                                <div class="mt-4 text-center">
                                    <h4>Search Results For "Admin Dashboard"</h4></div>
                            </div>
                        </div>
                    </div>
                    <!-- end row -->
                    <ul class="nav nav-tabs tabs-bordered">
                        <li class="nav-item"><a href="#home" data-toggle="tab" aria-expanded="true" class="nav-link active">All results <span class="badge badge-success ml-1">325</span></a></li>
                        <li class="nav-item"><a href="#users" data-toggle="tab" aria-expanded="false" class="nav-link">Users <span class="badge badge-danger ml-1">89</span></a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="home">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="search-item">
                                        <h4 class="mb-1"><a href="#">frontendfreecode.com - Responsive Admin Template</a></h4>
                                        <div class="font-13 text-success mb-3">http://frontendfreecode.com</div>
                                        <p class="mb-0 text-muted">Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                                    </div>
                                    <div class="search-item">
                                        <h4 class="mb-1"><a href="#">Frontend - Responsive Bootstrap 4 Web App Kit</a></h4>
                                        <div class="font-13 text-success mb-3">http://frontendfreecode.com/search?sq=bootstrap</div>
                                        <p class="mb-0 text-muted">Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                                    </div>
                                    <div class="search-item">
                                        <div class="media"><img class="d-flex mr-3 rounded-circle" src="http://frontendfreecode.com/codes/files/avatar1.png" alt="Generic placeholder image" height="54">
                                            <div class="media-body">
                                                <h5 class="media-heading mt-0"><a href="#" class="text-dark">Chadengle</a></h5>
                                                <p class="font-13"><b>Email:</b> <span><a href="#" class="text-muted">mediaheader@mail.com</a></span></p>
                                                <p class="mb-0 font-13"><b>Bio:</b>
                                                    <br><span class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="search-item">
                                        <h4 class="mb-1"><a href="#">Fronend - Responsive Admin Template</a></h4>
                                        <div class="font-13 text-success mb-3">http://frontendfreecode.com/</div>
                                        <p class="mb-0 text-muted">Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                                    </div>
                                    <div class="search-item">
                                        <h4 class="mb-1"><a href="#">Free Code - Responsive Bootstrap 4 Web App Kit</a></h4>
                                        <div class="font-13 text-success mb-3">http://frontendfreecode.com/search?sq=bootstrap</div>
                                        <div class="">
                                            <img src="http://frontendfreecode.com/codes/files/avatar1.png" height="48" alt="image"> 
                                            <img src="http://frontendfreecode.com/codes/files/avatar2.png" height="48" alt="image"> 
                                            <img src="http://frontendfreecode.com/codes/files/avatar3.png" height="48" alt="image"> 
                                            <img src="http://frontendfreecode.com/codes/files/avatar4.png" height="48" alt="image">
                                        </div>
                                    </div>
                                    <div class="search-item">
                                        <h4 class="mb-1"><a href="#">Free - Responsive Admin Template</a></h4>
                                        <div class="font-13 text-success mb-3">http://frontendfreecode.com/</div>
                                        <p class="mb-0 text-muted">Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                                    </div>
                                    <div class="search-item">
                                        <h4 class="mb-1"><a href="#">Code - Responsive Bootstrap 4 Web App Kit</a></h4>
                                        <div class="font-13 text-success mb-3">http://frontendfreecode.com/search?sq=bootstrap</div>
                                        <p class="mb-0 text-muted">Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                                    </div>
                                    <ul class="pagination justify-content-end pagination-split mt-0">
                                        <li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span> <span class="sr-only">Previous</span></a></li>
                                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                                        <li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span> <span class="sr-only">Next</span></a></li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                        <!-- end All results tab -->
                        <!-- Users tab -->
                        <div class="tab-pane" id="users">
                            <div class="search-item">
                                <div class="media mt-1"><img class="d-flex mr-3 rounded-circle" src="http://frontendfreecode.com/codes/files/avatar1.png" alt="Generic placeholder image" height="54">
                                    <div class="media-body">
                                        <h5 class="media-heading mt-0"><a href="#" class="text-dark">Chadengle</a></h5>
                                        <p class="font-13"><b>Email:</b> <span><a href="#" class="text-muted">mediaheader@mail.com</a></span></p>
                                        <p class="mb-0 font-13"><b>Bio:</b>
                                            <br><span class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="search-item">
                                <div class="media"><img class="d-flex mr-3 rounded-circle" src="http://frontendfreecode.com/codes/files/avatar2.png" alt="Generic placeholder image" height="54">
                                    <div class="media-body">
                                        <h5 class="media-heading mt-0"><a href="#" class="text-dark">Chadengle</a></h5>
                                        <p class="font-13"><b>Email:</b> <span><a href="#" class="text-muted">mediaheader@mail.com</a></span></p>
                                        <p class="mb-0 font-13"><b>Bio:</b>
                                            <br><span class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="search-item">
                                <div class="media"><img class="d-flex mr-3 rounded-circle" src="http://frontendfreecode.com/codes/files/avatar3.png" alt="Generic placeholder image" height="54">
                                    <div class="media-body">
                                        <h5 class="media-heading mt-0"><a href="#" class="text-dark">Chadengle</a></h5>
                                        <p class="font-13"><b>Email:</b> <span><a href="#" class="text-muted">mediaheader@mail.com</a></span></p>
                                        <p class="mb-0 font-13"><b>Bio:</b>
                                            <br><span class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="search-item">
                                <div class="media"><img class="d-flex mr-3 rounded-circle" src="http://frontendfreecode.com/codes/files/avatar4.png" alt="Generic placeholder image" height="54">
                                    <div class="media-body">
                                        <h5 class="media-heading mt-0"><a href="#" class="text-dark">Chadengle</a></h5>
                                        <p class="font-13"><b>Email:</b> <span><a href="#" class="text-muted">mediaheader@mail.com</a></span></p>
                                        <p class="mb-0 font-13"><b>Bio:</b>
                                            <br><span class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="search-item">
                                <div class="media"><img class="d-flex mr-3 rounded-circle" src="http://frontendfreecode.com/codes/files/avatar5.png" alt="Generic placeholder image" height="54">
                                    <div class="media-body">
                                        <h5 class="media-heading mt-0"><a href="#" class="text-dark">Chadengle</a></h5>
                                        <p class="font-13"><b>Email:</b> <span><a href="#" class="text-muted">mediaheader@mail.com</a></span></p>
                                        <p class="mb-0 font-13"><b>Bio:</b>
                                            <br><span class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span></p>
                                    </div>
                                </div>
                            </div>
                            <ul class="pagination justify-content-end pagination-split mt-0">
                                <li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span> <span class="sr-only">Previous</span></a></li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item active"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item"><a class="page-link" href="#">4</a></li>
                                <li class="page-item"><a class="page-link" href="#">5</a></li>
                                <li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span> <span class="sr-only">Next</span></a></li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!-- end Users tab -->
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
    <!-- container -->
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body{
    margin-top:20px;
    background:#dcdcdc;
}
.card-box {
    padding: 20px;
    border-radius: 3px;
    margin-bottom: 30px;
    background-color: #fff;
}
.search-result-box .tab-content {
    padding: 30px 30px 10px 30px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-box-shadow: none
}

.search-result-box .search-item {
    padding-bottom: 20px;
    border-bottom: 1px solid #e3eaef;
    margin-bottom: 20px
}
.text-success {
    color: #0acf97!important;
}
a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}
.btn-custom {
    background-color: #02c0ce;
    border-color: #02c0ce;
}

.btn-custom, .btn-danger, .btn-info, .btn-inverse, .btn-pink, .btn-primary, .btn-purple, .btn-success, .btn-warning {
    color: #fff!important;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href="http://netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body{
    margin-top:20px;
    background:#dcdcdc;
}
.card-box {
    padding: 20px;
    border-radius: 3px;
    margin-bottom: 30px;
    background-color: #fff;
}
.search-result-box .tab-content {
    padding: 30px 30px 10px 30px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-box-shadow: none
}

.search-result-box .search-item {
    padding-bottom: 20px;
    border-bottom: 1px solid #e3eaef;
    margin-bottom: 20px
}
.text-success {
    color: #0acf97!important;
}
a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}
.btn-custom {
    background-color: #02c0ce;
    border-color: #02c0ce;
}

.btn-custom, .btn-danger, .btn-info, .btn-inverse, .btn-pink, .btn-primary, .btn-purple, .btn-success, .btn-warning {
    color: #fff!important;
}
</style>

</head>
<body>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="search-result-box card-box">
                    <div class="row">
                        <div class="col-md-8 offset-md-2">
                            <div class="pt-3 pb-4">
                                <div class="input-group">
                                    <input type="text" id="" name="" class="form-control" value="Admin Dashboard">
                                    <div class="input-group-append">
                                        <button type="button" class="btn waves-effect waves-light btn-custom"><i class="fa fa-search mr-1"></i> Search</button>
                                    </div>
                                </div>
                                <div class="mt-4 text-center">
                                    <h4>Search Results For "Admin Dashboard"</h4></div>
                            </div>
                        </div>
                    </div>
                    <!-- end row -->
                    <ul class="nav nav-tabs tabs-bordered">
                        <li class="nav-item"><a href="#home" data-toggle="tab" aria-expanded="true" class="nav-link active">All results <span class="badge badge-success ml-1">325</span></a></li>
                        <li class="nav-item"><a href="#users" data-toggle="tab" aria-expanded="false" class="nav-link">Users <span class="badge badge-danger ml-1">89</span></a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="home">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="search-item">
                                        <h4 class="mb-1"><a href="#">frontendfreecode.com - Responsive Admin Template</a></h4>
                                        <div class="font-13 text-success mb-3">http://frontendfreecode.com</div>
                                        <p class="mb-0 text-muted">Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                                    </div>
                                    <div class="search-item">
                                        <h4 class="mb-1"><a href="#">Frontend - Responsive Bootstrap 4 Web App Kit</a></h4>
                                        <div class="font-13 text-success mb-3">http://frontendfreecode.com/search?sq=bootstrap</div>
                                        <p class="mb-0 text-muted">Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                                    </div>
                                    <div class="search-item">
                                        <div class="media"><img class="d-flex mr-3 rounded-circle" src="http://frontendfreecode.com/codes/files/avatar1.png" alt="Generic placeholder image" height="54">
                                            <div class="media-body">
                                                <h5 class="media-heading mt-0"><a href="#" class="text-dark">Chadengle</a></h5>
                                                <p class="font-13"><b>Email:</b> <span><a href="#" class="text-muted">mediaheader@mail.com</a></span></p>
                                                <p class="mb-0 font-13"><b>Bio:</b>
                                                    <br><span class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="search-item">
                                        <h4 class="mb-1"><a href="#">Fronend - Responsive Admin Template</a></h4>
                                        <div class="font-13 text-success mb-3">http://frontendfreecode.com/</div>
                                        <p class="mb-0 text-muted">Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                                    </div>
                                    <div class="search-item">
                                        <h4 class="mb-1"><a href="#">Free Code - Responsive Bootstrap 4 Web App Kit</a></h4>
                                        <div class="font-13 text-success mb-3">http://frontendfreecode.com/search?sq=bootstrap</div>
                                        <div class="">
                                            <img src="http://frontendfreecode.com/codes/files/avatar1.png" height="48" alt="image"> 
                                            <img src="http://frontendfreecode.com/codes/files/avatar2.png" height="48" alt="image"> 
                                            <img src="http://frontendfreecode.com/codes/files/avatar3.png" height="48" alt="image"> 
                                            <img src="http://frontendfreecode.com/codes/files/avatar4.png" height="48" alt="image">
                                        </div>
                                    </div>
                                    <div class="search-item">
                                        <h4 class="mb-1"><a href="#">Free - Responsive Admin Template</a></h4>
                                        <div class="font-13 text-success mb-3">http://frontendfreecode.com/</div>
                                        <p class="mb-0 text-muted">Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                                    </div>
                                    <div class="search-item">
                                        <h4 class="mb-1"><a href="#">Code - Responsive Bootstrap 4 Web App Kit</a></h4>
                                        <div class="font-13 text-success mb-3">http://frontendfreecode.com/search?sq=bootstrap</div>
                                        <p class="mb-0 text-muted">Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
                                    </div>
                                    <ul class="pagination justify-content-end pagination-split mt-0">
                                        <li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span> <span class="sr-only">Previous</span></a></li>
                                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                                        <li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span> <span class="sr-only">Next</span></a></li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                        <!-- end All results tab -->
                        <!-- Users tab -->
                        <div class="tab-pane" id="users">
                            <div class="search-item">
                                <div class="media mt-1"><img class="d-flex mr-3 rounded-circle" src="http://frontendfreecode.com/codes/files/avatar1.png" alt="Generic placeholder image" height="54">
                                    <div class="media-body">
                                        <h5 class="media-heading mt-0"><a href="#" class="text-dark">Chadengle</a></h5>
                                        <p class="font-13"><b>Email:</b> <span><a href="#" class="text-muted">mediaheader@mail.com</a></span></p>
                                        <p class="mb-0 font-13"><b>Bio:</b>
                                            <br><span class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="search-item">
                                <div class="media"><img class="d-flex mr-3 rounded-circle" src="http://frontendfreecode.com/codes/files/avatar2.png" alt="Generic placeholder image" height="54">
                                    <div class="media-body">
                                        <h5 class="media-heading mt-0"><a href="#" class="text-dark">Chadengle</a></h5>
                                        <p class="font-13"><b>Email:</b> <span><a href="#" class="text-muted">mediaheader@mail.com</a></span></p>
                                        <p class="mb-0 font-13"><b>Bio:</b>
                                            <br><span class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="search-item">
                                <div class="media"><img class="d-flex mr-3 rounded-circle" src="http://frontendfreecode.com/codes/files/avatar3.png" alt="Generic placeholder image" height="54">
                                    <div class="media-body">
                                        <h5 class="media-heading mt-0"><a href="#" class="text-dark">Chadengle</a></h5>
                                        <p class="font-13"><b>Email:</b> <span><a href="#" class="text-muted">mediaheader@mail.com</a></span></p>
                                        <p class="mb-0 font-13"><b>Bio:</b>
                                            <br><span class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="search-item">
                                <div class="media"><img class="d-flex mr-3 rounded-circle" src="http://frontendfreecode.com/codes/files/avatar4.png" alt="Generic placeholder image" height="54">
                                    <div class="media-body">
                                        <h5 class="media-heading mt-0"><a href="#" class="text-dark">Chadengle</a></h5>
                                        <p class="font-13"><b>Email:</b> <span><a href="#" class="text-muted">mediaheader@mail.com</a></span></p>
                                        <p class="mb-0 font-13"><b>Bio:</b>
                                            <br><span class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="search-item">
                                <div class="media"><img class="d-flex mr-3 rounded-circle" src="http://frontendfreecode.com/codes/files/avatar5.png" alt="Generic placeholder image" height="54">
                                    <div class="media-body">
                                        <h5 class="media-heading mt-0"><a href="#" class="text-dark">Chadengle</a></h5>
                                        <p class="font-13"><b>Email:</b> <span><a href="#" class="text-muted">mediaheader@mail.com</a></span></p>
                                        <p class="mb-0 font-13"><b>Bio:</b>
                                            <br><span class="text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</span></p>
                                    </div>
                                </div>
                            </div>
                            <ul class="pagination justify-content-end pagination-split mt-0">
                                <li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span> <span class="sr-only">Previous</span></a></li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item active"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item"><a class="page-link" href="#">4</a></li>
                                <li class="page-item"><a class="page-link" href="#">5</a></li>
                                <li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span> <span class="sr-only">Next</span></a></li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!-- end Users tab -->
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
    <!-- container -->
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars

Feel The Power

Bootstrap Search Boxes:

Bootstrap Web Search Box with Users Tab

CSS Web Search

HTML Web Search

Web Search Template