Scribd
Upload
262 views45 pages

Kushal RWPD Precticals

The document provides steps to install the Bootstrap framework and understand HTML tags and attributes to create responsive web pages. It outlines 10 steps including opening the Bootstrap website, downloading the files, extracting and moving the folders, and adding Bootstrap links to an HTML file. The document also includes examples of using Bootstrap to design web pages that display college and department names, student information, and a responsive class timetable.

Uploaded by

KUSHAL TRIVEDI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
262 views45 pages

Kushal RWPD Precticals

The document provides steps to install the Bootstrap framework and understand HTML tags and attributes to create responsive web pages. It outlines 10 steps including opening the Bootstrap website, downloading the files, extracting and moving the folders, and adding Bootstrap links to an HTML file. The document also includes examples of using Bootstrap to design web pages that display college and department names, student information, and a responsive class timetable.

Uploaded by

KUSHAL TRIVEDI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 45

Practical – 2

Aim : install bootstrap framework and


understand various tags, attribute of HTML
and necessary Files to make responsive web
page.

Step 1 : Open the Bootstrap website in your internet browser.


Step 2 : Click the Download button. This will open the "Download" page.

Step 3 : Click the Download button below "Compiled CSS and JS


Step 4 : Extract the files from the ZIP archive.

Step 5 :Move the extracted folders to the same folder as your website HTML files.

Step 6 : Right-click the HTML file you want to use with Bootstrap.
Step 7 : Hover over Open with on the right-click menu.

Step 8 : Select your text editor program.


Step 9 : Add the Bootstrap links to your HTML file's header.

Step 10 : Check the placement of your Bootstrap links in the code.


Practical -3
Aim : Design web page that shows department name,
college name at center of web page by using bootstrap
framework and without using bootstrap framework.

<html>
<head>
<title>
College Department Details
</title>
</head>
<body bgcolor="lightgray">
<h1 align="center" style="color: black;">government polytechnic </h1>
<h1 align="center" style="color: black;">computer</h1>

Output :
Using bootstrep :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Computer Engineering Department</title>
<link href="bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<div class="d-flex align-items-center justify-content-center" style="height:vh"90>
<div class="text-center">
<h1>government polytechnic </h1>
<h2>computer </h2>
</div>
</div>
</body>
</html>
Practical – 4
Aim: Display student information content on responsive
web page by using container and container-fluid classes.

<!DOCTYPE html>
<html lang="en">
<head>
<title>student</title>
</head>
<body>
<h1>My First Bootstrap Page</h1>
<p> name : kushal trivedi </p>
<p> enrollment no. : 216170307181 </p>
<p> semester an division: 3rd c </p>
<p> department : computer engineering </p>
<p> college : government polytechnic ahmedabad </p>
</body>
</html>
Output :

Using bootstrap :

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Container-fluid Example</title>
<link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css">
<script src="bootstrap-4.3.1-dist/js/jquery.min.js">
</script>
<script src="bootstrap-4.3.1-dist/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Since we are using the class container-fluid, the
below div will expand whenever the viewport is resized. -->
<div class="container-fluid" style="background: green;">
<h1>Student Information</h1>
<p> name : kushal trivedi </p>
<p> enrollment no. : 216170307181 </p>
<p> semester an division: 3rd c </p>
<p> department : computer engineering </p>
<p> college : government polytechnic ahmedabad </p>
</div>
</body>
</html>

Output :
Practical – 5

Aim : Use offset column, reordering column and Nesting column to


create responsive web page for given format.

<h2 style="color:blue;">Offset Columns</h2>


