Navbar login
How do I make an navbar login?
Using bootstrap and few modifications.. What is a navbar login? How do you make a navbar login? This script and codes were developed by Takane Ichinose on 10 November 2022, Thursday.
Navbar login - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Navbar login</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container top-container"> <div class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-bar" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Example</a> </div> <div class="collapse navbar-collapse" id="nav-bar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <span class="input-group-btn"> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search "></span></button> </span> </div> </div> </form> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Login <span class="caret"></span></a> <ul id="nav_login" class="dropdown-menu login-nav-dropdown"> <li> <div class="container-fluid"> <div class="row"> <div class="col-xs-12"> <strong>Login with</strong> </div> <div class="col-xs-12"> <button type="button" class="btn btn-primary">Facebook</button> <button type="button" class="btn btn-info">Twitter</button> </div> <div class="col-xs-12 separator"> Or login here </div> <div class="col-xs-12"> <form> <div class="form-group"> <label for="txt_email">Email</label> <div class="input-group"> <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div> <input type="email" class="form-control" id="txt_email" placeholder="Email"> </div> </div> <div class="form-group"> <label for="txt_password">Password</label> <div class="input-group"> <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div> <input type="password" class="form-control" id="txt_password" placeholder="Password"> </div> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <div class="form-group"> <button type="button" class="btn btn-primary btn-block">Sign in</button> </div> <div class="form-group"> <a href="#">Forgot password</a> </div> </form> </div> </div> </div> </li> </ul> </li> </ul> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>
Navbar login - Script Codes CSS Codes
body { background: #54a7ff;
}
.top-container { margin-top: 25px;
}
.login-nav-dropdown { background: white !important; width: 275px; padding-top: 15px; padding-bottom: 15px;
}
.separator { margin-top: 10px; margin-bottom: 10px;
}
Developer | Takane Ichinose |
Username | takaneichinose |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 2,402 Kb |
Views | 50,600 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CRUD Table with JSON | 3,486 Kb |
Bootstrap Messaging | 3,745 Kb |
Flat-style drawer Contact Me | 2,441 Kb |
Spinning star | 1,895 Kb |
Parallax scrolling | 8,951 Kb |
Cow drawing | 5,437 Kb |
Mario | 3,902 Kb |
Flickering Fluorescent Lamp | 2,157 Kb |
Bootstrap dialog box | 2,696 Kb |
Pure CSS Off-Canvas with Bootstrap | 2,517 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Project_one | MOHIM | 9,592 Kb |
Em Test | Rodesco | 1,784 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
Day 1 - Portfolio | Chpecson | 3,532 Kb |
React TODO | Enieste | 3,320 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!