en English
af Afrikaanssq Albanianam Amharicar Arabichy Armenianaz Azerbaijanieu Basquebe Belarusianbn Bengalibs Bosnianbg Bulgarianca Catalanceb Cebuanony Chichewazh-CN Chinese (Simplified)zh-TW Chinese (Traditional)co Corsicanhr Croatiancs Czechda Danishnl Dutchen Englisheo Esperantoet Estoniantl Filipinofi Finnishfr Frenchfy Frisiangl Galicianka Georgiande Germanel Greekgu Gujaratiht Haitian Creoleha Hausahaw Hawaiianiw Hebrewhi Hindihmn Hmonghu Hungarianis Icelandicig Igboid Indonesianga Irishit Italianja Japanesejw Javanesekn Kannadakk Kazakhkm Khmerko Koreanku Kurdish (Kurmanji)ky Kyrgyzlo Laola Latinlv Latvianlt Lithuanianlb Luxembourgishmk Macedonianmg Malagasyms Malayml Malayalammt Maltesemi Maorimr Marathimn Mongolianmy Myanmar (Burmese)ne Nepalino Norwegianps Pashtofa Persianpl Polishpt Portuguesepa Punjabiro Romanianru Russiansm Samoangd Scottish Gaelicsr Serbianst Sesothosn Shonasd Sindhisi Sinhalask Slovaksl Slovenianso Somalies Spanishsu Sudanesesw Swahilisv Swedishtg Tajikta Tamilte Teluguth Thaitr Turkishuk Ukrainianur Urduuz Uzbekvi Vietnamesecy Welshxh Xhosayi Yiddishyo Yorubazu Zulu

Bootstrap

Published by Admin on

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>

 761 total views,  2 views today

Categories: Bootstrap

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.