<br />
<div class="container-fluid">
<div class="row">
<div class= "col-md-4 col-sm-4 col-lg-4 offset-md-2">
<h1>Contact</h1>
<br>
<div class="row">
<div class="col-sm-8 col-lg-5 offset-md-2">
<form action="" target="_blank">
<p><input type="text" placeholder="Name" class="box"
required name="Name"></p>
<p><input type="text"
placeholder="Comments" required name="Comment"
class="box"
style=" height:150px;"></p>
<p><button style="color:black; margin-left:35%" class="btn
btn-info" type="submit"><b>SUBMIT</b></button></p>
</form>
</div>
</div>
<div class= "col-md-4 col-sm-4 col-lg-4 offset-md-1">
<h1>Contact</h1>
<br>
<div class="col-md-5 col-lg-5 offset-md-0">
<form action="" target="_blank">
<p><input type="text" placeholder="Name" class="box"
required name="Name"></p>
<p><input type="text"
placeholder="Comments" required name="Comment"
class="box"
style=" height:150px;"></p>
<p><button style="color:black; margin-left:35%" class="btn
btn-info" type="submit"><b>SUBMIT</b></button></p>
</form>
</div>
</div>
Output :

Practical-6
Aim : Create responsive web page of your class time table by
using bootstrap grid system.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Class Time Table</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="background: grey;">
<h3 class="text-center m-4">Class Time Table</h3>
<div class="container-fluid text-center">
<div class="row border border-dark fw-bold">
<div class="col-lg-12 py-2 border"><h4>Time Table
3-C-3</h4></div>
</div>
<div class="row border border-dark fw-bold">
<div class="col-sm py-2 border"><h5>TIME/DAY</h5></div>
<div class="col-sm py-2 border"><h5>10:30 - 11:30</h5></div>
<div class="col-sm py-2 border"><h5>11:30 - 12:30</h5></div>
<div class="col-sm py-2 border"><h5>12:30 - 01:30</h5></div>
<div class="col-sm py-2 border"><h5>01:30 - 02:00</h5></div>
<div class="col-sm py-2 border"><h5>02:00 - 03:00</h5></div>
<div class="col-sm py-2 border"><h5>03:00 - 04:00</h5></div>
<div class="col-sm py-2 border"><h5>04:10 - 06:10</h5></div>
</div>
<div class="row border border-dark">
<div class="col-sm py-4 fw-bold border"><h5>MON</h5></div>
<div class="col-sm py-4 border">OS</div>
<div class="col-sm py-4 border">PYTHON</div>
<div class="col-sm py-4 border">RDBMS</div>
<div class="col-sm py-4 border">RDBMS LAB</div>
<div class="col-sm py-4 border">RDBMS LAN</div>
<div class="col-sm py-4 border">PYTHON</div>
<div class="col-sm py-4 border">Python</div>
</div>
<div class="row border border-dark">
<div class="col-sm py-4 fw-bold border"><h5>TUE</h5></div>
<div class="col-sm py-4 border">DS</div>
<div class="col-sm py-4 border">RDBMS</div>
<div class="col-sm py-4 border">OS</div>
<div class="col-sm py-4 border">Break</div>
<div class="col-sm py-4 border">RWPD LAB</div>
<div class="col-sm py-4 border">-</div>
<div class="col-sm py-4 border">-</div>
</div>
<div class="row border border-dark">
<div class="col-sm py-4 fw-bold border"><h5>WED</h5></div>
<div class="col-sm py-4 border">RDBMS LAB</div>
<div class="col-sm py-4 border">RDBMS LAB</div>
<div class="col-sm py-4 border">DS</div>
<div class="col-sm py-4 border">Break</div>
<div class="col-sm py-4 border">DS LAB</div>
<div class="col-sm py-4 border">Python</div>
<div class="col-sm py-4 border">-</div>
</div>
<div class="row border border-dark">
<div class="col-sm py-4 fw-bold border"><h5>THU</h5></div>
<div class="col-sm py-4 border">LIBARY</div>
<div class="col-sm py-4 border">OS LAB</div>
<div class="col-sm py-4 border">OS LAB</div>
<div class="col-sm py-4 border">Break</div>
<div class="col-sm py-4 border">DS</div>
<div class="col-sm py-4 border">PYTHON</div>
<div class="col-sm py-4 border">-</div>
</div>
<div class="row border border-dark">
<div class="col-sm py-4 fw-bold border"><h5>FRI</h5></div>
<div class="col-sm py-4 border">PYTHON</div>
<div class="col-sm py-4 border">DS</div>
<div class="col-sm py-4 border">DS</div>
<div class="col-sm py-4 border">Break</div>
<div class="col-sm py-4 border">OS</div>
<div class="col-sm py-4 border">RDMS</div>
<div class="col-sm py-4 border">PYTHON</div>
</div>
</div>
</body>
</html>

