<! DOCTYPE html>
<html>
<title>
RESPONSIVE WEB DESIGN WITH BOOTSTRAP
</title>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
</style>
</head>
<body>
<div class="container " >
<div class="row">
<div class="col-lg-2">
<label >OUR FAKE ADDRESS </label>
<address >
<a href="mailto:ABC@gmail.com">SHARMAJI</a>.<br>
<hr/>
3/18 ABCDEF STREET<br>
ABCEDEF,ABE<br>
ABE--,ABC--<br>
2216
<hr/>
Mobile: 0000000
</address>
</div>
<form class="form-horizontal col-lg-8" >
<div class="row">
<h4 class="col-lg-8" style="text-align:center; font-weight:bold;">CONTACT US</h4><br>
</hr>
</div>
<div class="row form-group">
<label class="col-lg-2">First name:</label>
<input type="text" name="firstname" class="col-lg-6">
</div>
<div class="row form-group">
<label class="col-lg-2">Last name:</label>
<input type="text" name="lastname" class="col-lg-6 ">
</div>
<div class="row form-group">
<label class="col-lg-2">Gender:</label>
<input type="radio" class="col-lg-1"><label class="col-lg-2">Male</label>
<input type="radio" class="col-lg-1" ><label class="col-lg-2">Female</label>
</div>
<div class="row form-group">
<label class="col-lg-2">Address</label>
<input type="textarea" class="col-lg-6">
</div>
<div class="row form-group">
<label class="col-lg-2">Interests</label>
<select class="col-lg-6">
<option>Software</option>
<option>Hardware</option>
<option>Networking</option>
</select>
</div>
<div class="row form-group">
<button class="col-lg-2 col-lg-offset-2 btn btn-success">Submit</button>
</div>
</form>
<div class="col-lg-2">
<label >OUR FAKE ADDRESS </label>
<address >
<a href="mailto:ABC@gmail.com">SHARMAJI</a>.<br>
<hr/>
3/18 ABCDEF STREET<br>
ABCEDEF,ABE<br>
ABE--,ABC--<br>
2216
<hr/>
Mobile: 0000000
</address>
</div>
</div>
</div>
</body>
</html>
MAIN IDEAS:
1) USE OF BOOTSTRAP-12 GRID COLUMN - ADDRESS- COLUMN-2 , FORM-COLUMN-8 AND ADDRESS -COL-2
2)WRAP CONTROLS IN ROW AND FORM-GROUP
3) USE LABEL-COL-2 AND INPUT -COL-6
OUTPUT:
No comments:
Post a Comment