"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

Light Bootstrap Dashboard React
My Awesome Login Page
Bootstrap 4 search Bar
Carousel with Search

Questions / Comments:

e

testing223 (1) - 1 year ago - Reply 1

e

xhat007 (1) - 11 months ago - Reply 0

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

Any solution?

Shuvo (-1) - 2 years ago - Reply -1

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

@@PQIGF

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

testing223 (1) - 1 year ago - Reply 0

e

xhat007 (1) - 11 months ago - Reply 0

1'"

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year 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) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

buJ0bcbm

testing223 (1) - 1 year ago - Reply 0

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

testing223 (1) - 1 year ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

testing223 (1) - 1 year ago - Reply 0

e

testing223 (1) - 1 year 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) - 1 year ago - Reply 0