"Bootstrap Form + fixed Navbar"
Bootstrap 4.1.1 Snippet by ravi7284007

<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://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#"><img src="https://img.icons8.com/cute-clipart/64/000000/orange.png"/></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="btn btn-save " href="#">Disabled</a> </li> </ul> </div> </div> </nav> <section class="main__box"> <div class="container"> <div class="row"> <div class="col-md-6"> <form> <div class="form-group mb-4"> <label for="primaryEmail">Primary Email</label> <input type="email" class="form-control" id="primaryEmail" aria-describedby="primaryEmail" placeholder="Enter Your Email"> </div> <div class="form-group mb-4"> <label for="AccountAddress">Address</label> <input type="text" class="form-control" id="AccountAddress" value="228 Evergreen Ave"> </div> <div class="form-group mb-4"> <input type="text" class="form-control" id="AccountAddress" value="Brooklyn"> </div> <div class="row mb-4"> <div class="col-md-6"> <div class="form-group"> <label>Dropdown 1</label> <select class="form-select" aria-label="Default select example"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>Dropdown 2</label> <select class="form-select" aria-label="Default select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> </div> </div> <div class="form-group"> <label>Message</label> <textarea type="text" id="message" name="message" rows="5" class="form-control md-textarea"></textarea> </div> <div class=" mt-4"> <button type="button" class="btn btn-save ">Save Changes</button> <button type="button" class="btn btn-save btn-save-border" data-dismiss="modal">Cancel</button> </div> </form> </div> <div class="col-md-6"> <div class="output__box"> <h4>Output Here</h4> <div class="output__content p-3"> <code class="d-block"> Hello World ! <br> <br> var myDefaultAllowList = bootstrap.Tooltip.Default.allowList <br> <br> // To allow table elements myDefaultAllowList.table = [] <br> <br> // To allow td elements and data-bs-option attributes on td elements myDefaultAllowList.td = ['data-bs-option'] <br> <br> // You can push your custom regex to validate your attributes. // Be careful about your regular expressions being too lax var myCustomRegex = /^data-my-app-[\w-]+/ myDefaultAllowList['*'].push(myCustomRegex) <br><br> var yourTooltipEl = document.getElementById('yourTooltip') var tooltip = new bootstrap.Tooltip(yourTooltipEl, { sanitizeFn: function (content) { return DOMPurify.sanitize(content) } }) <br> <br> var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i var DefaultAllowlist = { // Global attributes allowed on any supplied element below. '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN], a: ['target', 'href', 'title', 'rel'], area: [], b: [], br: [], col: [], code: [], div: [], em: [], hr: [], h1: [], h2: [], h3: [], h4: [], h5: [], h6: [], i: [], img: ['src', 'srcset', 'alt', 'title', 'width', 'height'], li: [], ol: [], p: [], pre: [], s: [], small: [], span: [], sub: [], sup: [], strong: [], u: [], ul: [] } </code> </div> </div> </div> </div> </div> </section> <footer> <div class="container"> <p><img src="https://img.icons8.com/cute-clipart/64/000000/orange.png" class="order-md-2" alt=""> Copyright © 2021 stc. All rights reserved </p> </div> </footer>
* { -webkit-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; padding: 0; font-size: 16px; font-family: 'Poppins', sans-serif; } img { max-width: 100%; display: inline-block; } .navbar-brand img { width: 50px; } .navbar { -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.178); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.178); position: -webkit-sticky; position: sticky; top: 0; z-index: 99; } .navbar .nav-item { margin-left: 10px; } .navbar .nav-item .btn-save { line-height: 2; } .main__box { margin: 30px 0; } .main__box form label { color: #121416; font-size: 14px; font-weight: 400; line-height: 19px; letter-spacing: 0.1166667px; margin-bottom: 10px; } .main__box form textarea, .main__box form .form-select, .main__box form input.form-control, .main__box form textarea.form-control, .main__box form select.form-control { font-size: 14px; } .main__box form .form-select{ width:100%; border:1px solid #ccc; } .main__box form textarea:focus, .main__box form .form-select:focus, .main__box form input.form-control:focus, .main__box form textarea.form-control:focus, .main__box form select.form-control:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; } .main__box form .form-select, .main__box form input { height: 45px; border-radius: 0; } .btn-save { border: 1px solid transparent; min-width: 114px; height: 44px; text-transform: uppercase; border-radius: 0; background-color: #502c84; color: #fff; font-size: 14px; font-weight: 400; padding: 5px 20px; line-height: 19px; text-transform: uppercase; letter-spacing: 1.3125px; } .btn-save:hover { background-color: #2e1255; color: #fff; } .btn-save-border { border-color: #111; background-color: #fff; margin-right: 10px; color: #000; } .btn-save-border:hover { background-color: #502c84; color: #fff; border-color: #502c84; } footer { padding: 15px 0; background-color: #390065; } footer img{ width:50px; } footer p { color: #fff; font-size: 12px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .output__box { background-color: #f6f6f6; max-height: 100vh; min-height: 500px; overflow-y: scroll; position: relative; border: 1px solid #ccc; } .output__box h4 { font-size: 14px; color: #999; border-bottom: 1px solid #ccc; padding: 15px; padding-bottom: 10px; position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background-color: #f6f6f6; }

Related: See More


Questions / Comments: