So here is the second tutorial of twitter bootstrap tutorial series, we will be covering a few interesting things in this tutorial. First of all we will make a website containing an image as a background and a login form over it. Believe me this is going to be very interesting. So, let’s get going.
For easy understanding of things I will be using a couple of snapshots so you can understand everything more clearly.
First write following code in the body tags of the previous section, make sure you remove everything which was already in the body tags.
<body background=”pic.jpg”> <form class=”well”> </form> </body>
NOTE: Make sure you are using good image of minimum resolution 1366X768 for background.
You can see we have defined a class attribute in the form tag with the value “Well’ this gives a nice background to your forms. Yes, it is all about bootstrap.
Since we don’t want to make a form covering the entire page, so we can reduce the width of the form with the class attribute with the value “span6”. This reduces the width of our form and covers 6 columns grid on our webpage. To further reduce the width we can write span4 or any value between 1 and 12.
Now your website and code looks like this:
<body background=”pic.jpg”> <form class=”well span6”> </form> </body>
Remember that in the image above the form appears in front of the building so I want it on the right hand side. I am writing some CSS code and hoping you already know this thing.
Add this code to your header just below the <link> and <script> tags.
<style>
.myClass
{
Position: relative;
Left:-600px;
Top:-50px;
}
</style>
You can see that form is now looks at the right position.
Now we are going to include input fields:
- A text box
- A password box
- A submit button.
- A cancel button.
What will you do to include a text box in your HTML file? You will right the following thing.
UserName:<input type=”text” name=”user”/>
You can also wrap up UserName: under label tags.
We are going to include bootstrap span class to set the width of this input field.
Now your code should look like this after adding password field:
<label>UserName:</label><input type=”text” name=”user” class=”span3”/> <label>Password:</label><input type=”password” name=”pass” class=”span3”/>
Woops..! Your form looks amazing isn’t it?
Now it is time to add buttons to form. Write the following code.
<input type="submit" class="btn btn-primary" value="Submit" /> <input type="submit" name="cancel" value="Cancel" />
You can see the difference between two buttons which is all because of CSS Twitter Bootstrap.
There is another amazing attribute for text fields which gives user a hint what to type in the field. Let’s get back to text fields and add some more bootstrap css.
placeholder=”Type Password…”
This is the attribute you are going to include in the opening tag of input text/password fields. After adding this attribute the code inside the form tags look something like this.
<label>Username:</label> <input type="text" class="span3" align="middle" placeholder="Type UserName…"/>
This is the end of this part. We are not going to disappoint you, below are the image snapshot and followed by it is the whole code of the website we have so far.
Code:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<title>
Usama Noman | Profile
</title>
<link type="text/css" rel="stylesheet" href="bootstrap.css"/>
<script type="text/javascript" src="bootstrap.js"></script>
<style>
.myClass
{
position:relative;
left:600px;
top:50px ;
}
</style>
</head>
<body background="new.jpg" style="background-repeat: no-repeat" >
<form class="well span6 myClass" >
<h3>Login:</h3>
<label>Username:</label>
<input type="text" class="span3" align="middle" placeholder="Type UserName…"/></br
<label>Password:</label></br>
<input type="password" class="span3" align="middle" placeholder="Type Password…"/></br>
<input type="submit" class="btn btn-primary" value="Submit" align="right"/>
<input type="Submit" class="btn" name="cancel" value="Cancel"align="left"/>
</form>
<!--<div class="myClass2" >
<img src="pic2.jpg"/>
</div>-->
</body>
</html>
Author Description