Output :

Practical-7
Aim : Shows at least five to six co-curricular/Extra activities of
student that includes multiple images and short description of each
activity on responsive web page using responsive images with
different styles and responsive tables with 3 to 4 different styles
such as hover state when mouse over, different color of each row,
table with striped row etc.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Class Time Table</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h3 class="text-center my-3 pt-2">Co-curricular Activities</h3>
<table class="table table-striped table-hover">
<tr>
<td class="bg-secondary text-white"><img src="1.1.jpg"
class="img-fluid img-thumbnail" alt="..."></td>
<td class="bg-secondary text-white"><h4>SPORT</h4>
Sports are defined as physical or mental exertion by
individuals and are committed to maintaining physical or mental
fitness. There are many types of exercise that can be practiced as a
healthy habit, such as walking, riding, Swimming, or athletics, and
these sports have many benefits on the human body and
mind.Sport make the body ideal, consistent, and healthy, as it
strengthens it, and fights obesity. Prevention of many diseases,
including: Obesity, which is a cause of other diseases, such as:
Diabetic cartilage disease, diabetes and high blood pressure.
</td>
</tr class="table-primary">
<tr>
<td class="bg-secondary text-white"><img src="1.2.jpeg"
class="img-fluid img-thumbnail" alt="..."></td>
<td class="bg-secondary text-white"><h4>TREKIING</h4>
Trekking is an outdoor activity of walking for more than a
day. It is a form of walking, undertaken with the specific purpose of
exploring and enjoying the scenery.
Trekking could be a motive, It could be a commitment, an
aim, an objective, a mission, a party, a social gathering. It could be
a place where you find friends, and it could be a journey. It could be
a slightest chance to save our future generation from losing the
nature lovers, mother earth holding within.
It can be shortened or extended as per the desire of
trekkers.Trekking is more challenging than hiking since it tests one's
ability, endurance and their mental as well as psychological
capacity.
</td>
</tr>
<tr>
<td class="bg-secondary text-white"><img src="1.3.png"
class="img-fluid img-thumbnail" alt="..."></td>
<td class="bg-secondary text-white"><h4>COIN
COLLECTION</h4>
coin collecting, also called numismatics, the systematic
accumulation and study of coins, tokens, paper money, and objects
of similar form and purpose. The collecting of coins is one of the
oldest co Co-curricular activities in the world. With the exception of
China and Japan, the introduction of paper money is for the most
part a recent development
</td>
</tr>
<tr>
<td class="bg-secondary text-white"><img src="1.4.jpg"
class="img-fluid img-thumbnail" alt="..."></td>
<td class="bg-secondary text-white"><h4>GARDENING</h4>
Gardening engages all of the senses! Squish your hands in
the dirt. How does it feel? Let’s add some water. What does it look
like now? How does that flower smell? We grew this vegetable let’s
eat it and see how it tastes! Hear that crunch when we bite into it?
</td>
</tr>
<td class="bg-secondary text-white"><img src="1.5.jpg"
class="img-fluid img-thumbnail" alt="..."></td>
<td class="bg-secondary text-white"><h4>GAMING</h4>
Video games are the current rend and people of all ages are
behind the various kinds of video games available today.
A video game is an electronic game which involves a human
interaction with a user interface, which would generate a visual
feedback onto a video device.tudies have shown that when studies
are modulated in the form of games, it attracts more interests of
the students and help them learning better. However, with the
positive side, there are also negative impacts on children through
Video games. Some children form a very destructive behavioral
pattern and would try to be destructive and dangerous.
</td>
</tr>
</table>

<!-- JavaScript Bundle with Popper -->


