@digitallyhappy/backstrap

<!DOCTYPE html>  <html lang="en"> <head> <base href="./../"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta name="description" content="Backstrap - Open Source Bootstrap 4 Admin Template on top of CoreUI"> <meta name="author" content="Cristian Tabacitu"> <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard,CoreUI"> <title>BackStrap - Free Bootstrap 4 Admin Template</title>  <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet"> <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet"> <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet"> <link href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" rel="stylesheet">  <link href="css/style.css" rel="stylesheet"> <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet"> </head> <body class="app aside-menu-fixed sidebar-lg-show"> <header class="app-header bg-light border-0 navbar"> <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto ml-3" type="button" data-toggle="sidebar-show"><span class="navbar-toggler-icon"></span></button><a class="navbar-brand" href="#"><b>Back</b><span>strap</span></a> <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show"><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 class="img-avatar" src="img/avatars/6.jpg" 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="dropdown-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 d-md-down-none" type="button" data-toggle="aside-menu-lg-show"><span class="navbar-toggler-icon"></span></button> <button class="navbar-toggler aside-menu-toggler d-lg-none mr-3" type="button" data-toggle="aside-menu-show"><span class="navbar-toggler-icon"></span></button> </header> <div class="app-body"> <div class="sidebar sidebar-pills bg-transparent"> <nav class="sidebar-nav"> <ul class="nav"> <li class="nav-item"><a class="nav-link" href="index.html"><i class="nav-icon la la-lg la-dashboard"></i> Dashboard</a></li> <li class="nav-title">Theme</li> <li class="nav-item"><a class="nav-link" href="colors.html"><i class="nav-icon la la-lg la-bullseye"></i> Colors</a></li> <li class="nav-item"><a class="nav-link" href="typography.html"><i class="nav-icon la la-lg la-pencil"></i> Typography</a></li> <li class="nav-title">Components</li> <li class="nav-item nav-dropdown"><a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-lg la-bank"></i> Base</a> <ul class="nav-dropdown-items"> <li class="nav-item"><a class="nav-link" href="base/breadcrumb.html"><i class="nav-icon la la-lg la-puzzle"></i> Breadcrumb</a></li> <li class="nav-item"><a class="nav-link" href="base/cards.html"><i class="nav-icon la la-lg la-puzzle"></i> Cards</a></li> <li class="nav-item"><a class="nav-link" href="base/carousel.html"><i class="nav-icon la la-lg la-puzzle"></i> Carousel</a></li> <li class="nav-item"><a class="nav-link" href="base/collapse.html"><i class="nav-icon la la-lg la-puzzle"></i> Collapse</a></li> <li class="nav-item"><a class="nav-link" href="base/forms.html"><i class="nav-icon la la-lg la-puzzle"></i> Forms</a></li> <li class="nav-item"><a class="nav-link" href="base/jumbotron.html"><i class="nav-icon la la-lg la-puzzle"></i> Jumbotron</a></li> <li class="nav-item"><a class="nav-link" href="base/list-group.html"><i class="nav-icon la la-lg la-puzzle"></i> List group</a></li> <li class="nav-item"><a class="nav-link" href="base/navs.html"><i class="nav-icon la la-lg la-puzzle"></i> Navs</a></li> <li class="nav-item"><a class="nav-link" href="base/pagination.html"><i class="nav-icon la la-lg la-puzzle"></i> Pagination</a></li> <li class="nav-item"><a class="nav-link" href="base/popovers.html"><i class="nav-icon la la-lg la-puzzle"></i> Popovers</a></li> <li class="nav-item"><a class="nav-link" href="base/progress.html"><i class="nav-icon la la-lg la-puzzle"></i> Progress</a></li> <li class="nav-item"><a class="nav-link" href="base/scrollspy.html"><i class="nav-icon la la-lg la-puzzle"></i> Scrollspy</a></li> <li class="nav-item"><a class="nav-link" href="base/switches.html"><i class="nav-icon la la-lg la-puzzle"></i> Switches</a></li> <li class="nav-item"><a class="nav-link" href="base/tables.html"><i class="nav-icon la la-lg la-puzzle"></i> Tables</a></li> <li class="nav-item"><a class="nav-link" href="base/tabs.html"><i class="nav-icon la la-lg la-puzzle"></i> Tabs</a></li> <li class="nav-item"><a class="nav-link" href="base/tooltips.html"><i class="nav-icon la la-lg la-puzzle"></i> Tooltips</a></li> </ul> </li> <li class="nav-item nav-dropdown"><a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-lg la-hand-pointer-o"></i> Buttons</a> <ul class="nav-dropdown-items"> <li class="nav-item"><a class="nav-link" href="buttons/buttons.html"><i class="nav-icon la la-lg la-cursor"></i> Buttons</a></li> <li class="nav-item"><a class="nav-link" href="buttons/button-group.html"><i class="nav-icon la la-lg la-cursor"></i> Buttons Group</a></li> <li class="nav-item"><a class="nav-link" href="buttons/dropdowns.html"><i class="nav-icon la la-lg la-cursor"></i> Dropdowns</a></li> <li class="nav-item"><a class="nav-link" href="buttons/brand-buttons.html"><i class="nav-icon la la-lg la-cursor"></i> Brand Buttons</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="charts.html"><i class="nav-icon la la-lg la-pie-chart"></i> Charts</a></li> <li class="nav-item nav-dropdown"><a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-lg la-star"></i> Icons</a> <ul class="nav-dropdown-items"> <li class="nav-item"><a class="nav-link" href="icons/line-awesome.html"> Line Awesome<span class="badge badge-primary">NEW</span></a></li> <li class="nav-item"><a class="nav-link" href="icons/coreui-icons.html"> CoreUI Icons</a></li> <li class="nav-item"><a class="nav-link" href="icons/flags.html"> Flags</a></li> <li class="nav-item"><a class="nav-link" href="icons/font-awesome.html"> Font Awesome</a></li> <li class="nav-item"><a class="nav-link" href="icons/simple-line-icons.html"> Simple Line Icons</a></li> </ul> </li> <li class="nav-item nav-dropdown"><a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-lg la-bell"></i> Notifications</a> <ul class="nav-dropdown-items"> <li class="nav-item"><a class="nav-link" href="notifications/alerts.html"><i class="nav-icon la la-lg la-bell"></i> Alerts</a></li> <li class="nav-item"><a class="nav-link" href="notifications/badge.html"><i class="nav-icon la la-lg la-bell"></i> Badge</a></li> <li class="nav-item"><a class="nav-link" href="notifications/modals.html"><i class="nav-icon la la-lg la-bell"></i> Modals</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="widgets.html"><i class="nav-icon la la-lg la-calculator"></i> Widgets</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="nav-icon la la-lg la-file"></i> Pages</a> <ul class="nav-dropdown-items"> <li class="nav-item"><a class="nav-link" href="login.html" target="_top"><i class="nav-icon la la-lg la-star"></i> Login</a></li> <li class="nav-item"><a class="nav-link" href="register.html" target="_top"><i class="nav-icon la la-lg la-star"></i> Register</a></li> <li class="nav-item"><a class="nav-link" href="404.html" target="_top"><i class="nav-icon la la-lg la-star"></i> Error 404</a></li> <li class="nav-item"><a class="nav-link" href="500.html" target="_top"><i class="nav-icon la la-lg la-star"></i> Error 500</a></li> </ul> </li> </ul> </nav> </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 class="form-control" id="name" type="text" 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 class="form-control" id="ccnumber" type="text" 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 class="form-control" id="cvv" type="text" 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 class="form-control" id="company" type="text" placeholder="Enter your company name"> </div> <div class="form-group"> <label for="vat">VAT</label> <input class="form-control" id="vat" type="text" placeholder="PL1234567890"> </div> <div class="form-group"> <label for="street">Street</label> <input class="form-control" id="street" type="text" placeholder="Enter street name"> </div> <div class="row"> <div class="form-group col-sm-8"> <label for="city">City</label> <input class="form-control" id="city" type="text" placeholder="Enter your city"> </div> <div class="form-group col-sm-4"> <label for="postal-code">Postal Code</label> <input class="form-control" id="postal-code" type="text" placeholder="Postal Code"> </div> </div>  <div class="form-group"> <label for="country">Country</label> <input class="form-control" id="country" type="text" 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 class="form-horizontal" action="" method="post" enctype="multipart/form-data"> <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 class="form-control" id="text-input" type="text" name="text-input" 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 class="form-control" id="email-input" type="email" name="email-input" 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 class="form-control" id="password-input" type="password" name="password-input" 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="date-input">Date Input</label> <div class="col-md-9"> <input class="form-control" id="date-input" type="date" name="date-input" placeholder="date"><span class="help-block">Please enter a valid date</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 class="form-control" id="disabled-input" type="text" name="disabled-input" 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 class="form-control" id="textarea-input" name="textarea-input" rows="9" 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 class="form-control" id="select1" name="select1"> <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 class="form-control form-control-lg" id="select2" name="select2"> <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 class="form-control form-control-sm" id="select3" name="select3"> <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 class="form-control" id="disabledSelect" 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 class="form-control" id="multiple-select" name="multiple-select" 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" id="radio1" type="radio" value="radio1" name="radios"> <label class="form-check-label" for="radio1">Option 1</label> </div> <div class="form-check"> <input class="form-check-input" id="radio2" type="radio" value="radio2" name="radios"> <label class="form-check-label" for="radio2">Option 2</label> </div> <div class="form-check"> <input class="form-check-input" id="radio3" type="radio" value="radio2" 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" id="inline-radio1" type="radio" 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" id="inline-radio2" type="radio" 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" id="inline-radio3" type="radio" 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" id="check1" type="checkbox" value=""> <label class="form-check-label" for="check1">Option 1</label> </div> <div class="form-check checkbox"> <input class="form-check-input" id="check2" type="checkbox" value=""> <label class="form-check-label" for="check2">Option 2</label> </div> <div class="form-check checkbox"> <input class="form-check-input" id="check3" type="checkbox" value=""> <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" id="inline-checkbox1" type="checkbox" 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" id="inline-checkbox2" type="checkbox" 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" id="inline-checkbox3" type="checkbox" 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 id="file-input" type="file" 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 id="file-multiple-input" type="file" name="file-multiple-input" multiple=""> </div> </div> </form> </div> <div class="card-footer"> <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-dot-circle-o"></i> Submit</button> <button class="btn btn-sm btn-danger" type="reset"><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 class="form-inline" action="" method="post"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input class="form-control" id="exampleInputName2" type="text" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input class="form-control" id="exampleInputEmail2" type="email" placeholder="jane.doe@example.com"> </div> </form> </div> <div class="card-footer"> <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-dot-circle-o"></i> Submit</button> <button class="btn btn-sm btn-danger" type="reset"><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 class="form-horizontal" action="" method="post"> <div class="form-group row"> <label class="col-md-3 col-form-label" for="hf-email">Email</label> <div class="col-md-9"> <input class="form-control" id="hf-email" type="email" name="hf-email" 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 class="form-control" id="hf-password" type="password" name="hf-password" placeholder="Enter Password.."><span class="help-block">Please enter your password</span> </div> </div> </form> </div> <div class="card-footer"> <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-dot-circle-o"></i> Submit</button> <button class="btn btn-sm btn-danger" type="reset"><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 class="form-control" id="nf-email" type="email" name="nf-email" placeholder="Enter Email.."><span class="help-block">Please enter your email</span> </div> <div class="form-group"> <label for="nf-password">Password</label> <input class="form-control" id="nf-password" type="password" name="nf-password" placeholder="Enter Password.."><span class="help-block">Please enter your password</span> </div> </form> </div> <div class="card-footer"> <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-dot-circle-o"></i> Submit</button> <button class="btn btn-sm btn-danger" type="reset"><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 class="form-horizontal" action="" method="post"> <div class="form-group row"> <div class="col-sm-3"> <input class="form-control" type="text" placeholder=".col-sm-3"> </div> </div> <div class="form-group row"> <div class="col-sm-4"> <input class="form-control" type="text" placeholder=".col-sm-4"> </div> </div> <div class="form-group row"> <div class="col-sm-5"> <input class="form-control" type="text" placeholder=".col-sm-5"> </div> </div> <div class="form-group row"> <div class="col-sm-6"> <input class="form-control" type="text" placeholder=".col-sm-6"> </div> </div> <div class="form-group row"> <div class="col-sm-7"> <input class="form-control" type="text" placeholder=".col-sm-7"> </div> </div> <div class="form-group row"> <div class="col-sm-8"> <input class="form-control" type="text" placeholder=".col-sm-8"> </div> </div> <div class="form-group row"> <div class="col-sm-9"> <input class="form-control" type="text" placeholder=".col-sm-9"> </div> </div> <div class="form-group row"> <div class="col-sm-10"> <input class="form-control" type="text" placeholder=".col-sm-10"> </div> </div> <div class="form-group row"> <div class="col-sm-11"> <input class="form-control" type="text" placeholder=".col-sm-11"> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <input class="form-control" type="text" placeholder=".col-sm-12"> </div> </div> </form> </div> <div class="card-footer"> <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-user"></i> Login</button> <button class="btn btn-sm btn-danger" type="reset"><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 class="form-horizontal" action="" method="post"> <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 class="form-control form-control-sm" id="input-small" type="text" name="input-small" 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 class="form-control" id="input-normal" type="text" name="input-normal" 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 class="form-control form-control-lg" id="input-large" type="text" name="input-large" placeholder=".form-control-lg"> </div> </div> </form> </div> <div class="card-footer"> <button class="btn btn-sm btn-primary" type="submit"><i class="fa fa-dot-circle-o"></i> Submit</button> <button class="btn btn-sm btn-danger" type="reset"><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"> <div class="form-group"> <label class="form-col-form-label" for="inputSuccess1">Input with success</label> <input class="form-control is-valid" id="inputSuccess1" type="text"> </div> <div class="form-group"> <label class="form-col-form-label" for="inputError1">Input with error</label> <input class="form-control is-invalid" id="inputError1" type="text"> <div class="invalid-feedback">Please provide a valid informations.</div> </div> </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 with success</label> <input class="form-control is-valid" id="inputSuccess2" type="text"> </div> <div class="form-group"> <label class="form-col-form-label" for="inputError2">Input required</label> <input class="form-control is-invalid" id="inputError2" type="text" 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 class="form-horizontal" action="" method="post"> <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 class="form-control" id="input1-group1" type="text" name="input1-group1" placeholder="Username"> </div> </div> </div> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"> <input class="form-control" id="input2-group1" type="email" name="input2-group1" 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 class="form-control" id="input3-group1" type="text" name="input3-group1" placeholder=".."> <div class="input-group-append"><span class="input-group-text">.00</span></div> </div> </div> </div> </form> </div> <div class="card-footer"> <button class="btn btn-sm btn-success" type="submit"><i class="fa fa-dot-circle-o"></i> Submit</button> <button class="btn btn-sm btn-danger" type="reset"><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 class="form-horizontal" action="" method="post"> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"><span class="input-group-prepend"> <button class="btn btn-primary" type="button"><i class="fa fa-search"></i> Search</button></span> <input class="form-control" id="input1-group2" type="text" name="input1-group2" placeholder="Username"> </div> </div> </div> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"> <input class="form-control" id="input2-group2" type="email" name="input2-group2" placeholder="Email"><span class="input-group-append"> <button class="btn btn-primary" type="button">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 class="btn btn-primary" type="button"><i class="fa fa-facebook"></i></button></span> <input class="form-control" id="input3-group2" type="text" name="input3-group2" placeholder="Search"><span class="input-group-append"> <button class="btn btn-primary" type="button"><i class="fa fa-twitter"></i></button></span> </div> </div> </div> </form> </div> <div class="card-footer"> <button class="btn btn-sm btn-success" type="submit"><i class="fa fa-dot-circle-o"></i> Submit</button> <button class="btn btn-sm btn-danger" type="reset"><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 class="form-horizontal" action="" method="post"> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"> <div class="input-group-prepend"> <button class="btn btn-primary dropdown-toggle" type="button" 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 class="dropdown-divider" role="separator"></div><a class="dropdown-item" href="#">Separated link</a> </div> </div> <input class="form-control" id="input1-group3" type="text" name="input1-group3" placeholder="Username"> </div> </div> </div> <div class="form-group row"> <div class="col-md-12"> <div class="input-group"> <input class="form-control" id="input2-group3" type="email" name="input2-group3" placeholder="Email"> <div class="input-group-append"> <button class="btn btn-primary dropdown-toggle" type="button" 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 class="dropdown-divider" role="separator"></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 class="btn btn-primary" type="button">Action</button> <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown"><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 class="dropdown-divider" role="separator"></div><a class="dropdown-item" href="#">Separated link</a> </div> </div> <input class="form-control" id="input3-group3" type="text" name="input3-group3" placeholder=".."> <div class="input-group-append"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><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 class="dropdown-divider" role="separator"></div><a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> </div> </div> </form> </div> <div class="card-footer"> <button class="btn btn-sm btn-success" type="submit"><i class="fa fa-dot-circle-o"></i> Submit</button> <button class="btn btn-sm btn-danger" type="reset"><i class="fa fa-ban"></i> Reset</button>