"add vehilce form"
Bootstrap 4.0.0 Snippet by jeevan123456

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="theme-color" content="#2196f3"> <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:"> <title>Framework7</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <link rel="stylesheet" href="../dist/css/framework7.min.css"> <link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/custom-av.css"> <link rel="apple-touch-icon" href="img/f7-icon-square.png"> <link rel="icon" href="img/f7-icon.png"> </head> <body> <div id="app"> <div class="statusbar"></div> <div class="panel panel-left panel-cover"> <div class="page"> <div class="page-content"> <div class="sidebar-image-banner"> <img src ="http://raychinki.com/wp-content/uploads/2018/01/Material_Design.jpg"> </div> <div class="block-title">Main View Navigation</div> <div class="list "> <ul> <a href="#" class="item-link item-content panel-close"> <div class="item-media"><i class="fa fa-user"></i></div> <div class="item-inner"> <div class="item-title">My Profile</div> </div> </a> <a href="#" class="item-link item-content panel-close"> <div class="item-media"><i class="fa fa-user"></i></div> <div class="item-inner"> <div class="item-title">About us</div> </div> </a> <a href="#" class="item-link item-content panel-close"> <div class="item-media"><i class="fa fa-user"></i></div> <div class="item-inner"> <div class="item-title">Sign In</div> </div> </a> <a href="#" class="item-link item-content panel-close"> <div class="item-media"><i class="fa fa-user"></i></div> <div class="item-inner"> <div class="item-title">Reset Password</div> </div> </a> <a href="#" class="item-link item-content panel-close"> <div class="item-media"><i class="fa fa-user"></i></div> <div class="item-inner"> <div class="item-title">Listing View</div> </div> </a> <a href="#" class="item-link item-content panel-close"> <div class="item-media"><i class="fa fa-car"></i></div> <div class="item-inner"> <div class="item-title">Select Car</div> </div> </a> <a href="#" class="item-link item-content panel-close"> <div class="item-media"><i class="fa fa-wrench"></i></div> <div class="item-inner"> <div class="item-title">Find Service Center</div> </div> </a> <a href="#" class="item-link item-content panel-close"> <div class="item-media"><i class="fa fa-map-marker"></i></div> <div class="item-inner"> <div class="item-title">My Location</div> </div> </a> <a href="#" class="item-link item-content panel-close"> <div class="item-media"><i class="fa fa-shopping-cart"></i></div> <div class="item-inner"> <div class="item-title">Book Service</div> </div> </a> <a href="#" class="item-link item-content panel-close"> <div class="item-media"><i class="fa fa-pie-chart"></i></div> <div class="item-inner"> <div class="item-title">Check Status</div> </div> </a> <a href="#" class="item-link item-content panel-close"> <div class="item-media"><i class="fa fa-upload"></i></div> <div class="item-inner"> <div class="item-title">Upload Photos</div> </div> </a> <a href="#" class="item-link item-content panel-close"> <div class="item-media"><i class="fa fa-envelope-o"></i></div> <div class="item-inner"> <div class="item-title">My Feedback</div> </div> </a> </ul> </div> <div class="block"> <p>© All Rights Reserved</p> </div> </div> </div> </div> <div class="view view-main view-init ios-edges" data-url="/"> <div class="page"> <div class="navbar"> <div class="navbar-inner sliding"> <div class="left"> <a href="#" class="link back"> <i class="icon icon-back"></i> <span class="ios-only">Back</span> </a> </div> <div class="title">Autocomplete</div> </div> </div> <div class="page-content"> <div class="list no-hairlines-md"> <div class="block-header">Add Your Vehicles</div> <ul> <li class="item-content item-input"> <div class="item-inner"> <div class="item-title item-label">Brand</div> <div class="item-input-wrap"> <input id="autocomplete-dropdown-placeholder" type="text" placeholder="Brand"> </div> </div> </li> <li class="item-content item-input"> <div class="item-inner"> <div class="item-title item-label">Model</div> <div class="item-input-wrap"> <input type="text" placeholder="Model of your car"> <span class="input-clear-button"></span> </div> </div> </li> <li class="item-content item-input"> <div class="item-inner"> <div class="item-title item-label">Manufacturing Year</div> <div class="item-input-wrap"> <input type="text" placeholder="Manufacturing Year"> <span class="input-clear-button"></span> </div> </div> </li> <li class="item-content item-input"> <div class="item-inner"> <div class="item-title item-label">Registration Year</div> <div class="item-input-wrap"> <input type="text" placeholder="Registration Year"> <span class="input-clear-button"></span> </div> </div> </li> <li class="item-content item-input"> <div class="item-inner"> <div class="item-title item-label">Registration Number</div> <div class="item-input-wrap"> <input type="text" placeholder="Registration Number(Number-Plate) "> <span class="input-clear-button"></span> </div> </div> </li> </ul> </div> <div class="block"> <p class="row"> <button class="col button button-fill color-blue">Add Now</button> </p> </div> </div> </div> </div> </div> <script src="../dist/js/framework7.min.js"></script> <script src="js/routes.js"></script> <script src="js/app.js"></script> <script> var app = new Framework7(); var $$ = Dom7; // Fruits data demo array var fruits = ('Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple').split(' '); </script> <script> var autocompleteDropdownPlaceholder = app.autocomplete.create({ inputEl: '#autocomplete-dropdown-placeholder', openIn: 'dropdown', dropdownPlaceholderText: 'Try to type "Apple"', source: function (query, render) { var results = []; if (query.length === 0) { render(results); return; } // Find matched items for (var i = 0; i < fruits.length; i++) { if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]); } // Render items by passing array with result items render(results); } }); </script> </body> </html>

Related: See More

Material Kit
login-form
Login Form
Contact Form

Questions / Comments: