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">
<form>
<h2 class="text-center">Login Page</h2>
<br/>
<div class="form-group">
<input type="email" class="form-control" id="userid" placeholder="User id">
</div>
<div class="form-group">
<input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
<br/>
<div class="align-center">
<button type="submit" class="btn btn-default" id="login">Login</button>
</div>
</form>
</div>
</div>
</div>
CSS Code
body {
background:#333;
}
.form_bg {
background-color:#eee;
color:#666;
padding:20px;
border-radius:10px;
position: absolute;
border:1px solid #fff;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 320px;
height: 280px;
}
.align-center {
text-align:center;
}
Output :
More Posts related to Bootstrap,
- How to disable button in Bootstrap
- Bootstrap tooltip not working
- Bootstrap Button Colors Classes
- Rounded Images in Bootstrap framework
- Right Align Text in Bootstrap framework
- How to add hint text in bootstrap input text field and text area
- Create Bootstrap carousel slider with Text
- Bootstrap Nav Menu Dropdown on hover
- [Solved] Bootstrap tooltip not working
- Align left align text in Bootstrap
More Posts:
- Force android app to run in Landscape mode programatically - Android
- Type R is already defined error : Android Error - Android
- Call PHP function on Button click using jquery ajax - PHP
- Can't Run SDK Manager find_java.bat issue - Android
- 10 FTP SFTP Clients and Alternatives - FTP
- auth_client_using_bad_version_title : Error Android Lint - Android
- Delete file using PHP code : unlink() - PHP
- Stop android adb service from command prompt or terminal - Android
- How to add Date and Time to Windows Notepad File - NotepadPlusPlus
- Mac OS X Taking Screen Capture using Terminal - Mac-OS-X
- Create SharePoint Site Collection using PowerShell New-SPSite - SharePoint
- SharePoint workflow Canceled - Coercion Failed: Unable to transform the input lookup data into the requested type - SharePoint
- Android : Prevent App for rotation landscape or portrait - Android
- MySQL 1005 Error : SQLSTATE: HY000 (ER_CANT_CREATE_TABLE) Message: Can't create table '%s' (errno: 150) - MySQL
- How to change Android EditText Cursor Color - Android