"Js class Add"
Bootstrap 3.3.0 Snippet by imsachin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="style.css"> </head> <body> <!--serach-engine--> <div class="container con1 mrt220"> <div class="row"> <ul class="nav nav-tabs nav-tabs1"> <li class="active radio2"><a data-toggle="tab" href="#home">Flights</a></li> <li><a data-toggle="tab" href="#menu1" class="radio2">Hotels</a></li> </ul> <div class="tab-content tabcontent1"> <div id="home" class="tab-pane fade in active"> <div class="form-check-inline trip"> <label class="radio-inline radio2"> <input type="radio" name="optradio" id="menu4" checked>Round Trip</label> <label class="radio-inline radio1" > <input class="" type="radio" name="optradio" id="menu2">One Way</label> </div> <form> <div class="col-md-5"> <div class="row"> <div class="col-md-6 col-xs-12 pr0"> <div class="form-group"> <label class="la">Origin</label> <input type="text" class="form-control control1" placeholder="Origin"> </div> </div> <div class="col-md-6 pr0"> <div class="form-group"> <label class="la">Destination</label> <input type="text" class="form-control control1" placeholder="Destination"> </div> </div> </div> </div> <div class="col-md-5"> <div class="row"> <div class="col-md-7"> <div class="row"> <div class="col-md-6 pr0"> <div class="form-group"> <label class="la">Depart</label> <input type="text" class="form-control control1 depart_date" placeholder="Depart"> </div> </div> <div class="col-md-6 pr0"> <div class="form-group return"> <label class="la">Return</label> <input type="text" class="form-control control1 return_date" placeholder="Return"> </div> </div> </div> </div> <div class="col-md-5 pr0"> <div class="form-group relative"> <label class="la">Traveler</label> <input type="text" class="form-control control1 travel relative" placeholder="Traveler"> <div class=""> <div class="traveler-inside"> <div class="select1">Select Class</div> <select class="select2"> <option value="economy">Economy</option> <option value="premium economy">Premium Economy</option> <option value="business class">Business Class</option> <option value="first class">First Class</option> </select> <div class="modify-search"> <div class="modify-search-section"> <span class="adult">Adults</span> <div class="buttongroup"> <input id="sub1minus" class="btn btn-default altera decrescimo" type="button" onclick="MinusPax('Adult');" value="-"> <input id="txtAcrescimo" name="Adult" type="text" value="1" readonly=""> <input id="sub1plus" class="btn btn-default altera acrescimo" type="button" onclick="PlusPax('Adult');" value="+"> </div> </div> <div class="modify-search-section"> <span class="adult">Child(2-11)</span> <div class="buttongroup"> <input id="sub1minus" class="btn btn-default altera decrescimo" type="button" onclick="MinusPax('Adult');" value="-"> <input id="txtAcrescimo" name="Adult" type="text" value="1" readonly=""> <input id="sub1plus" class="btn btn-default altera decrescimo" type="button" onclick="PlusPax('Adult');" value="+"> </div> </div> <div class="modify-search-section"> <span class="adult">infant Lap(0-2)</span> <div class="buttongroup"> <input id="sub1minus" class="btn btn-default" type="button" onclick="MinusPax('Adult');" value="-"> <input id="Adult" name="Adult" type="text" value="1" readonly=""> <input id="sub1plus" class="btn btn-default " type="button" onclick="PlusPax('Adult');" value="+"> </div> </div> </div> <button type="btn-btn-danger" class="done" style="margin-top: 9px;margin-left: 120px;">Done</button> </div> </div> </div> </div> </div> </div> <div class="col-md-2 mrt20"> <a href="" class="btn btn-danger search1">Search</a> </div> </form> </div> <div id="menu1" class="tab-pane fade la"> <h3> Menu 1</h3> <p> Some content in menu 1.</p> </div> </div> </div> <div class="clearfix"></div> </div> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( ".depart_date" ).datepicker({ numberOfMonths: 2, minDate: 0 }); $( ".return_date" ).datepicker({ numberOfMonths: 2, minDate: 0 }); }); </script> <script> $(document).ready(function(){ $(".travel").click(function(){ //travel section start $(".traveler-inside").slideToggle(500); // travel section end }); </script> <script> $(".radio1").click(function(){ //alert("hi")// $(".return input").addClass("return1"); }); $(".radio2").click(function(){ $(".return input").removeClass("return1"); }); </script> </body> </html>
/*extra-css-start*/ input[type=text]:focus { background:red; color:#fff; } .return1{background:#8c5311;} .icons{background:#00539c;padding:5px;margin-top: 10px;} .secured ul li{list-style:none;display:inline-block;} /*extra-css-end*/ /*traveler-part*/ .traveler{margin-top:2px;} .traveler-inside{padding:10px;background:#fff;border:1px solid #eee;position:absolute;display:none;width: 224px;z-index:1;} .select1{font-size:14px;color:#18a3a8;} .select2{padding:2px;border:1px solid #ccc;} .adult{font-size:14px;color:#18a3a8;} .modify-search-section{float:left;} .icons{margin-top:10px;} /*traveler-inside-start*/ .buttongroup { width: 100%;margin-right:5px; } .buttongroup input.btn-default { color: #fff; background-color: #009eef; border-color: #009eef; border-radius: 0; font-weight: 600; } .buttongroup input { border: 1px solid #143ca1; background: #fff; width: 32px; margin: 0; padding: 2px 0; float: left; text-align: center; outline: 0; color: #143ca1; font-size: 12px; } /*traveler-inside-end*/ @media (max-width: 1200px){ } @media (min-width: 992px) and (max-width: 1024px) { .pr0{padding-right:15px;} .jumbo1{display:none;} } @media (min-width: 768px) and (max-width: 991px) { .pr0{padding-right:15px;} .jumbo1{display:none;} .secured{margin-top:0px;} .secured img{margin-top:10px;} .icons{margin-top: 260px;} } @media (min-width: 481px) and (max-width: 767px) { .pr0{padding-right:15px;} .secured{margin-top:0px;} .secured img{margin-top:10px;} .icons{margin-top: 300px;} } @media (min-width: 320px) and (max-width: 480px) { .pr0{padding-right:15px;} .mrt220{margin-top:10px;} .secured{margin-top:0px;} .secured img{margin-top:10px;} .icons{margin-top: 218px;} }

Related: See More

Rotating CSS Card
Creating password field text hide show via a single class
Login Class="Gabriel"

Questions / Comments: