"Awesome Search Box"
Bootstrap 4.1.1 Snippet by SamimOnline

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Awesome Search Box</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> </head> <!-- Coded with love by Mutiullah Samim--> <body> <div class="container h-100"> <div class="d-flex justify-content-center h-100"> <div class="searchbar"> <input class="search_input" type="text" name="" placeholder="Search..."> <a href="#" class="search_icon"><i class="fas fa-search"></i></a> </div> </div> </div> </body> </html>
body,html{ height: 100%; width: 100%; margin: 0; padding: 0; background: #e74c3c !important; } .searchbar{ margin-bottom: auto; margin-top: auto; height: 60px; background-color: #353b48; border-radius: 30px; padding: 10px; } .search_input{ color: white; border: 0; outline: 0; background: none; width: 0; caret-color:transparent; line-height: 40px; transition: width 0.4s linear; } .searchbar:hover > .search_input{ padding: 0 10px; width: 450px; caret-color:red; transition: width 0.4s linear; } .searchbar:hover > .search_icon{ background: white; color: #e74c3c; } .search_icon{ height: 40px; width: 40px; float: right; display: flex; justify-content: center; align-items: center; border-radius: 50%; color:white; text-decoration:none; }

Related: See More

Vue Paper Dashboard
My Awesome Login Page
Bootstrap 4 search Bar
Carousel with Search

Questions / Comments:

e

testing223 (1) - 2 months ago - Reply 1

In responsive view this search icon goes down after expand this search bar.

Any solution?

Shuvo (-1) - 1 year ago - Reply -1

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

@@PQIGF

testing223 (1) - 2 months ago - Reply 0

testing223 (1) - 2 months ago - Reply 0

1'"

testing223 (1) - 2 months ago - Reply 0

e'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'

testing223 (1) - 2 months ago - Reply 0

OCXBJWvp')) OR 354=(SELECT 354 FROM PG_SLEEP(15))--

testing223 (1) - 2 months ago - Reply 0

5LILZAtR') OR 131=(SELECT 131 FROM PG_SLEEP(15))--

testing223 (1) - 2 months ago - Reply 0

G5PEzhPF' OR 748=(SELECT 748 FROM PG_SLEEP(15))--

testing223 (1) - 2 months ago - Reply 0

1pLcuzZ9'; waitfor delay '0:0:15' --

testing223 (1) - 2 months ago - Reply 0

1 waitfor delay '0:0:15' --

testing223 (1) - 2 months ago - Reply 0

(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/

testing223 (1) - 2 months ago - Reply 0

0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z

testing223 (1) - 2 months ago - Reply 0

0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z

testing223 (1) - 2 months ago - Reply 0

if(now()=sysdate(),sleep(15),0)

testing223 (1) - 2 months ago - Reply 0

-1" OR 2+971-971-1=0+0+0+1 --

testing223 (1) - 2 months ago - Reply 0

-1' OR 2+781-781-1=0+0+0+1 or 'E2KLXhL5'='

testing223 (1) - 2 months ago - Reply 0

-1' OR 2+26-26-1=0+0+0+1 --

testing223 (1) - 2 months ago - Reply 0

-1 OR 2+385-385-1=0+0+0+1

testing223 (1) - 2 months ago - Reply 0

buJ0bcbm

testing223 (1) - 2 months ago - Reply 0

-1 OR 2+804-804-1=0+0+0+1 --

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

e

testing223 (1) - 2 months ago - Reply 0

So...I'm curious. Is something missing? Not only do these not work on this site, but they don't resolve in any search results when applied to my site, either. Just reloads the page. There must be some functional script for something that's not working or is missing.

vernontnh (-1) - 5 months ago - Reply 0