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?.
What is a search bar?
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:
In every Search engine.
In every E-commerce size.
Practically in every application where developers want to provide better outcomes.
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.
HTML
CSS
JAVASCRIPT(ES6) BASIC
CODEPEN
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.
Now it's time to dive ourselves into developing a mini-project using our learning.
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 Bootstrap 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
Top comments (1)
This is such an insightful post! I really appreciate how you broke down the topic in a way that's easy to understand. Looking forward to implementing some of these tips in my daily routine!
Best International schools in Hyderabad