Container in Bootstrap
Grid System in Bootstrap
Table in Bootstrap
Jumbotron in Bootstrap
Button in Bootstrap
Colorful Background in Bootstrap
Text Format in Bootstrap
Colorful Textual Message in Bootstrap
Alert Messages in Bootstrap
Alert Messages with Close in Bootstrap
Animated Alert Messages with Close in Bootstrap
Alert Hyperlinks in Bootstrap
Images in Bootstrap
Button in Bootstrap
Example : A common bootstrap web page.
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<title>Codershelpline</title>
</head>
<body style="background-color:seagreen">
<div class="container-fluid">
<form name="form1" id="form2">
<div class="form-group" style="margin-top:25px; background-color: orange">
<center>
<h2>User Registration</h2>
<table>
<tr>
<td>User Type :</td>
</tr>
<tr>
<td class="form-check-inline">
<input type="radio" class="form-check-input" name="RdbUserType1"
id="RdbUserType2" value="Admin">Admin
<input type="radio" class="form-check-input" name="RdbUserType1"
id="RdbUserType3" value="User" checked>User
</td>
</tr>
<tr>
<td>Name :<input type="text" class="form-control" name="TxtName1"
id="TxtName2" placeholder="Enter Name" ></td>
</tr>
<tr>
<td>Date Of Birth :<input type="date" class="form-control"
name="DateDob1" id="DateDob2"></td>
</tr>
<tr>
<td>Email ID :<input type="email" class="form-control"
name="EmailId1" id="EmailId2" placeholder="Enter Your Email">
</td>
</tr>
<tr>
<td>Password :<input type="password" class="form-control"
name="Password1" id="Password2" placeholder="Enter a
Password">
</td>
</tr>
<tr>
<td>Mobile No. :<input type="text" class="form-control"
name="TxtMob1" id="TxtMob1" placeholder="Enter Mobile No.">
</td>
</tr>
<tr>
<td>Gender :</td>
</tr>
<tr>
<td class="form-check-inline"><input type="radio"
class="form-check-input" name="RdbGen1" id="RdbGen2"
value="Male">Male
<input type="radio" class="form-check-input" name="RdbGen1"
id="RdbGen3" value="Female">Female
</td>
</tr>
<tr>
<td>Address :<textarea class="form-control" rows="3"
name="TxtAddress1" id="TxtAddress2" placeholder=
"Enter Your Address"></textarea>
</td>
</tr>
<tr>
<td>Occupation :
<select class="form-control" name="CbxOcc1" id="CbxOcc2">
<option>---Select---</option>
<option>Self Employeed</option>
<option>Government</option>
<option>Private Sector</option>
</select>
</td>
</tr>
<tr>
<td>ID Proof Submitted :</td>
</tr>
<tr>
<td class="form-check-inline">
<input type="checkbox" class="form-check-input" name=
"CbxIdAdhar1" id="CbxIdAdhar1">Adhar Card
<input type="checkbox" class="form-check-input" name=
"CbxIdPan1" id="CbxIdPan1">PAN Card
<input type="checkbox" class="form-check-input" name=
"CbxIdDl1" id="CbxIdDl2">Driving License
<input type="checkbox" class="form-check-input" name=
"CbxIdPspt1" id="CbxIdPspt2">Indian Passport
</td>
</tr>
<tr>
<td>
Receipt No. :<input type="number" class="form-control"
name="NmrRecNo1" id="NmrRecNo1" placeholder="Enter
Receipt No." >
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><input type="submit" class="btn btn-primary" value="Add User"
name="BtnSubmit1" id="BtnSubmit2">
<button type="reset" class="btn btn-secondary"
name="BtnReset1" id="BtnReset2">Reset
</button>
<button type="button" class="btn btn-warning"name="BtnUpdate1"
id="BtnUpdate2">Update
</button>
<button type="button" class="btn btn-info" name="BtnInfo1"
id="BtnInfo2">Get Info</button>
<button type="button" class="btn btn-danger" name="BtnDelete1"
id="BtnDelete2">Delete</button>
<button type="button" class="btn btn-dark" name="BtnSearch1"
id="BtnSearch2">Search</button>
</td>
</tr>
<tr>
<td>Already a Member? <button type="button" class="btn btn-link">
Login</button></td>
</tr>
</table>
</center>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jQuery.js"></script>
<script src="js/Popper.js"></script>
<script src="js/Popover.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>Example : Another form of common bootstrap web page.
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<title>Test Page</title>
</head>
<body style="background-color:seagreen">
<div class="container-fluid">
<form name="TestPage" id="TestPage">
<div class="form-group" style="margin-top:25px;
background-color: orange">
<center>
<h2>
User Registration
</h2>
<table>
<tr>
<td>
User Type
</td>
<td>: </td>
<td class="form-check-inline ">
<input type="radio" class="form-check-input" name="RdbUserType1"
id="RdbUserType2" value="Admin">Admin
<input type="radio" class="form-check-input" name="RdbUserType1"
id="RdbUserType3" value="User" checked>User
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
:
</td>
<td>
<input type="text" class="form-control" name="TxtName1" id="TxtName2"
placeholder="Enter Name" >
</td>
</tr>
<tr>
<td>
Date Of Birth
</td>
<td>
:
</td>
<td>
<input type="date" class="form-control" name="DateDob1" id="DateDob2">
</td>
</tr>
<tr>
<td>
Email ID
</td>
<td>
:
</td>
<td>
<input type="email" class="form-control" name="EmailId1" id="EmailId2"
placeholder="Enter Your Email" >
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
:
</td>
<td>
<input type="password" class="form-control" name="Password1" id="Password2"
placeholder="Enter a Password" >
</td>
</tr>
<tr>
<td>
Mobile No.
</td>
<td>
:
</td>
<td>
<input type="text" class="form-control" name="TxtMob1" id="TxtMob1"
placeholder="Enter Mobile No." >
</td>
</tr>
<tr>
<td>
Gender
</td>
<td>
:
</td>
<td class="form-check-inline
class="form-check-input" name="RdbGen1" id="RdbGen2" value="Male">Male
<input type="radio" class="form-check-input" name="RdbGen1" id="RdbGen3"
value="Female">Female
</td>
</tr>
<tr>
<td>
Address
</td>
<td>
:
</td>
<td>
<textarea class="form-control" rows="3" name="TxtAddress1" id="TxtAddress2"
placeholder="Enter Your Address"></textarea>
</td>
</tr>
<tr>
<td>
Occupation
</td>
<td>
:
</td>
<td>
<select class="form-control" name="CbxOcc1" id="CbxOcc2">
<option>---Select---</option>
<option>Self Employeed</option>
<option>Government</option>
<option>Private Sector</option>
</select>
</td>
</tr>
<tr>
<td>
ID Proof
</td>
<td>
:
</td>
<td class="form-check-inline ">
<input type="checkbox" class="form-check-input" name="CbxIdAdhar1"
id="CbxIdAdhar1">ADHAR Card
<input type="checkbox" class="form-check-input" name="CbxIdPan1" id="CbxIdPan1">
PAN Card
<input type="checkbox" class="form-check-input" name="CbxIdDl1" id="CbxIdDl2">
Driving Liscense
<input type="checkbox" class="form-check-input" name="CbxIdPspt1" id="CbxIdPspt2">
Passport
</td>
</tr>
<tr>
<td>
Receipt No.
</td>
<td>
:
</td>
<td>
<input type="number" class="form-control" name="NmrRecNo1" id="NmrRecNo1"
placeholder="Enter Receipt No." >
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="submit" class="btn btn-primary" value="Add User" name="BtnSubmit1"
id="BtnSubmit2">
<button type="reset" class="btn btn-secondary" name="BtnReset1" id="BtnReset2">
Reset</button>
<button type="button" class="btn btn-warning" name="BtnUpdate1" id="BtnUpdate2">
Update</button>
<button type="button" class="btn btn-info" name="BtnInfo1" id="BtnInfo2">Get
Info</button>
<button type="button" class="btn btn-danger" name="BtnDelete1" id="BtnDelete2">
Delete</button>
<button type="button" class="btn btn-dark" name="BtnSearch1" id="BtnSearch2">
Search</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
Already a Member? <button type="button" class="btn btn-link">Login</button>
</td>
</tr>
</table>
</center>
</div>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jQuery.js"></script>
<script src="js/Popper.js"></script>
<script src="js/Popover.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>Example : The other form of bootstrap web page.
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<title>Test Page</title>
</head>
<body style="background-color:seagreen">
<div class="container-fluid">
<form name="TestPage" id="TestPage">
<div class="form-group" style="margin-top:25px; background-
color: orange">
<center>
<h2>
User Registration
</h2>
<table>
<tr>
<td>
User Type
</td>
<td>: </td>
<td class="form-check-inline ">
<input type="radio" class="form-check-input" name="RdbUserType1" id="RdbUserType2"
value="Admin">Admin
<input type="radio" class="form-check-input" name="RdbUserType1" id="RdbUserType3"
value="User" checked>User
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
:
</td>
<td>
<input type="text" class="form-control col-7" name="TxtName1" id="TxtName2"
placeholder="Enter Name" >
</td>
</tr>
<tr>
<td>
Date Of Birth
</td>
<td>
:
</td>
<td>
<input type="date" class="form-control col-5" name="DateDob1" id="DateDob2">
</td>
</tr>
<tr>
<td>
Email ID
</td>
<td>
:
</td>
<td>
<input type="email" class="form-control col-6" name="EmailId1" id="EmailId2"
placeholder="Enter Your Email" >
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
:
</td>
<td>
<input type="password" class="form-control col-4" name="Password1" id="Password2"
placeholder="Enter a Password" >
</td>
</tr>
<tr>
<td>
Mobile No.
</td>
<td>
:
</td>
<td>
<input type="text" class="form-control col-5" name="TxtMob1" id="TxtMob1"
placeholder="Enter Mobile No." >
</td>
</tr>
<tr>
<td>
Gender
</td>
<td>
:
</td>
<td class="form-check-inline ">
<input type="radio" class="form-check-input" name="RdbGen1" id="RdbGen2"
value="Male">Male
<input type="radio" class="form-check-input" name="RdbGen1" id="RdbGen3"
value="Female">Female
</td>
</tr>
<tr>
<td>
Address
</td>
<td>
:
</td>
<td>
<textarea class="form-control col-7" rows="3" name="TxtAddress1" id="TxtAddress2"
placeholder="Enter Your Address"></textarea>
</td>
</tr>
<tr>
<td>
Occupation
</td>
<td>
:
</td>
<td>
<select class="form-control col-4" name="CbxOcc1" id="CbxOcc2">
<option>---Select---</option>
<option>Self Employeed</option>
<option>Government</option>
<option>Private Sector</option>
</select>
</td>
</tr>
<tr>
<td>
ID Proof
</td>
<td>
:
</td>
<td class="form-check-inline ">
<input type="checkbox" class="form-check-input" name="CbxIdAdhar1"
id="CbxIdAdhar1">ADHAR Card
<input type="checkbox" class="form-check-input" name="CbxIdPan1" id="CbxIdPan1">
PAN Card
<input type="checkbox" class="form-check-input" name="CbxIdDl1"
id="CbxIdDl2">Driving Liscense
<input type="checkbox" class="form-check-input" name="CbxIdPspt1"
id="CbxIdPspt2">Passport
</td>
</tr>
<tr>
<td>
Receipt No.
</td>
<td>
:
</td>
<td>
<input type="number" class="form-control col-4" name="NmrRecNo1" id="NmrRecNo1"
placeholder="Enter Receipt No." >
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="submit" class="btn btn-primary" value="Add User" name="BtnSubmit1"
id="BtnSubmit2">
<button type="reset" class="btn btn-secondary" name="BtnReset1" id="BtnReset2">
Reset</button>
<button type="button" class="btn btn-warning" name="BtnUpdate1" id="BtnUpdate2">
Update</button>
<button type="button" class="btn btn-info" name="BtnInfo1" id="BtnInfo2">Get
Info</button>
<button type="button" class="btn btn-danger" name="BtnDelete1" id="BtnDelete2">
Delete</button>
<button type="button" class="btn btn-dark" name="BtnSearch1" id="BtnSearch2">
Search</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
Already a Member? <button type="button" class="btn btn-link">Login</button>
</td>
</tr>
</table>
</center>
</div>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jQuery.js"></script>
<script src="js/Popper.js"></script>
<script src="js/Popover.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>596 total views, 1 views today
0 Comments