Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Untitled"
Bootstrap 4.1.1 Snippet by
RizwanAkram
4.1.1
Preview
HTML
CSS
View Full Screen
Fork
Fork this
829
0 Fav
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 ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"><i class="fa-regular fa-pen-to-square mr-2"></i>Update Address</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore</p> <div class="form-group"> <label>Country</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>City</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control"> </div> <div class="form-group"> <label>Code</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>Address 1</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>Address 2</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>Country</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>12312</label> <input type="text" class="form-control"> </div> <div class="form-group select-option"> <label>Country</label> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Update</button> </div> </div> </div> </div> <div class="wizard-setup"> <div class="banner" style="background: url('https://9mmwallpapers.com/wp-content/uploads/Abstract-Laptop-Wallpaper.jpg') center/cover no-repeat;"> <div class="title">RMA Request</div> </div> <div class="row justify-content-center"> <div class="col-md-10 col-lg-8"> <div class="h-timeline"> <ul class="nav nav-tabs nav-justified"> <li class="nav-item"> <a class="nav-link active completed" data-toggle="tab" href="#tab-1"> <div class="icon"> <i class="fas fa-check"></i> </div> <div class="heading">Step 1</div> <div class="description">RMA Request</div> </a> </li> <li class="nav-item"> <a class="nav-link completed" data-toggle="tab" href="#tab-2"> <div class="icon"> <i class="fas fa-check"></i> </div> <div class="heading">Step 2</div> <div class="description">Select Items for RMA</div> </a> </li> <li class="nav-item"> <a class="nav-link completed" data-toggle="tab" href="#tab-3"> <div class="icon"> <i class="fas fa-check"></i> </div> <div class="heading">Step 3</div> <div class="description">Review & Confirm</div> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab-4"> <div class="icon"> <i class="fas fa-check"></i> </div> <div class="heading">Step 4</div> <div class="description">Print Label & Ship</div> </a> </li> </ul> </div> <div class="tab-content"> <div id="tab-1" class="tab-pane active"> <div class="form-row"> <div class="col"> <input type="text" class="form-control" placeholder="Search"> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary btn-block">Search</button> </div> </div> <div class="row mt-5"> <div class="col-auto mx-auto"> <button type="submit" class="btn btn-secondary btn-block">Next</button> </div> </div> </div> <div id="tab-3" class="tab-pane fade"> <div class="text-center"> <h1>Thankyou!</h1> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</p> <img src="https://svgshare.com/i/hSY.svg" class="mt-5 img-fluid d-block mx-auto" style="max-width: 300px;"> </div> </div> <div id="tab-4" class="tab-pane fade"> <div class="alert-page d-flex align-items-center justify-content-center text-center h-100"> <div class="alert-page-holder"> <img src="https://svgshare.com/i/hRs.svg" class="mt-5 img-fluid d-block mx-auto" style="max-width: 300px;" alt="Alert Image"> <h1 class="mt-5 my-3">Oops!</h1> <p class="mb-0">Sorry, Nothing found here, See later...</p> </div> </div> </div> <div id="tab-2" class="tab-pane fade"> <div class="bg-white mb-4 p-4"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p> <hr> <div class="row align-items-center"> <div class="col"> <div class="form-row"> <div class="col-auto font-weight-bold">Order #:</div> <div class="col-auto">PSS001</div> <div class="col-auto font-weight-bold ml-5">Order Date:</div> <div class="col-auto">20/04/2022</div> </div> </div> <div class="col-auto"> <div class="font-weight-bold"> <a href="" class="mr-2" data-toggle="modal" data-target="#exampleModal"> <i class="fa-regular fa-pen-to-square"></i> </a> Shipping Address </div> <div>City ABC, 723324</div> <div>Parkor, 1223</div> </div> </div> <hr> <p class="text-uppercase">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p> </div> <div class="table-responsive bg-white mb-4 px-3"> <table class="table"> <thead> <tr> <th scope="col" width="30"> <div class="custom-control custom-checkbox mt-n4"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing1"> <label class="custom-control-label" for="customControlAutosizing1"></label> </div> </th> <th scope="col">First</th> <th scope="col" width="120">Last</th> <th scope="col" width="120">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing2"> <label class="custom-control-label" for="customControlAutosizing2"></label> </div> </th> <td> <div class="form-row"> <div class="col-auto"> <img src="https://store-images.s-microsoft.com/image/apps.40607.14416131676512756.84314783-1c86-4403-b991-2e1da8525703.2e8ad7b8-ab24-46a8-bee7-57378f3fdbb5" class="img-fluid" alt=""> </div> <div class="col"> <div class="font-weight-bold">Jhon Doe</div> <div class="small"><span class="font-weight-bold">SKU:</span> <span class="text-muted">PSS001</span></DIV> <div class="font-weight-bold text-danger small"> <i class="fa-solid fa-triangle-exclamation"></i> Out of Warranty </div> </div> </div> </td> <td> <div class="select-option"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </td> <td> <div class="badge badge-danger">Damaged</div> </td> </tr> <tr> <th scope="row"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing3"> <label class="custom-control-label" for="customControlAutosizing3"></label> </div> </th> <td> <div class="form-row"> <div class="col-auto"> <img src="https://store-images.s-microsoft.com/image/apps.40607.14416131676512756.84314783-1c86-4403-b991-2e1da8525703.2e8ad7b8-ab24-46a8-bee7-57378f3fdbb5" class="img-fluid" alt=""> </div> <div class="col"> <div class="font-weight-bold">Jhon Doe</div> <div class="small"><span class="font-weight-bold">SKU:</span> <span class="text-muted">PSS001</span></DIV> <div class="font-weight-bold text-danger small"> <i class="fa-solid fa-triangle-exclamation"></i> Out of Warranty </div> </div> </div> </td> <td> <div class="select-option"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </td> <td> <div class="badge badge-danger">Damaged</div> </td> </tr> <tr> <th scope="row"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing4"> <label class="custom-control-label" for="customControlAutosizing4"></label> </div> </th> <td> <div class="form-row"> <div class="col-auto"> <img src="https://store-images.s-microsoft.com/image/apps.40607.14416131676512756.84314783-1c86-4403-b991-2e1da8525703.2e8ad7b8-ab24-46a8-bee7-57378f3fdbb5" class="img-fluid" alt=""> </div> <div class="col"> <div class="font-weight-bold">Jhon Doe</div> <div class="small"><span class="font-weight-bold">SKU:</span> <span class="text-muted">PSS001</span></DIV> <div class="font-weight-bold text-danger small"> <i class="fa-solid fa-triangle-exclamation"></i> Out of Warranty </div> </div> </div> </td> <td> <div class="select-option"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </td> <td> <div class="badge badge-success">Damaged</div> </td> </tr> </tbody> </table> </div> <div class="bg-white p-4"> <div class="custom-control custom-radio mb-4"> <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"> <label class="custom-control-label pl-2" for="customRadio1">Toggle this custom radio</label> </div> <div class="custom-control custom-radio mb-4"> <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"> <label class="custom-control-label pl-2" for="customRadio2">Or toggle this other custom radio</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing5"> <label class="custom-control-label pl-2" for="customControlAutosizing5">Or toggle this other custom Checkbox</label> </div> </div> </div> </div> </div> </div> </div>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap'); @import url('https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css'); :root { --primary: green; --secondary: black; --light: #f7f8f9; --border-color: #f2f2f2; --text-heading: #000; --text-muted: #9499a1; --font-base: 13px; --strong: 600; } .btn-primary { color: white; border-color: var(--primary)!important; background-color: var(--primary)!important; } .custom-control-label {font-weight: var(--strong);} .custom-control-label::before, .custom-control-label::after { width: 15px; height: 15px; } .custom-control-input:checked ~ .custom-control-label::before { color: white; border-color: var(--primary)!important; background-color: var(--primary)!important; } .custom-control-input:focus~.custom-control-label::before {box-shadow: none;} html,body { font-size: var(--font-base); font-family: 'Poppins', sans-serif; } ul,ol { padding: 0; margin: 0; } a,a:hover,a:focus,a:active {color: var(--primary);} .table th { border-top: 0; padding: 15px 5px; } .table td,.table th {border-color: var(--border-color)!important;} .badge {padding: 5px;} /*Wizard Setup*/ .wizard-setup { padding: 20px; border: 2px dashed var(--border-color); } .wizard-setup .tab-content { padding: 50px; margin-top: 50px; background: var(--light); } .wizard-setup .form-control, .wizard-setup .btn { font-size: var(--font-base); height: 40px; } .wizard-setup .form-control { padding-left: 15px; padding-right: 15px; border-color: var(--border-color); } .wizard-setup .btn { width: 100px; } .wizard-setup .table img { width: 30px; height: 30px; object-fit: cover; border-radius: 5px; } /*Banner*/ .banner { height: 200px; display: flex; position: relative; margin-bottom: 50px; align-items: center; justify-content: center; } .banner::before { content: ''; width: 100%; height: 100%; left: 0; right: 0; position: absolute; background: rgb(0 0 0 / 50%); } .banner .title { color: white; font-size: 42px; position: relative; } /*Horizontal Timeline*/ .h-timeline ul li::before { content: ''; width: 100%; height: 5px; top: 35px; left: 55%; right: 0; background: var(--border-color); display: block; position: absolute; } .h-timeline ul li:last-child::before {width: 0;} .h-timeline li { position: relative; list-style: none; } .h-timeline li .icon { width: 60px; height: 60px; z-index: 9; font-size: 13px; color: var(--text-muted); margin: auto; border-radius: 50px; display: flex; align-items: center; position: relative; justify-content: center; background: var(--light); box-shadow: inset 0 0 0 10px rgb(255 255 255 / 15%); } .h-timeline li a.active .icon, .h-timeline li a.completed .icon { color: white; background: var(--primary); } .h-timeline .nav-tabs, .h-timeline .nav-tabs li a, .h-timeline .nav-tabs li a:hover, .h-timeline .nav-tabs li a.active { border: 0; background: transparent; border-color: var(--border-color); } .h-timeline li .heading { margin-top: 5px; color: var(--text-heading); font-weight: var(--strong); } .h-timeline li .description { color: var(--text-muted); }
Related:
See More
Free Template
Paper Kit
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76