<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstr
ap.bundle.min.js"
integrity="sha384-
u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPO
OmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
Output:
Practical-8
Aim : Use bootstrap typography to create responsive web
page on given blog topic

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Practical 4</title>
<link href=css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div style="background: rgb(203, 225, 233);">
<h1 class="text-center display-1 text-uppercase">cricket </h1>
<h2> The ICC World Twenty20 (also referred to as the ICC World T20
or the T20 World Cup) is the international championship of Twenty20
cricket. Organised by cricket's governing body, the International Cricket
Council (ICC), the tournament consists of 12 teams, comprising all ten ICC
full members and two other ICC members chosen through the ICC World
Twenty20 Qualifier. The event is generally held every two years, and all
matches are accorded Twenty20 International status. </h2>
<h3> he first World Cup was organised in England in June 1975, with
the first ODI cricket match having been played only four years earlier.
However, a separate Women's Cricket World Cup had been held two years
before the first men's tournament, and a tournament involving multiple
international teams had been held as early as 1912, when a triangular
tournament of Test matches was played between Australia, England and
South Africa. The first three World Cups were held in England. From the
1987 tournament onwards, hosting has been shared between countries
under an unofficial rotation system, with fourteen ICC members having
hosted at least one match in the tournament. </h3>
<h4 class="text-capitalize"> virat kohli:-</h4>
<h5><ul class="list-inline">
<li class="list-inline-item"> ms dhoni</li>
<li class="list-inline-item"> sachin tendulkar </li>
<li class="list-inline-item"> rohit sharma </li>
<li class="list-inline-item"> hardik pandya</li>
<li class="list-inline-item"> jasprit bumrah </li>
</ul></h5>
<h5>--------------------</h6>
<p class="text-capitalize">FULL FORM OF ICC IS <mark><abbr
title="twitter"> International Cricket Council</abbr></mark></p>

<p>ADVANTAGES OF WATCHINNG<small>FIFA</small></p>
<dl>
<dt>KING</dt>
<dd>-Intelligence increase 100%
</dd>
<dt>Best NO BALL</dt>
<dd> Kohli first played for Delhi Under-15 team in October 2002 in the 2002–03 Polly
Umrigar Trophy. He became the captain of the team for the 2003–04 Polly Umrigar Trophy. In
late 2004, he was selected in the Delhi Under-17 team for the 2003–04 Vijay Merchant Trophy.
Delhi Under-17s won the 2004–05 Vijay Merchant Trophy in which Kohli finished as the highest
run-scorer with 757 runs from 7 matches with two centuries.[22] In February 2006, he made his
List A debut for Delhi against Services but did not get to bat.

</dd>
</dl>
<p>The following bootstrap
components:-<code>Drop-downs</code>,<code>Button</code>,<code>Nav
igation</code>,<code>Badges Alerts</code> and <code>Progress
Bar</code></p>
<p><kbd>ctrl+D</kbd> is short-cut key for duplicate focused item in
bootstrap editor</p>
<pre>This is bootstrap learner webpage</pre>
<h1 class="text-center display-2">https://wiki.com</a>
<h1 class="text-center display-3">https://www.CRICKET.com</h1>
<h1 class="text-center display-5">https://www.ICC.com</h1>
<h1 class="text-center display-6">https://www.itscricket.com</h1>
<blockquote class="blockquote-footer">Thank you</blockquote>
</div>
</body>
</html>

Output :
Practical-9
AIM : Design responsive web page for registration form using
bootstrap form layout, form control, bootstrap buttons

