In this tutorial, I will share how to create bootstrap inline form login form with an example. If you want to create a login form in header area or footer in one line, then this tutorial will help to create the inline login form.
Let’s create an inline login form using bootstrap. First, create a login.html file and for the inline login form, make sure you have included the below external CSS & JS files before head tag closed.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css
copy the below HTML code and paste it into the body area or where you want to display the inline login form.
<h2>Bootstrap inline login form </h2>
<form class="form-inline" action="/action_page.php">
<label class="sr-only" for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password"
<label><input type="checkbox" name="remember"> Remember me</label>
<button type="submit" class="btn btn-default">Submit</button>
After adding the above code save file and open in web browser. Your form will look like below screenshot.
I hope this tutorial helps you, if you have any questions, then feel free to put your comments in below comment section. Do you like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn cool tutorials.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
Tags: bootstrap form validation, Bootstrap Forms by Example, bootstrap login form, Bootstrap Mixed form horizontal + inline snippet, bootstrap registration form example, Bootstrap Vertical, Creating Simple Login Form Template using Bootstrap, Form inline inside a form horizontal in twitter bootstrap, Horizontal and Inline Form Example, How To Create A Login Form In Bootstrap, How to Create Form Layouts with Bootstrap 4