Scribd
Upload
7 views3 pages

Dogs

The document is an HTML template for a Bootstrap-based webpage focusing on content styling and form components. It includes a header, a responsive table displaying user information, a registration form with various input fields, and a footer. The form allows users to enter personal details, select gender, account type, and interests, and submit the information.

Uploaded by

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

Dogs

The document is an HTML template for a Bootstrap-based webpage focusing on content styling and form components. It includes a header, a responsive table displaying user information, a registration form with various input fields, and a footer. The form allows users to enter personal details, select gender, account type, and interests, and submit the information.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Content and Forms Activity</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head>

<body>

<!-- Header Section -->


<header class="bg-primary text-white text-center p-4">
<h1 class="display-4">Bootstrap Content and Forms Activity</h1>
<p>Learning Bootstrap's Content Styling and Form Components</p>
</header>

<!-- Responsive Table Section -->


<div class="text-center p-5">
<h2 class="display-5">Responsive Table</h2>
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered">
<thead class="table-dark">
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Paul Richie F. Asuncion</td>
<td>28</td>
<td>Developer/ICS Dean</td>
</tr>
<tr>
<td>2</td>
<td>Camela Nica B. Montealegre</td>
<td>32</td>
<td>BSIT ProgCoor</td>
</tr>
<tr>
<td>3</td>
<td>Rowel Encarnacion</td>
<td>45</td>
<td>BSIS ProgCoor</td>
</tr>
<tr>
<td>4</td>
<td>Edelwise S. Ignacio</td>
<td>22</td>
<td>ACT ProgCoor</td>
</tr>
<tr>
<td>5</td>
<td>Mary Queen S. Acera</td>
<td>22</td>
<td>BSCS ProgCoor</td>
</tr>
</tbody>
</table>
</div>
</section>

<div class="text-center p-5">


<h2 class="display-5">Registration Form</h2>
<form>
<div class="row mb-3">
<label for="fullName" class="col-sm-2 col-form-label">Full
Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="fullName"
placeholder="Enter your full name">
</div>
</div>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label">Email
Address</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email"
placeholder="Enter your email">
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-sm-2 col-form-
label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password"
placeholder="Enter your password">
</div>
</div>
<div class="row mb-3">
<label for="gender" class="col-sm-2
col-form-label">Gender</label>
<div class="col-sm-10">
<select class="form-select" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label">Account Type</label>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio"
name="accountType" id="personal" value="personal" checked>
<label class="form-check-label" for="personal">
Personal
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
name="accountType" id="business" value="business">
<label class="form-check-label" for="business">
Business
</label>
</div>
</div>
</div>
<div class="row mb-2">
<label class="col-sm-2 col-form-label">Interests</label>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox"
value="sports" id="sports">
<label class="form-check-label" for="sports">
Sports
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox"
value="music" id="music">
<label class="form-check-label" for="music">
Music
</label>
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn
btn-primary">Submit</button>
</div>
</div>
</form>
</div>

<!-- Footer Section -->


<footer class="bg-light text-center p-3 mt-5">
<p>© 2025 WBT1 Activity</p>
</footer>

<!-- Bootstrap JS Bundle -->


<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>

</body>
</html>

You might also like