"Carousel with Search"
Bootstrap 4.1.1 Snippet by nitesh575malviya

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<div class="container">
<div class="row pt-1 pb-1">
<div class="col-lg-12 text-center">
<h4 class="text-center">Carousel with Three input search</h4>
<h6 class="text-center">awesome responsive image slider with a search bar</h6>
</div>
</div>
</div>
<section>
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://pbs.twimg.com/media/EGHYvttU4AAYKb7?format=jpg&name=large" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://pbs.twimg.com/media/EGHYvtkUcAAuc8T?format=jpg&name=large" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://pbs.twimg.com/media/EGHYvtjU0AAO8w1?format=jpg&name=large" class="d-block w-100" alt="...">
</div>
<!--https://upload.wikimedia.org/wikipedia/commons/8/8d/Yarra_Night_Panorama%2C_Melbourne_-_Feb_2005.jpg-->
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*search box css start here*/
.search-sec{
padding: 2rem;
}
.search-slt{
display: block;
width: 100%;
font-size: 0.875rem;
line-height: 1.5;
color: #55595c;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
height: calc(3rem + 2px) !important;
border-radius:0;
}
.wrn-btn{
width: 100%;
font-size: 16px;
font-weight: 400;
text-transform: capitalize;
height: calc(3rem + 2px) !important;
border-radius:0;
}
@media (min-width: 992px){
.search-sec{
position: relative;
top: -114px;
background: rgba(26, 70, 104, 0.51);
}
}
@media (max-width: 992px){
.search-sec{
background: #1A4668;
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Dashboard
Awesome Search Box
Bootstrap 4 search Bar
Navbar Search Box Auto Expand

Questions / Comments:

needs more blue

mezuzh (-2) - 4 years ago - Reply -2

e

xhat007 (1) - 3 years ago - Reply 1

Not working properly, very bad

Siddharth Panchal (17) - 2 years ago - Reply 0

Exactly what i have been looking for

felex kemboi (-9) - 6 years ago - Reply -6

Thank You

nitesh575malviya (-3) - 5 years ago - Reply -3

e

testing223 (-1) - 4 years ago - Reply -1

e

xhat007 (1) - 3 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

@@9sYKA

testing223 (-1) - 4 years ago - Reply 0

testing223 (-1) - 4 years ago - Reply 0

1'"

testing223 (-1) - 4 years ago - Reply 0

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

testing223 (-1) - 4 years ago - Reply 0

nhmNaNdG')) OR 416=(SELECT 416 FROM PG_SLEEP(15))--

testing223 (-1) - 4 years ago - Reply 0

YwIYwKsD') OR 789=(SELECT 789 FROM PG_SLEEP(15))--

testing223 (-1) - 4 years ago - Reply 0

24NyyRyl' OR 540=(SELECT 540 FROM PG_SLEEP(15))--

testing223 (-1) - 4 years ago - Reply 0

HpsOtpKb'; waitfor delay '0:0:15' --

testing223 (-1) - 4 years ago - Reply 0

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

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

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

testing223 (-1) - 4 years ago - Reply 0

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

testing223 (-1) - 4 years ago - Reply 0

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

testing223 (-1) - 4 years ago - Reply 0

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

testing223 (-1) - 4 years ago - Reply 0

-1' OR 2+597-597-1=0+0+0+1 or 'qXUnnOVZ'='

testing223 (-1) - 4 years ago - Reply 0

-1 OR 2+344-344-1=0+0+0+1

testing223 (-1) - 4 years ago - Reply 0

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

testing223 (-1) - 4 years ago - Reply 0

-1 OR 2+550-550-1=0+0+0+1 --

testing223 (-1) - 4 years ago - Reply 0

TX0DM70t

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

xhat007 (1) - 3 years ago - Reply 0

frffeng () - 1 year ago - Reply 0

Not working properly, very bad

Siddharth Panchal (17) - 2 years ago - Reply 0

Not Working properly

Siddharth Panchal (17) - 2 years ago - Reply 0

Not Working properly

Siddharth Panchal (17) - 2 years ago - Reply 0

Not Working properly

Siddharth Panchal (17) - 2 years ago - Reply 0

not able to copy html, css and js code

Pratiba () - 3 years ago - Reply 0

not able to copy html, css and js code

Pratiba () - 3 years ago - Reply 0

nice, thanks

rahmansurya () - 3 years ago - Reply 0

nice, thanks

rahmansurya () - 3 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0

e

testing223 (-1) - 4 years ago - Reply 0