<form>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid"
id="validationServer01" placeholder="First name"
value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationServer02">Last name</label>
<input type="text" class="form-control is-valid"
id="validationServer02" placeholder="Last name"
value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label
for="validationServerUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"
id="inputGroupPrepend3">@</span>
</div>
<input type="text" class="form-control is-invalid"
id="validationServerUsername" placeholder="Username"
aria-describedby="inputGroupPrepend3" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">City</label>
<input type="text" class="form-control is-invalid"
id="validationServer03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
<input type="text" class="form-control is-invalid"
id="validationServer04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">Zip</label>
<input type="text" class="form-control is-invalid"
id="validationServer05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid"
type="checkbox" value="" id="invalidCheck3" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit
form</button>
</form>
Output :
Practical-10
AIM : Create various types of menus using bootstrap menu
components such as right aligned dropdown menu, drop up menu,
adding headers of each item etc. and glyph icons components.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initialscale=1.0">
<title> Practical - 10 </title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/
css/bootst
rap.min.css" integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/
Q5PaXtkKtu6ug5TOeNV6gBiFeWPGF
N9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/
css/bootst
rap.min.css" integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/
Q5PaXtkKtu6ug5TOeNV6gBiFeWPGF
N9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-
dark">
<a class="navbar-brand" href="index.html" > <img
src="Eagle.jpg"
alt="logo” style="width:40px;"> Gaming </a>
<button class="navbar-toggler" type="button"
datatoggle="collapse"
datatarget="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-
expanded="false"
aria-label="Togglenavigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html"> Home <span
class="sronly"> (current) </span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#"> Games </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> About us </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button" data-
toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-
labelledby="navbarDropdown">
<a class="dropdown-item" href="reviews.html">
Reviews </a>
<a class="dropdown-item" href="#"> Online games </a>
<a class="dropdown-item" href="#"> Offline games </a>
<!-- <div class="dropdown-divider"></div> -->
<a class="dropdown-item" href="#"> Contact us </a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-
3.4.1.slim.min.js"
integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7im
GFAV0wwj
1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/
umd/popp
er.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTt
mI3UksdQ
RVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/
js/bootstra
p.min.js"
integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj
0Uod8GC
Exl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>

Output :
Practical-12
AIM: Use different bootstrap input groups components to create
responsive webpage for job application or any other kind of
application.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initialscale=1.0">
<title> Practical - 12 </title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/
css/bootst
rap.min.css" integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/
Q5PaXtkKtu6ug5TOeNV6gBiFeWPGF
N9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link
rel="stylesheet"href="https://cdn.jsdelivr.net/npm/
bootstrap@4.4.
1/dist/css/bootstrap.min.css" integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/
Q5PaXtkKtu6ug5TOeNV6gBiFeWPGF
N9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
<br>
<center><h1><b> New Employee Details
</b></h1></center>
<br>
<h5> Please fill out your infromation below.</h5><hr>
<form action="/action_page.php">
<div class="form-group">
<label for="name"> Name </label>
<input type="name" class="form-control" id="name"
placeholder="
Enter First name " name="name"><br>
<input type="name" class="form-control" id="name"
placeholder="
Enter middle name " name="name"><br>
<input type="name" class="form-control" id="name"
placeholder="
Enter Last name " name="name">
</div>
<div class="form-group">
<label for="bdate"> Birth Date </label>
<input type="date" class="form-control" id="bdate"
placeholder="Enter Enrollment number" name="bdate">
</div>
<div class="form-group">
<label for="email"> Email </label>
<input type="email" class="form-control" id="email"
placeholder="Enter Email address" name="email">
</div>
<div class="form-group">
<label for="phn"> Phone Number </label>
<input type="number" class="form-control" id="phn"
placeholder="Enter Phone number" name="phone">
</div>
<div class="form-group">
<label for="sm"> LinkedIn </label>
<input type="url" class="form-control" id="sm"
placeholder="Enter LinkedIn Profile URL" name="linkedin">
</div>
<div class="form-group">
<label for="phn"> Address </label>
<textarea type="number" class="form-control" id="phn"
placeholder="Enter Address" name="address"></textarea>
</div>
<div class="form-group">
<label for="resume"> Resume </label>
<input type="file" class="form-control" id="resume" >
</div>
<div class="form-group">
<label for="Bank"> Bank </label>
<input type="Bank" class="form-control" id="Bank"
placeholder="Bank Name" name="Bank">
</div>
<div class="form-group">
<label for="Account number"> Account number </label>
<input type="Account number" class="form-control"
id="Account
number" placeholder="Account number" name="Account
number">
</div>
<center><button type="submit" class="btn btn-primary">
SUBMIT
</button></center>
</form>
</div>
<script src="https://code.jquery.com/jquery-
3.4.1.slim.min.js"
integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0
wwj
1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/
umd/popp
er.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3Uks
dQ
RVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/
js/bootstra
p.min.js"
integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod
8GC
Exl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>

Output :

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy