Bootstrap Search Bar | Bootstrap search box with icon

Bootstrap Search Bar | Bootstrap search box with icon

Who does not want some simplicity in their respective job, this is a genuine reason to predict these things in this tech world.

Hey learners…!

Today we are going to learn parallel kinds of topics or will see a project that brings our task simpler than expected. Today’s blog subject is the Bootstrap search bar. What is this? and where is it used? How can we design?.
Bootstrap Search Bar | Bootstrap search box with icon
Search bar

What is a search bar?

Table of Contents

As a name recommending that it is a rectangular (most common shape) designed box that is used for searching or finding our desired stuff. It acts as a kind of medium why I’m saying that let’s take visualization of the Google search engine. If we don’t have then we are incapable to connect with the Server of Google.

Where it is used?

It has a huge stretched area where you can sustain this common behavior, Some of them I’m mentioning below which is very common:
  1.  In every Search engine.
  2.  In every E-commerce size.
  3.  Practically in every application where developers want to provide better outcomes.
  4.  Even you can use it in your project as well and a lot more use learners. So it’s your reading to explore it and let me know.

Bootstrap

It requires a little glimpse of bootstrap because I will use it in the project. So, Bootstrap is nothing it is an open-source framework It is directed at responsiveness. It helps us to design our project without writing loads of CSS code.
Prerequisite – You are here and learning this article, So I’m concluding that You have covered all the basic topics of  Front-end development. And still, you are handling problems anywhere Please visit Codewithrandom for amplifying your knowledge and for a quick recap. If You want to learn Bootstrap then just follow this link –  Bootstrap.

Tool and tech used for this project.
  1. HTML
  2. CSS
  3. JAVASCRIPT(ES6) BASIC
  4. CODEPEN 
  5. VSCODE
BLOG TASKS
 
I will design a search bar with a different layout, explanation.

HTML SECTION

Look below for the HTML CODE I have outlined. There is a link to Bootstrap in the comment section of MDB.
You will be surprised, I haven’t used any CSS style code still our result is responsive and attractive, Learners this is what Bootstrap does.

Two more external links I have inserted as
  • It is font awesome open source link that is used to display our text in a different view.
  • The same thing 2nd one link does is Google font.
 <!-- Font Awesome -->  

<link

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"

rel="stylesheet"

/>

<!-- Google Fonts -->

<link

href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"

rel="stylesheet"

/>

<!-- MDB -->

<link

href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.1/mdb.min.css"

rel="stylesheet"

/>

<div class="input-group">

<input type=" search" class="form-control rounded" placeholder="Search" aria-label="Search"

aria-describedby="search-addon" />

<button type="button" class="btn btn-outline-primary">search</button>

</div>

After the linking part have created a div element with a class input group this is the class in bootstrap that will handle the CSS part.


As the same input tag with specified class and one button element with two classes.

The definition of these classes is available in the bootstrap framework that we are using.

Have look 👇

See the Pen Untitled by Ankit Kumar (@Kumar-Ankit56) on CodePen.

Now it’s time to dive ourselves into developing a mini-project using our learning.

So, let’s look at our project how it’s gonna be 👇

See the Pen suggesting search bar by Ankit kumar (@Kumar-Ankit56) on CodePen.

Let me explain my project that in this project as it’s previewing we have one Title and a search bar with a placeholder value of Enter their state name of India.

The logical part of our search item is that if you will be writing the correct state then it shows a dropdown of suggesting states with your enter match character.

Code part

I’m using separate files, it doesn’t mean that you can’t use them you are free to feel free to use it for your convenience.
I have a well-formatted HTML document in which we will use for inline CSS or Javascript.
Step
  • The Upper is the same as above in which we inserted our bootstrap link font link.
  • For the body tag, we style it to the center. All content will be in the center.
  • Then we have a title and in the second line, we have a search bar with a placeholder.
  • At last, we have a script tag in which there is a function of autofill input tag is selected by class and when you will write any state name if it will be matchable then the function will get in action dropdown will be open of matched states.

Finally, we have completed 

Conclusion 

By this blog… We have learned what is Searchbar and how it’s designed, we use it in projects as well. 

Now I’m looking for your reviews.

So, How was the project 😁, Learners!


I didn’t focus much on the design part but it is not a restriction on you. You are free to design your search bar with more designs. 🎨 

I hope you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills blogger hearts with enthusiasm for writing more and new blogs.

You can follow me on Instagram

Written by @Ankit kumar

Leave a Reply