Simple Login Page using Bootstrap

Below is a example of a Simple minimal User Login page designed using Twitter's bootstrap.

We have a user login id and password filed with a Login Button

The container that holds these elements is aligned at the middle of the page.

<div class="container">
    <div class="row">
        <div class="form_bg">
                 <h2 class="text-center">Login Page</h2>

                <div class="form-group">
                    <input type="email" class="form-control" id="userid" placeholder="User id">
                <div class="form-group">
                    <input type="password" class="form-control" id="pwd" placeholder="Password">
                <div class="align-center">
                    <button type="submit" class="btn btn-default" id="login">Login</button>
CSS Code
body {
.form_bg {
    position: absolute;
    border:1px solid #fff;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 320px;
    height: 280px;
.align-center {
Output :
Try Out Code2care Dev Tools:


Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and software developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include learnings, tutorials, trouble-shooting steps, video tutorials, code snippets, how-to, blogs, articles, etc.

🎉 We are celebrating the 10th years of Code2care! Thank you for all your support!

We strongly support Gender Equality & Diversity.