"Tabbed Search Neuvo v2"
Bootstrap 3.0.0 Snippet by waffleamp

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/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 ----------> <head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head> <div class="container-fluid"> <div class="row"> <div class="col-md-1"></div> <div class="col-md-10"> <div class="backgroundsearch"> <div class="container-fluid"> <div class="row"> <div class="col-sm-2"></div> <div class="col-sm-8"> <ul class="nav nav-pills nav-justified"> <li class="active"><a data-toggle="pill" href="#home">Books & Media</a></li> <li><a data-toggle="pill" href="#menu1">Articles</a></li> <li><a data-toggle="pill" href="#menu2">Journals</a></li> </div> </ul> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8"> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <div class="center"> <i class="fa fa-caret-down"></i> </div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <form action="http://vufind.carli.illinois.edu/vf-aru/Search/Home" method="get" role="search" target="vufind" name="searchForm"> <div class="input-group lrcInputs"> <input value="1" name="start_over" type="hidden"> <input class="form-control" id="lookFor" name="lookfor" type="text" placeholder="Search for books, ebooks, & media"> <div class="input-group-btn"><button class="btn btn-success lrcSearchButton" type="submit"><i class="glyphicon glyphicon-search"></i></button></div> </div> </form> </br> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <a href="#"><span class="glyphicon glyphicon-search"></span> I-Share Catalog</a> </div> <div class="col-md-4"> <a href="#"><span class="glyphicon glyphicon-user"></span> I-Share Account</a> </div> <div class="col-md-4"> <a href="#"><span class="glyphicon glyphicon-book"></span> Course Reserves</a> </div> </div> </div> </div> </div> <div id="menu1" class="tab-pane fade"> <div class="container-fluid"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"> <div class="center"> <i class="fa fa-caret-down"></i> </div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <script src="http://support.ebsco.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script> <form class="ebscohostCustomSearchBox" action="" onsubmit="return ebscoHostSearchGo(this);" method="post" style="overflow:hidden;" target="_blank"> <input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1" /> <input id="ebscohosturl" name="ebscohosturl" type="hidden" value="http://library.aurora.edu/login?url=http://search.ebscohost.com/login.aspx?direct=true&site=ehost-live&scope=site&type=1&db=a9h&db=afh&db=aph&db=vth&db=rfh&db=bai&db=bth&db=bsh&db=ccm&db=rzh&db=cgh&db=chh&db=cmr&db=ufh&db=c9h&db=i3h&db=dah&db=eoah&db=e000xna&db=nlebk&db=20h&db=eih&db=eric&db=funk&db=8gh&db=hxh&db=hch&db=hta&db=llf&db=ulh&db=f5h&db=mnh&db=mth&db=nfh&db=eed&db=poh&db=prh&db=tfh&db=pdh&db=psyh&db=bwh&db=swh&db=sih&db=s3h&db=trh&db=undefined&mode=bool&lang=en&authtype=ip" /> <input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="url" /> <input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+" /> <input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="" /> <div class="input-group lrcInputs"><input class="form-control" id="ebscohostsearchtext" placeholder="Search Ebsco" type="text" /> <div class="input-group-btn"><button class="btn btn-success lrcSearchButton" type="submit"><i class="glyphicon glyphicon-search"></i></button></div> </div> <div id="limiterblock" style="margin-left:-px; overflow: auto; display:none;"> <div id="limitertitle" style="font-weight:bold;padding-top:25px;padding-bottom:5px;">Limit Your Results</div> <div class="limiter" style="display:none;"> <input type="checkbox" id="chkFullText" name="chkFullText" /> <label for="chkFullText">Full Text</label> </div> <div class="limiter" style="display:none;"> <input type="checkbox" id="chkReferencesAvailable" name="chkReferencesAvailable" /> <label for="chkReferencesAvailable">References Available</label> </div> <div class="limiter" style="display:none;"> <input type="checkbox" id="chkPeerReviewed" name="chkPeerReviewed" /> <label for="chkPeerReviewed">Peer Reviewed</label> </div> </div> </form> </br> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <a href="#"><span class="glyphicon glyphicon-search"></span> I-Share Catalog</a> </div> <div class="col-md-4"> <a href="#"><span class="glyphicon glyphicon-user"></span> I-Share Account</a> </div> <div class="col-md-4"> <a href="#"><span class="glyphicon glyphicon-book"></span> Course Reserves</a> </div> </div> </div> </div> </div> <div id="menu2" class="tab-pane fade"> <div class="container-fluid"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"> <div class="center"> <i class="fa fa-caret-down"></i> </div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <form action="http://sfx.carli.illinois.edu/sfxaru/journalsearch/Default" method="get" role="search" target="AZ_Window"> <div class="input-group lrcInputs"><input class="form-control" id="param_pattern_value" placeholder="Search for e-Journals" type="text" name="param_pattern_value" /> <div class="input-group-btn"><button class="btn btn-success lrcSearchButton" type="submit"><i class="glyphicon glyphicon-search"></i></button></div> </div> </form> </br> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <a href="#"><span class="glyphicon glyphicon-search"></span> I-Share Catalog</a> </div> <div class="col-md-4"> <a href="#"><span class="glyphicon glyphicon-user"></span> I-Share Account</a> </div> <div class="col-md-4"> <a href="#"><span class="glyphicon glyphicon-book"></span> Course Reserves</a> </div> </div> </div> </div> </div> </div> </div> </div> </div></div></div></div>
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { background-color: #48A948; } .nav-pills>li>a, .nav-pills>li>a:focus { background-color: #efefef; } .nav-pills>li>a:hover { background-color: #e6e6e6; } .lrcSearchButton { background-color: #48A948; } .lrcSearchButton>a:hover{ background-color: #45a145; } .center { text-align: center; margin-top:-30px; color: #48A948; font-size:48px; } .backgroundsearch{ background-color: #000; }

Related: See More

Material Kit
Awesome Search Box
Carousel with Search
Bootstrap 4 search Bar

Questions / Comments: