How to customized the responsive search bar with the bootstrap

Question

I am working on the filter bar and would like to create the bar like this:

http://www.gog.com/games##sort=bestselling&page=1

notice that there is a filter bar with parameter genre, system , language. Please take a look at the company column, as there are lot of companies, there is a change page button .

The problem is , right now I am using bootstrap nav-bar, how can I customized the function like that, or is it exist in bootstrap already?

Here is my code, thanks a lot for helping

    <div class="row admin-form">
        <div class="col-lg-12">
            <header class="navbar bg-dark" style="z-index:10;">
                <form class="navbar-form navbar-left navbar-search ml5" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search...">
                    </div>
                </form>
                <ul class="nav navbar-nav navbar-left">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle fw600 disabled" data-toggle="dropdown">
                            <span>Teacher</span>
                            <span class="caret caret-tp hidden-xs"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-persist w400 bg-white" role="menu">
                            <?php
                            foreach ($teacher_list as $teacher) {
                                ?>
                                <li class="of-h col-lg-6">
                                    <a href="#" class="fw600 p12">
                                        <?= $teacher['name']; ?>
                                    </a>
                                </li>
                                <?php
                            }
                            ?>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle fw600 disabled" data-toggle="dropdown">
                            <span>Style</span>
                            <span class="caret caret-tp hidden-xs"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-persist pn w250 bg-white" role="menu">
                            <?php
                            foreach ($style_list as $style) {
                                ?>
                                <li class="of-h">
                                    <a href="#" class="fw600 p12">
                                        <?= $style['title']; ?>
                                    </a>
                                </li>
                                <?php
                            }
                            ?>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle fw600 disabled" data-toggle="dropdown">
                            <span>Level</span>
                            <span class="caret caret-tp hidden-xs"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-persist pn w250 bg-white" role="menu">
                            <?php
                            foreach ($this->level_list as $level) {
                                ?>
                                <li class="of-h">
                                    <a href="#" class="fw600 p12">
                                        <?= $level; ?>
                                    </a>
                                </li>
                                <?php
                            }
                            ?>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle fw600 disabled" data-toggle="dropdown">
                            <span>Pose</span>
                            <span class="caret caret-tp hidden-xs"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-persist pn w250 bg-white" role="menu">
                            <?php
                            foreach ($pose_list as $pose) {
                                ?>
                                <li class="of-h">
                                    <a href="#" class="fw600 p12">
                                        <?= $pose['title']; ?>
                                    </a>
                                </li>
                                <?php
                            }
                            ?>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle fw600 disabled" data-toggle="dropdown">
                            <span>Duration</span>
                            <span class="caret caret-tp hidden-xs"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-persist pn w250 bg-white" role="menu">
                            <?php
                            foreach ($this->duration_list as $duration) {
                                ?>
                                <li class="of-h">
                                    <a href="#" class="fw600 p12">
                                        <?= $duration; ?>
                                    </a>
                                </li>
                                <?php
                            }
                            ?>
                        </ul>
                    </li>
                </ul>
            </header>
        </div>
    </div>

Answer 1

change search class

<input type="text" class="form-control Search" placeholder="Search...">

add inline style as

<style>
.Search{
border-radius:10px;
}
</style>