Skip to content

Commit 4450cb2

Browse files
rvsprvsp
authored
Update 007-bootstrap.html
1 parent 576cf45 commit 4450cb2

File tree

1 file changed

+58
-72
lines changed

1 file changed

+58
-72
lines changed

‎007-bootstrap.html

Lines changed: 58 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,91 @@
1+
<!DOCTYPE html>
12
<html lang="en">
23

34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Bootstrap Demo</title>
7+
<title>Document</title>
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
79

8-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
910
<style>
10-
body {
11-
background-color: #eee;
11+
.my-container {
12+
background-color: rgb(221, 235, 145);
1213
}
1314
</style>
1415
</head>
1516

1617
<body>
17-
<div class="container">
18-
<div class="row">
19-
<div class="col-3"></div>
20-
<div class="col-6">
21-
<div class="row justify-content-center mt-5">
22-
<div class="text-center h1 text-uppercase">
23-
Form Registration
24-
</div>
25-
</div>
18+
19+
<div class="container my-container p-4">
20+
<div class="row ">
21+
<div class="col-6 offset-3 bg-danger">
2622
<div class="row">
27-
<div class="col">
28-
<label for="first-name">First Name</label>
29-
<input type="text" class="form-control" id="first-name" placeholder="First Name">
23+
<div class="col-6">
24+
<div class="form-group">
25+
<label for="first-name">First Name</label>
26+
<input id="first-name" class="form-control" type="text" name="first-name">
27+
</div>
3028
</div>
31-
<div class="col">
32-
<label for="last-name">Last Name</label>
33-
<input type="text" class="form-control" id="last-name" placeholder="Last Name">
29+
<div class="col-6 order-md-first">
30+
<div class="form-group">
31+
<label for="last-name">Last Name</label>
32+
<input id="last-name" class="form-control" type="text" name="last-name">
33+
</div>
3434
</div>
3535
</div>
3636

37-
<div class="row mt-3">
38-
<div class="col">
39-
<label for="email">Email</label>
40-
<input type="email" id="email" name="email" placeholder="abc@mail.com" class="form-control">
41-
</div>
37+
38+
<div class="form-group">
39+
<label for="email">Email</label>
40+
<input id="email" class="form-control" type="email" name="email">
4241
</div>
43-
<div class="row mt-3">
44-
<div class="col">
45-
<label for="district">District</label>
46-
<select name="district" id="district" class="custom-select">
47-
<option value="CH">Chennai</option>
48-
<option value="CBE">Coimbatore</option>
49-
</select>
50-
</div>
51-
<div class="col">
52-
<label for="state">State</label>
53-
<select name="state" id="state" class="custom-select">
54-
<option value="TN">TN</option>
55-
<option value="KA">KA</option>
56-
</select>
57-
</div>
42+
<div class="form-group">
43+
<label for="mobile">Mobile</label>
44+
<input id="mobile" class="form-control" type="text" name="mobile">
5845
</div>
59-
<div class="row mt-3">
60-
<div class="col">
61-
<label for="country">Country</label>
62-
<select name="country" id="country" class="custom-select">
63-
<option value="IN">India</option>
64-
<option value="UK">UK</option>
65-
</select>
46+
<div class="row">
47+
<div class="col-6">
48+
<div class="form-group">
49+
<label for="address-1">Address Line 1</label>
50+
<input id="address-1" class="form-control" type="text" name="address-1">
51+
</div>
6652
</div>
67-
<div class="col">
68-
<label for="pincode">Pincode</label>
69-
<input type="text" id="pincode" class="form-control" name="pincode" placeholder="pincode">
53+
<div class="col-6">
54+
<div class="form-group">
55+
<label for="address-2">Address Line 2</label>
56+
<input id="address-2" class="form-control" type="text" name="address-2">
57+
</div>
7058
</div>
7159
</div>
72-
<div class="row mt-3">
73-
74-
<div class="col">
75-
<label for="password">password</label>
76-
<input type="password" id="password" class="form-control" name="password" placeholder="******">
77-
</div>
78-
</div>
79-
<div class="row mt-3">
80-
<div class="col">
81-
<label for="c-password">Confirm Password</label>
82-
<input type="password" id="c-password" class="form-control" name="c-password"
83-
placeholder="*******">
60+
<div class="row">
61+
<div class="col-6">
62+
<div class="form-group">
63+
<label for="district">District</label>
64+
<select name="district" id="district" class="custom-select">
65+
<option value="CH">Chennai</option>
66+
<option value="CBE">Coimbatore</option>
67+
</select>
68+
</div>
8469
</div>
85-
</div>
86-
87-
<div class="row mt-3 ">
88-
<div class="col">
89-
<button class="btn btn-block btn-lg btn-primary">Submit</button>
70+
<div class="col-6 order-sm-first">
71+
<div class="form-group">
72+
<label for="state">state</label>
73+
<select name="state" id="state" class="custom-select">
74+
<option value="TN">Tamil Nadu</option>
75+
<option value="KA">Karnataka</option>
76+
</select>
77+
</div>
9078
</div>
9179
</div>
80+
<button class="btn btn-primary btn-block">Submit</button>
9281
</div>
93-
<div class="col-3"></div>
9482
</div>
9583
</div>
9684

97-
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
98-
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
99-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
100-
10185

86+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
87+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
10288

10389
</body>
10490

105-
</html>
91+
</html>

0 commit comments

Comments
 (0)