@coreui/ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template"> <meta name="author" content="Łukasz Holeczek"> <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js"> <link rel="shortcut icon" href="img/favicon.png"> <title>CoreUI - Open Source Bootstrap Admin Template</title>  <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet"> <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">  <link href="css/style.css" rel="stylesheet">  </head>  <body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden"> <header class="app-header navbar"> <button class="navbar-toggler mobile-sidebar-toggler d-lg-none mr-auto" type="button"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"></a> <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button"> <span class="navbar-toggler-icon"></span> </button> <ul class="nav navbar-nav d-md-down-none"> <li class="nav-item px-3"> <a class="nav-link" href="#">Dashboard</a> </li> <li class="nav-item px-3"> <a class="nav-link" href="#">Users</a> </li> <li class="nav-item px-3"> <a class="nav-link" href="#">Settings</a> </li> </ul> <ul class="nav navbar-nav ml-auto"> <li class="nav-item d-md-down-none"> <a class="nav-link" href="#"><i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span></a> </li> <li class="nav-item d-md-down-none"> <a class="nav-link" href="#"><i class="icon-list"></i></a> </li> <li class="nav-item d-md-down-none"> <a class="nav-link" href="#"><i class="icon-location-pin"></i></a> </li> <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> <img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> </a> <div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-header text-center"> <strong>Account</strong> </div> <a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span class="badge badge-info">42</span></a> <a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></a> <a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></a> <a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comments<span class="badge badge-warning">42</span></a> <div class="dropdown-header text-center"> <strong>Settings</strong> </div> <a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a> <a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Settings</a> <a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="badge badge-secondary">42</span></a> <a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></a> <div class="divider"></div> <a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock Account</a> <a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a> </div> </li> </ul> <button class="navbar-toggler aside-menu-toggler" type="button"> <span class="navbar-toggler-icon"></span> </button> </header> <div class="app-body"> <div class="sidebar"> <nav class="sidebar-nav"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="index.html"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-primary">NEW</span></a> </li> <li class="nav-title"> Theme </li> <li class="nav-item"> <a href="colors.html" class="nav-link"><i class="icon-drop"></i> Colors</a> </li> <li class="nav-item"> <a href="typography.html" class="nav-link"><i class="icon-pencil"></i> Typograhy</a> </li> <li class="nav-title"> Components </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-puzzle"></i> Base</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="base-breadcrumb.html"><i class="icon-puzzle"></i> Breadcrumb</a> </li> <li class="nav-item"> <a class="nav-link" href="base-cards.html"><i class="icon-puzzle"></i> Cards</a> </li> <li class="nav-item"> <a class="nav-link" href="base-carousel.html"><i class="icon-puzzle"></i> Carousel</a> </li> <li class="nav-item"> <a class="nav-link" href="base-collapse.html"><i class="icon-puzzle"></i> Collapse</a> </li> <li class="nav-item"> <a class="nav-link" href="base-forms.html"><i class="icon-puzzle"></i> Forms</a> </li> <li class="nav-item"> <a class="nav-link" href="base-jumbotron.html"><i class="icon-puzzle"></i> Jumbotron</a> </li> <li class="nav-item"> <a class="nav-link" href="base-list-group.html"><i class="icon-puzzle"></i> List group</a> </li> <li class="nav-item"> <a class="nav-link" href="base-navs.html"><i class="icon-puzzle"></i> Navs</a> </li> <li class="nav-item"> <a class="nav-link" href="base-pagination.html"><i class="icon-puzzle"></i> Pagination</a> </li> <li class="nav-item"> <a class="nav-link" href="base-popovers.html"><i class="icon-puzzle"></i> Popovers</a> </li> <li class="nav-item"> <a class="nav-link" href="base-progress.html"><i class="icon-puzzle"></i> Progress</a> </li> <li class="nav-item"> <a class="nav-link" href="base-switches.html"><i class="icon-puzzle"></i> Switches</a> </li> <li class="nav-item"> <a class="nav-link" href="base-tables.html"><i class="icon-puzzle"></i> Tables</a> </li> <li class="nav-item"> <a class="nav-link" href="base-tabs.html"><i class="icon-puzzle"></i> Tabs</a> </li> <li class="nav-item"> <a class="nav-link" href="base-tooltips.html"><i class="icon-puzzle"></i> Tooltips</a> </li> </ul> </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-cursor"></i> Buttons</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="buttons-buttons.html"><i class="icon-cursor"></i> Buttons</a> </li> <li class="nav-item"> <a class="nav-link" href="buttons-button-group.html"><i class="icon-cursor"></i> Buttons Group</a> </li> <li class="nav-item"> <a class="nav-link" href="buttons-dropdowns.html"><i class="icon-cursor"></i> Dropdowns</a> </li> <li class="nav-item"> <a class="nav-link" href="buttons-social-buttons.html"><i class="icon-cursor"></i> Social Buttons</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="charts.html"><i class="icon-pie-chart"></i> Charts</a> </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> Icons</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="icons-flags.html"><i class="icon-star"></i> Flags <span class="badge badge-success">NEW</span></a> </li> <li class="nav-item"> <a class="nav-link" href="icons-font-awesome.html"><i class="icon-star"></i> Font Awesome <span class="badge badge-secondary">4.7</span></a> </li> <li class="nav-item"> <a class="nav-link" href="icons-simple-line-icons.html"><i class="icon-star"></i> Simple Line Icons</a> </li> </ul> </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-bell"></i> Notifications</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="notifications-alerts.html"><i class="icon-bell"></i> Alerts</a> </li> <li class="nav-item"> <a class="nav-link" href="notifications-badge.html"><i class="icon-bell"></i> Badge</a> </li> <li class="nav-item"> <a class="nav-link" href="notifications-modals.html"><i class="icon-bell"></i> Modals</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="widgets.html"><i class="icon-calculator"></i> Widgets <span class="badge badge-primary">NEW</span></a> </li> <li class="divider"></li> <li class="nav-title"> Extras </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> Pages</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="pages-login.html" target="_top"><i class="icon-star"></i> Login</a> </li> <li class="nav-item"> <a class="nav-link" href="pages-register.html" target="_top"><i class="icon-star"></i> Register</a> </li> <li class="nav-item"> <a class="nav-link" href="pages-404.html" target="_top"><i class="icon-star"></i> Error 404</a> </li> <li class="nav-item"> <a class="nav-link" href="pages-500.html" target="_top"><i class="icon-star"></i> Error 500</a> </li> </ul> </li> <li class="nav-item mt-auto"> <a class="nav-link nav-link-success" href="http://coreui.io/" target="_top"><i class="icon-cloud-download"></i> Download CoreUI</a> </li> <li class="nav-item"> <a class="nav-link nav-link-danger" href="http://coreui.io/pro/" target="_top"><i class="icon-layers"></i> Try CoreUI <strong>PRO</strong></a> </li> </ul> </nav> <button class="sidebar-minimizer brand-minimizer" type="button"></button> </div>  <main class="main">  <ol class="breadcrumb"> <li class="breadcrumb-item">Home</li> <li class="breadcrumb-item"><a href="#">Admin</a></li> <li class="breadcrumb-item active">Dashboard</li>  <li class="breadcrumb-menu d-md-down-none"> <div class="btn-group" role="group" aria-label="Button group"> <a class="btn" href="#"><i class="icon-speech"></i></a> <a class="btn" href="./"><i class="icon-graph"></i>  Dashboard</a> <a class="btn" href="#"><i class="icon-settings"></i>  Settings</a> </div> </li> </ol> <div class="container-fluid"> <div class="animated fadeIn"> <div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-header"> <strong>Credit Card</strong> <small>Form</small> </div> <div class="card-body"> <div class="row"> <div class="col-sm-12"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter your name"> </div> </div> </div>  <div class="row"> <div class="col-sm-12"> <div class="form-group"> <label for="ccnumber">Credit Card Number</label> <input type="text" class="form-control" id="ccnumber" placeholder="0000 0000 0000 0000"> </div> </div> </div>  <div class="row"> <div class="form-group col-sm-4"> <label for="ccmonth">Month</label> <select class="form-control" id="ccmonth"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select> </div> <div class="form-group col-sm-4"> <label for="ccyear">Year</label> <select class="form-control" id="ccyear"> <option>2014</option> <option>2015</option> <option>2016</option> <option>2017</option> <option>2018</option> <option>2019</option> <option>2020</option> <option>2021</option> <option>2022</option> <option>2023</option> <option>2024</option> <option>2025</option> </select> </div> <div class="col-sm-4"> <div class="form-group"> <label for="cvv">CVV/CVC</label> <input type="text" class="form-control" id="cvv" placeholder="123"> </div> </div> </div>  </div> </div> </div>  <div class="col-sm-6"> <div class="card"> <div class="card-header"> <strong>Company</strong> <small>Form</small> </div> <div class="card-body"> <div class="form-group"> <label for="company">Company</label> <input type="text" class="form-control" id="company" placeholder="Enter your company name"> </div> <div class="form-group"> <label for="vat">VAT</label> <input type="text" class="form-control" id="vat" placeholder="PL1234567890"> </div> <div class="form-group"> <label for="street">Street</label> <input type="text" class="form-control" id="street" placeholder="Enter street name"> </div> <div class="row"> <div class="form-group col-sm-8"> <label for="city">City</label> <input type="text" class="form-control" id="city" placeholder="Enter your city"> </div> <div class="form-group col-sm-4"> <label for="postal-code">Postal Code</label> <input type="text" class="form-control" id="postal-code" placeholder="Postal Code"> </div> </div>  <div class="form-group"> <label for="country">Country</label> <input type="text" class="form-control" id="country" placeholder="Country name"> </div> </div> </div> </div>  </div>  <div class="row"> <div class="col-md-6"> <div class="card"> <div class="card-header"> <strong>Basic Form</strong> Elements </div> <div class="card-body"> <form action="" method="post" enctype="multipart/form-data" class="form-horizontal"> <div class="form-group row"> <label class="col-md-3 col-form-label">Static</label> <div class="col-md-9"> <p class="form-control-static">Username</p> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="text-input">Text Input</label> <div class="col-md-9"> <input type="text" id="text-input" name="text-input" class="form-control" placeholder="Text"> <span class="help-block">This is a help text</span> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="email-input">Email Input</label> <div class="col-md-9"> <input type="email" id="email-input" name="email-input" class="form-control" placeholder="Enter Email"> <span class="help-block">Please enter your email</span> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="password-input">Password</label> <div class="col-md-9"> <input type="password" id="password-input" name="password-input" class="form-control" placeholder="Password"> <span class="help-block">Please enter a complex password</span> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="disabled-input">Disabled Input</label> <div class="col-md-9"> <input type="text" id="disabled-input" name="disabled-input" class="form-control" placeholder="Disabled" disabled=""> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="textarea-input">Textarea</label> <div class="col-md-9"> <textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="Content.."></textarea> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="select1">Select</label> <div class="col-md-9"> <select id="select1" name="select1" class="form-control"> <option value="0">Please select</option> <option value="1">Option #1</option> <option value="2">Option #2</option> <option value="3">Option #3</option> </select> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="select2">Select Large</label> <div class="col-md-9"> <select id="select2" name="select2" class="form-control form-control-lg"> <option value="0">Please select</option> <option value="1">Option #1</option> <option value="2">Option #2</option> <option value="3">Option #3</option> </select> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="select3">Select Small</label> <div class="col-md-9"> <select id="select3" name="select3" class="form-control form-control-sm"> <option value="0">Please select</option> <option value="1">Option #1</option> <option value="2">Option #2</option> <option value="3">Option #3</option> </select> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="disabledSelect">Disabled Select</label> <div class="col-md-9"> <select id="disabledSelect" class="form-control" disabled=""> <option value="0">Please select</option> <option value="1">Option #1</option> <option value="2">Option #2</option> <option value="3">Option #3</option> </select> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="multiple-select">Multiple select</label> <div class="col-md-9"> <select id="multiple-select" name="multiple-select" class="form-control" size="5" multiple=""> <option value="1">Option #1</option> <option value="2">Option #2</option> <option value="3">Option #3</option> <option value="4">Option #4</option> <option value="5">Option #5</option> <option value="6">Option #6</option> <option value="7">Option #7</option> <option value="8">Option #8</option> <option value="9">Option #9</option> <option value="10">Option #10</option> </select> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label">Radios</label> <div class="col-md-9 col-form-label"> <div class="form-check"> <input class="form-check-input" type="radio" value="radio1" id="radio1" name="radios"> <label class="form-check-label" for="radio1"> Option 1 </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" value="radio2" id="radio2" name="radios"> <label class="form-check-label" for="radio2"> Option 2 </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" value="radio2" id="radio3" name="radios"> <label class="form-check-label" for="radio3"> Option 3 </label> </div> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label">Inline Radios</label> <div class="col-md-9 col-form-label"> <div class="form-check form-check-inline mr-1"> <input class="form-check-input" type="radio" id="inline-radio1" value="option1" name="inline-radios"> <label class="form-check-label" for="inline-radio1">One</label> </div> <div class="form-check form-check-inline mr-1"> <input class="form-check-input" type="radio" id="inline-radio2" value="option2" name="inline-radios"> <label class="form-check-label" for="inline-radio2">Two</label> </div> <div class="form-check form-check-inline mr-1"> <input class="form-check-input" type="radio" id="inline-radio3" value="option3" name="inline-radios"> <label class="form-check-label" for="inline-radio3">Three</label> </div> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label">Checkboxes</label> <div class="col-md-9 col-form-label"> <div class="form-check checkbox"> <input class="form-check-input" type="checkbox" value="" id="check1"> <label class="form-check-label" for="check1"> Option 1 </label> </div> <div class="form-check checkbox"> <input class="form-check-input" type="checkbox" value="" id="check2"> <label class="form-check-label" for="check2"> Option 2 </label> </div> <div class="form-check checkbox"> <input class="form-check-input" type="checkbox" value="" id="check3"> <label class="form-check-label" for="check3"> Option 3 </label> </div> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label">Inline Checkboxes</label> <div class="col-md-9 col-form-label"> <div class="form-check form-check-inline mr-1"> <input class="form-check-input" type="checkbox" id="inline-checkbox1" value="check1"> <label class="form-check-label" for="inline-checkbox1">One</label> </div> <div class="form-check form-check-inline mr-1"> <input class="form-check-input" type="checkbox" id="inline-checkbox2" value="check2"> <label class="form-check-label" for="inline-checkbox2">Two</label> </div> <div class="form-check form-check-inline mr-1"> <input class="form-check-input" type="checkbox" id="inline-checkbox3" value="check3"> <label class="form-check-label" for="inline-checkbox3">Three</label> </div> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="file-input">File input</label> <div class="col-md-9"> <input type="file" id="file-input" name="file-input"> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="file-multiple-input">Multiple File input</label> <div class="col-md-9"> <input type="file" id="file-multiple-input" name="file-multiple-input" multiple=""> </div> </div> </form> </div> <div class="card-footer"> <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button> <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button> </div> </div> <div class="card"> <div class="card-header"> <strong>Inline</strong> Form </div> <div class="card-body"> <form action="" method="post" class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> </div> </form> </div> <div class="card-footer"> <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button> <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-header"> <strong>Horizontal</strong> Form </div> <div class="card-body"> <form action="" method="post" class="form-horizontal"> <div class="form-group row"> <label class="col-md-3 col-form-label" for="hf-email">Email</label> <div class="col-md-9"> <input type="email" id="hf-email" name="hf-email" class="form-control" placeholder="Enter Email.."> <span class="help-block">Please enter your email</span> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label" for="hf-password">Password</label> <div class="col-md-9"> <input type="password" id="hf-password" name="hf-password" class="form-control" placeholder="Enter Password.."> <span class="help-block">Please enter your password</span> </div> </div> </form> </div> <div class="card-footer"> <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button> <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button> </div> </div> <div class="card"> <div class="card-header"> <strong>Normal</strong> Form </div> <div class="card-body"> <form action="" method="post"> <div class="form-group"> <label for="nf-email">Email</label> <input type="email" id="nf-email" name="nf-email" class="form-control" placeholder="Enter Email.."> <span class="help-block">Please enter your email</span> </div> <div class="form-group"> <label for="nf-password">Password</label> <input type="password" id="nf-password" name="nf-password" class="form-control" placeholder="Enter Password.."> <span class="help-block">Please enter your password</span> </div> </form> </div> <div class="card-footer"> <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button> <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button> </div> </div> <div class="card"> <div class="card-header"> Input <strong>Grid</strong> </div> <div class="card-body"> <form action="" method="post" class="form-horizontal"> <div class="form-group row"> <div class="col-sm-3"> <input type="text" class="form-control" placeholder=".col-sm-3"> </div> </div> <div class="form-group row"> <div class="col-sm-4"> <input type="text" class="form-control" placeholder=".col-sm-4"> </div> </div> <div class="form-group row"> <div class="col-sm-5"> <input type="text" class="form-control" placeholder=".col-sm-5"> </div> </div> <div class="form-group row"> <div class="col-sm-6"> <input type="text" class="form-control" placeholder=".col-sm-6"> </div> </div> <div class="form-group row"> <div class="col-sm-7"> <input type="text" class="form-control" placeholder=".col-sm-7"> </div> </div> <div class="form-group row"> <div class="col-sm-8"> <input type="text" class="form-control" placeholder=".col-sm-8"> </div> </div> <div class="form-group row"> <div class="col-sm-9"> <input type="text" class="form-control" placeholder=".col-sm-9"> </div> </div> <div class="form-group row"> <div class="col-sm-10"> <input type="text" class="form-control" placeholder=".col-sm-10"> </div> </div> <div class="form-group row"> <div class="col-sm-11"> <input type="text" class="form-control" placeholder=".col-sm-11"> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input type="text" class="form-control" placeholder=".col-sm-12"> </div> </div> </form> </div> <div class="card-footer"> <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-user"></i> Login</button> <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button> </div> </div> <div class="card"> <div class="card-header"> Input <strong>Sizes</strong> </div> <div class="card-body"> <form action="" method="post" class="form-horizontal"> <div class="form-group row"> <label class="col-sm-5 col-form-label" for="input-small">Small Input</label> <div class="col-sm-6"> <input type="text" id="input-small" name="input-small" class="form-control form-control-sm" placeholder=".form-control-sm"> </div> </div> <div class="form-group row"> <label class="col-sm-5 col-form-label" for="input-normal">Normal Input</label> <div class="col-sm-6"> <input type="text" id="input-normal" name="input-normal" class="form-control" placeholder="Normal"> </div> </div> <div class="form-group row"> <label class="col-sm-5 col-form-label" for="input-large">Large Input</label> <div class="col-sm-6"> <input type="text" id="input-large" name="input-large" class="form-control form-control-lg" placeholder=".form-control-lg"> </div> </div> </form> </div> <div class="card-footer"> <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button> <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button> </div> </div> </div>  </div>  <div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-header"> <strong>Validation states</strong> Form </div> <div class="card-body"> <form class="was-validated"> <div class="form-group"> <label class="form-col-form-label" for="inputSuccess1">Input with success</label> <input type="text" class="form-control is-valid" id="inputSuccess1"> </div> <div class="form-group"> <label class="form-col-form-label" for="inputError1">Input with error</label> <input type="text" class="form-control is-invalid" id="inputError1"> <div class="invalid-feedback"> Please provide a valid informations. </div> </div> </form> </div> </div> </div>  <div class="col-sm-6"> <div class="card"> <div class="card-header"> <strong>Validation</strong> <code>was-validated</code> </div> <div class="card-body was-validated"> <div class="form-group"> <label class="form-col-form-label" for="inputSuccess2">Input is valid</label> <input type="text" class="form-control is-valid" id="inputSuccess2"> </div> <div class="form-group"> <label class="form-col-form-label" for="inputError2">Input required</label> <input type="text" class="form-control is-invalid" id="inputError2" required=""> <div class="invalid-feedback"> Please provide a valid informations. </div> </div> </div> </div> </div>  </div> <div class="row"> <div class="col-sm-4"> <div class="card"> <div class="card-header"> <strong>Icon/Text</strong> Groups </div> <div class="card-body"> <form action="" method="post" class="form-horizontal"> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-user"></i></span> </div> <input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Username"> </div> </div> </div> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"> <input type="email" id="input2-group1" name="input2-group1" class="form-control" placeholder="Email"> <div class="input-group-append"> <span class="input-group-text"><i class="fa fa-envelope-o"></i></span> </div> </div> </div> </div> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-euro"></i></span> </div> <input type="text" id="input3-group1" name="input3-group1" class="form-control" placeholder=".."> <div class="input-group-append"> <span class="input-group-text">.00</span> </div> </div> </div> </div> </form> </div> <div class="card-footer"> <button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button> <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button> </div> </div> </div> <div class="col-sm-4"> <div class="card"> <div class="card-header"> <strong>Buttons</strong> Groups </div> <div class="card-body"> <form action="" method="post" class="form-horizontal"> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"> <span class="input-group-prepend"> <button type="button" class="btn btn-primary"><i class="fa fa-search"></i> Search</button> </span> <input type="text" id="input1-group2" name="input1-group2" class="form-control" placeholder="Username"> </div> </div> </div> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"> <input type="email" id="input2-group2" name="input2-group2" class="form-control" placeholder="Email"> <span class="input-group-append"> <button type="button" class="btn btn-primary">Submit</button> </span> </div> </div> </div> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"> <span class="input-group-prepend"> <button type="button" class="btn btn-primary"><i class="fa fa-facebook"></i></button> </span> <input type="text" id="input3-group2" name="input3-group2" class="form-control" placeholder="Search"> <span class="input-group-append"> <button type="button" class="btn btn-primary"><i class="fa fa-twitter"></i></button> </span> </div> </div> </div> </form> </div> <div class="card-footer"> <button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button> <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button> </div> </div> </div> <div class="col-sm-4"> <div class="card"> <div class="card-header"> <strong>Dropdowns</strong> Groups </div> <div class="card-body"> <form action="" method="post" class="form-horizontal"> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"> <div class="input-group-prepend"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <input type="text" id="input1-group3" name="input1-group3" class="form-control" placeholder="Username"> </div> </div> </div> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"> <input type="email" id="input2-group3" name="input2-group3" class="form-control" placeholder="Email"> <div class="input-group-append"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span> </button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="input-group"> <div class="input-group-prepend"> <button type="button" class="btn btn-primary">Action</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">