Bootstrap Search Boxes:

Bootstrap Scrollable Div with Search Input Box

Search boxes help users to find their needed data as soon as possible. This Bootstrap Scrollable Div with Search Input Box has the same purpose and you can add it to your website. By using this Bootstrap Div Search Box, you can let your users find their needed information in a short time. All they have to do is to write the title or a part of the text and then it will be displayed for them. So, this HTML Scroll Div has a significant impact on saving users’ time. If you want to attract a lot of viewers, this code can be helpful.

We have provided the preview of this HTML List Search below. This Div Scroll has a dark background and it fits dark websites easily. Texts inside this list are white and you can organize your content based on the alphabet. The title of these categories has a light green color that attracts anyone’s attention. The whole page has a white border and each part is separated with these thin lines. You are able to use numbers to have a better classification. At the top of the HTML Search Filter List, you can search your considered data.

Bootstrap Div Search Box

HTML Scroll Div

HTML List Search

Div Scroll

HTML Search Filter List

<!-- This script got from frontendfreecode.com -->
<div class="row justify-content-center align-items-center mx-0">
    <div class="col-12 col-sm-8 col-md-6 col-lg-5 bg-dark p-0 py-3 position-relative">
        <div class="top border-bottom border-secondary px-3 py-2 position-fixed top-0 bg-dark">
            <input type="text" class="form-control bg-dark text-white border-secondary" placeholder="Type name of person...">
        </div>
        <ol class="list-group list-group-numbered px-4">
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">A</div>
            <li class="list-group-item bg-dark text-white border-secondary">Alpha Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Asante Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Austin Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">B</div>
            <li class="list-group-item bg-dark text-white border-secondary">Bravo Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Bambi Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Ben Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">C</div>
            <li class="list-group-item bg-dark text-white border-secondary">Charlie Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Carlos Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Caz Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">D</div>
            <li class="list-group-item bg-dark text-white border-secondary">Delta Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Derin Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">David Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">E</div>
            <li class="list-group-item bg-dark text-white border-secondary">Echo Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Ebony Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Eddie Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">F</div>
            <li class="list-group-item bg-dark text-white border-secondary">Frostus Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Fela Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Fatima Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">G</div>
            <li class="list-group-item bg-dark text-white border-secondary">Golf Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Gako Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Gianni Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">H</div>
            <li class="list-group-item bg-dark text-white border-secondary">Hotel Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Henry Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Halima Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">I</div>
            <li class="list-group-item bg-dark text-white border-secondary">Indian Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Iya Bravo</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">J</div>
            <li class="list-group-item bg-dark text-white border-secondary">Juliet Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Jet Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Justin Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">K</div>
            <li class="list-group-item bg-dark text-white border-secondary">Kilo Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Kabir Bravo</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">L</div>
            <li class="list-group-item bg-dark text-white border-secondary">Lima Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Lola Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Lila Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">M</div>
            <li class="list-group-item bg-dark text-white border-secondary">Mike Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Mak Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Milo Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">N</div>
            <li class="list-group-item bg-dark text-white border-secondary">November Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Nas Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Nnoka Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">O</div>
            <li class="list-group-item bg-dark text-white border-secondary">Oscar Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Oye Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Olly Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">J</div>
            <li class="list-group-item bg-dark text-white border-secondary">Papa Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Paolo Bravo</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">Q</div>
            <li class="list-group-item bg-dark text-white border-secondary">Quibet Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Quvanshe Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Qwanza Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">R</div>
            <li class="list-group-item bg-dark text-white border-secondary">Romeo Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Ron Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Riyaj Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">S</div>
            <li class="list-group-item bg-dark text-white border-secondary">Sireo Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Sazana Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Simba Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">J</div>
            <li class="list-group-item bg-dark text-white border-secondary">Tango Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Tabby Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Tush Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">U</div>
            <li class="list-group-item bg-dark text-white border-secondary">Uniform Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Ubuntu Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Uriah Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">V</div>
            <li class="list-group-item bg-dark text-white border-secondary">Victor Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Violet Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Vin Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">W</div>
            <li class="list-group-item bg-dark text-white border-secondary">Whiskey Charlie</li>
            <li class="list-group-item bg-dark text-white border-secondary">Will Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">wade Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">X</div>
            <li class="list-group-item bg-dark text-white border-secondary">Xway Delta</li>
            <li class="list-group-item bg-dark text-white border-secondary">Xavion Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Xion Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">Y</div>
            <li class="list-group-item bg-dark text-white border-secondary">Yankee Echo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Yasmin Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Yaya Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">Z</div>
            <li class="list-group-item bg-dark text-white border-secondary">Zulu Frostus</li>
            <li class="list-group-item bg-dark text-white border-secondary">Zion Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Zayn Charlie</li>
        </ol>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
  background: #111 !important;
}
input:focus {
  box-shadow: none !important;
}
ol {
  max-height: calc(100vh - 95px);
  overflow-y: scroll;
  scroll-behavior: smooth;
  margin-top: 3.8rem;
}
.bg-dark {
  background: #222 !important;
}
.text-white {
  color: #e7e7e7 !important;
}
.top {
  width: inherit;
  z-index: 999;
}
.letter {
  background: #1a1a1a !important;
  position: sticky;
  top: 0;
}

$(document).ready(function () {
    //search through list when typed
    $("input").keyup(function () {
        var val = $(this).val().toLowerCase();
        //scrollable container <ol>
        var container = document.querySelector("ol");
        if (val.length > 0) {
            //iterate through all <li> elements
            $("li").each(function (i) {
                //get contents of <li> and then lowerCase string to compare with lowerCase(d) input
                if ($(this).html().toLowerCase().startsWith(val)) {
                    //if the contents of the current <li> matches with input value
                    //then give the current <li> a unique id with the index counter variable(i)
                    $(this).attr("id", "n" + i);
                    //then scroll to that <li> element inside its scrollable container <ol>
                    var list = document.querySelector("#n" + i);
                    container.scrollTop = list.offsetTop - container.offsetTop;
                    return false;
                }
            });
        } else {
            container.scrollTop = 0;
        }
    });
});

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

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

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<style>
body {
  background: #111 !important;
}
input:focus {
  box-shadow: none !important;
}
ol {
  max-height: calc(100vh - 95px);
  overflow-y: scroll;
  scroll-behavior: smooth;
  margin-top: 3.8rem;
}
.bg-dark {
  background: #222 !important;
}
.text-white {
  color: #e7e7e7 !important;
}
.top {
  width: inherit;
  z-index: 999;
}
.letter {
  background: #1a1a1a !important;
  position: sticky;
  top: 0;
}
</style>

</head>
<body>
<div class="row justify-content-center align-items-center mx-0">
    <div class="col-12 col-sm-8 col-md-6 col-lg-5 bg-dark p-0 py-3 position-relative">
        <div class="top border-bottom border-secondary px-3 py-2 position-fixed top-0 bg-dark">
            <input type="text" class="form-control bg-dark text-white border-secondary" placeholder="Type name of person...">
        </div>
        <ol class="list-group list-group-numbered px-4">
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">A</div>
            <li class="list-group-item bg-dark text-white border-secondary">Alpha Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Asante Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Austin Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">B</div>
            <li class="list-group-item bg-dark text-white border-secondary">Bravo Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Bambi Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Ben Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">C</div>
            <li class="list-group-item bg-dark text-white border-secondary">Charlie Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Carlos Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Caz Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">D</div>
            <li class="list-group-item bg-dark text-white border-secondary">Delta Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Derin Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">David Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">E</div>
            <li class="list-group-item bg-dark text-white border-secondary">Echo Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Ebony Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Eddie Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">F</div>
            <li class="list-group-item bg-dark text-white border-secondary">Frostus Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Fela Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Fatima Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">G</div>
            <li class="list-group-item bg-dark text-white border-secondary">Golf Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Gako Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Gianni Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">H</div>
            <li class="list-group-item bg-dark text-white border-secondary">Hotel Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Henry Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Halima Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">I</div>
            <li class="list-group-item bg-dark text-white border-secondary">Indian Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Iya Bravo</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">J</div>
            <li class="list-group-item bg-dark text-white border-secondary">Juliet Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Jet Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Justin Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">K</div>
            <li class="list-group-item bg-dark text-white border-secondary">Kilo Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Kabir Bravo</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">L</div>
            <li class="list-group-item bg-dark text-white border-secondary">Lima Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Lola Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Lila Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">M</div>
            <li class="list-group-item bg-dark text-white border-secondary">Mike Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Mak Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Milo Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">N</div>
            <li class="list-group-item bg-dark text-white border-secondary">November Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Nas Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Nnoka Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">O</div>
            <li class="list-group-item bg-dark text-white border-secondary">Oscar Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Oye Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Olly Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">J</div>
            <li class="list-group-item bg-dark text-white border-secondary">Papa Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Paolo Bravo</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">Q</div>
            <li class="list-group-item bg-dark text-white border-secondary">Quibet Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Quvanshe Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Qwanza Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">R</div>
            <li class="list-group-item bg-dark text-white border-secondary">Romeo Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Ron Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Riyaj Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">S</div>
            <li class="list-group-item bg-dark text-white border-secondary">Sireo Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Sazana Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Simba Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">J</div>
            <li class="list-group-item bg-dark text-white border-secondary">Tango Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Tabby Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Tush Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">U</div>
            <li class="list-group-item bg-dark text-white border-secondary">Uniform Alpha</li>
            <li class="list-group-item bg-dark text-white border-secondary">Ubuntu Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Uriah Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">V</div>
            <li class="list-group-item bg-dark text-white border-secondary">Victor Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Violet Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Vin Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">W</div>
            <li class="list-group-item bg-dark text-white border-secondary">Whiskey Charlie</li>
            <li class="list-group-item bg-dark text-white border-secondary">Will Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">wade Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">X</div>
            <li class="list-group-item bg-dark text-white border-secondary">Xway Delta</li>
            <li class="list-group-item bg-dark text-white border-secondary">Xavion Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Xion Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">Y</div>
            <li class="list-group-item bg-dark text-white border-secondary">Yankee Echo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Yasmin Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Yaya Charlie</li>
            <div class="list-group-item letter text-info border-secondary p-0 ps-3 fw-bold">Z</div>
            <li class="list-group-item bg-dark text-white border-secondary">Zulu Frostus</li>
            <li class="list-group-item bg-dark text-white border-secondary">Zion Bravo</li>
            <li class="list-group-item bg-dark text-white border-secondary">Zayn Charlie</li>
        </ol>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {
    //search through list when typed
    $("input").keyup(function () {
        var val = $(this).val().toLowerCase();
        //scrollable container <ol>
        var container = document.querySelector("ol");
        if (val.length > 0) {
            //iterate through all <li> elements
            $("li").each(function (i) {
                //get contents of <li> and then lowerCase string to compare with lowerCase(d) input
                if ($(this).html().toLowerCase().startsWith(val)) {
                    //if the contents of the current <li> matches with input value
                    //then give the current <li> a unique id with the index counter variable(i)
                    $(this).attr("id", "n" + i);
                    //then scroll to that <li> element inside its scrollable container <ol>
                    var list = document.querySelector("#n" + i);
                    container.scrollTop = list.offsetTop - container.offsetTop;
                    return false;
                }
            });
        } else {
            container.scrollTop = 0;
        }
    });
});
</script>

</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