"Load Search"
Bootstrap 4.1.1 Snippet by pairtho

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 lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-6" style="background-color:white;"> <form class="form-horizontal"> <fieldset> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Load Number">Load Number:</label> <div class="col-md-4"> <input id="Load Number" name="Load Number" type="text" placeholder="XXXXXX" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="Status">Status:</label> <div class="col-md-4"> <select id="Status" name="Status" class="form-control"> <option value="">[Select all]</option> <option value="">Available</option> <option value="">Committed</option> <option value="">Assigned</option> <option value="">Dispatched</option> <option value="">Picked Up</option> <option value="">Enroute</option> <option value="">Delivered</option> <option value="">TONU</option> <option value="">Received</option> <option value="">Invoiced</option> <option value="">Paid</option> <option value="">Voided</option> <option value="">Pending</option> <option value="">Completed</option> <option value="">Missed Pickup</option> <option value="">Claims Filed</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Product">Product:</label> <div class="col-md-4"> <input id="Product" name="Product" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Customer:">Customer:</label> <div class="col-md-4"> <input id="Customer:" name="Customer:" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Carrier">Carrier:</label> <div class="col-md-4"> <input id="Carrier" name="Carrier" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Sales Rep">Sales Rep:</label> <div class="col-md-4"> <input id="Sales Rep" name="Sales Rep" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="Divisions">Divisions:</label> <div class="col-md-4"> <select id="Divisions" name="Divisions" class="form-control"> <option value="1">All Divisions</option> <option value="2">East</option> <option value="">West</option> </select> </div> </div> </fieldset> </form> </div> <div class="col-sm-6" style="background-color:white;"> <form class="form-horizontal"> <fieldset> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="PO#">PO#:</label> <div class="col-md-4"> <input id="PO#" name="PO#" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="BOL">BOL:</label> <div class="col-md-4"> <input id="BOL" name="BOL" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="Equipment Type">Equipment Type:</label> <div class="col-md-4"> <select id="Equipment Type" name="Equipment Type" class="form-control"> <option value="">[All Equipment]</option> <option value="">53' FLATBED</option> <option value="">53' STEPDECK</option> <option value="">AAAAA</option> <option value="">AUTO CARRIER</option> <option value="">CONESTOGA</option> <option value="">CRANE</option> <option value="">DOUBLE DROP</option> <option value="">DRAY</option> <option value="">DRIVE-AWAY</option> <option value="">DUMP TRAILER</option> <option value="">FLATBED</option> <option value="">FLATBED OR STEPDECK AIR RIDE</option> <option value="">FLATBED EXTENDABLE</option> <option value="">FLATBED TEAM</option> <option value="">REEFER/FLATBED/VAN</option> <option value="">FLATBED/STEPDECK W/TARPS</option> <option value="">FLATBED W/TARPS</option> <option value="">FLATBED OR VAN</option> <option value="">FLATBED/VAN/REEFER</option> <option value="">FLATBED W/SIDES</option> <option value="">FLATBED W/PALLET EXCHANGE</option> <option value="">FLATBED HAZARDOUS</option> <option value="">HOTSHOT TEAM</option> <option value="">HOTSHOT W/RAMPS</option> <option value="">HOTSHOT</option> <option value="">INTERMODAL</option> <option value="">INTERMODAL</option> <option value="">LANDALL</option> <option value="">LOWBOY</option> <option value="">LTL</option> <option value="">MAXI</option> <option value="">OCEAN CONTAINER</option> <option value="">POWER ONLY</option> <option value="">REEFER</option> <option value="">ROLLBACK</option> <option value="">REMOVABLE GOOSENECK</option> <option value="">RIGGER</option> <option value="">REEFER OR VAN</option> <option value="">REEFER W/PALLET EXCHANGE</option> <option value="">REEFER HAZARDOUS</option> <option value="">STEP DECK</option> <option value="">STEPDECK WITH RAMPS</option> <option value="">STEPDECK W/TEAM</option> <option value="">FLATBED OR STEP DECK</option> <option value="">SPRINTER VAN</option> <option value="">STEPDECK OR RGN</option> <option value="">STEPDECK W/TEAM</option> <option value="">STRAIGHT BOX TRUCK</option> <option value="">STRETCH RGN</option> <option value="">TANKER</option> <option value="">VAN</option> <option value="">VAN AIR-RIDE</option> <option value="">VAN W/TEAM</option> <option value="">VAN W/CURTAINS</option> <option value="">VAN OR FLATBED</option> <option value="">VAN W/LIFTGATE</option> <option value="">VAN OR REEFER</option> <option value="">VAN/REEFER/FLATBED</option> <option value="">VAN VENTED</option> <option value="">VAN W/PALLET EXCHANGE</option> <option value="">VAN HAZARDOUS</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Carrier Inv #">Carrier Inv #:</label> <div class="col-md-4"> <input id="Carrier Inv #" name="Carrier Inv #" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="MC#">MC#:</label> <div class="col-md-4"> <input id="MC#" name="MC#" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="LTL/TL">LTL/TL:</label> <div class="col-md-4"> <select id="LTL/TL" name="LTL/TL" class="form-control"> <option value="1">Both</option> <option value="2">LTL</option> <option value="">TL</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="PRO #">PRO#:</label> <div class="col-md-4"> <input id="PRO #" name="PRO #" type="text" placeholder="" class="form-control input-md"> </div> </div> </fieldset> </form> </div> </div> </div> </body> </html>
select.form-control:not([size]):not([multiple]) { height: calc(2.25rem + 10px); }

Related: See More

Paper Dashboard React
Fancy subscribe modal (md, lg) with delay functionality on page load
Awesome Search Box
Carousel with Search

Questions / Comments: