Laboratory Demo 01

CONTAINERS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></scrip
t>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container p-3">

<h1>My First Bootstrap Page</h1>
<p>This container has a top padding of 16 pixels (.pt-3).</p>
<p>Try to remove the .pt-3 class to see the difference.</p>
</div>
<div class="container p-3 my-3 border">

<p>This container has a border and some extra padding and margins.</p>
</div>
<div class="container p-3 my-3 bg-dark text-white">

<p>This container has a dark background color and a white text, and some extra
padding and margins.</p>
</div>
<div class="container p-3 my-3 bg-primary text-white">

<p>This container has a blue background color and a white text, and some extra
padding and margins.</p>
</div>
</body>
</html>
TABLE
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
t>
<script
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and horizontal dividers) to a
table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jay-Arr</td>
<td>Buhain</td>
<td>jbuhain@example.com</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
<td>jdelacruz@example.com</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
<td>amateo@example.com</td>
</tr>
</tbody>
</table>
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jay-Arr</td>
<td>Buhain</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
</tr>
</tbody>
</table>
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders on all sides of the table and the
cells:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jay-Arr</td>
<td>Buhain</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
</tr>
</tbody>
</table>
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state (grey background on mouse over) on
table rows:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jay-Arr</td>
<td>Buhain</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
</tr>
</tbody>
</table>
<h2>Black/Dark Table</h2>
<p>The .table-dark class adds a black background to the table:</p>
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jay-Arr</td>
<td>Buhain</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
</tr>
</tbody>
</table>
<h2>Dark Striped Table</h2>

<p>Combine .table-dark and .table-striped to create a dark, striped table:</p>
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jay-Arr</td>
<td>Buhain</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
</tr>
</tbody>
</table>
<h2>Hoverable Dark Table</h2>

<p>The .table-hover class adds a hover effect (grey background color) on table
rows:</p>
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jay-Arr</td>
<td>Buhain</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
</tr>
</tbody>
</table>
<h2>Borderless Table</h2>
<p>The .table-borderless class removes borders from the table:</p>
<table class="table table-borderless">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jay-Arr</td>
<td>Buhain</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
</tr>
</tbody>
</table>
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color the table, table rows or table cells.
The classes that can be used are: .table-primary, .table-success, .table-info, .table-
warning, .table-danger, .table-active, .table-secondary, .table-light and .table-
dark:</p>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Juan Dela Cruz</td>
<td>juan@example.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
</tr>
<tr class="table-success">
<td>Success</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
</tr>
<tr class="table-info">
<td>Info</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
</tr>
<tr class="table-active">
<td>Active</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
</tr>
<tr class="table-light">
<td>Light</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
</tr>
</tbody>
</table>
<h2>Table Head Colors</h2>

<p>The .thead-dark class adds a black background to table headers, and the .thead-
light class adds a grey background to table headers:</p>
<thead class="thead-dark">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
<thead class="thead-light">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jay-Arr</td>
<td>Buhain</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
</tr>
</tbody>
</table>
<h2>Small Table</h2>
<p>The .table-sm class makes the table smaller by cutting cell padding in half:</p>
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jay-Arr</td>
<td>Buhain</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
</tr>
</tbody>
</table>
<h2>Responsive Table</h2>
<p>The .table-responsive class adds a scrollbar to the table when needed:</p>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Juan</td>
<td>Dela Cruz</td>
<td>20</td>
<td>Cavite</td>
<td>Philippines</td>
<td>Male</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
BUTTON
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
t>
<script
</head>
<body>
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
<h2>Button Classes used in a, button, or input elements</h2>

<a href="https://google.com.ph/" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
<h2>Button Outline</h2>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
<h2>Button Sizes</h2>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<h2>Block Level Buttons</h2>

<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
<h2>Active/Disabled Buttons</h2>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
<h2>Spinner Buttons</h2>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">

Loading..
</button>
<button class="btn btn-primary" disabled>

Loading..
</button>
<button class="btn btn-primary" disabled>

<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
</div>
</body>
</html>
BADGES
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
t>
<script
</head>
<body>




<h2>Heading with Badge</h2>
<h1>Example heading <span class="badge badge-secondary">Badge</span></h1>
<h2>Contextual Badge</h2>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<h2>Pill Badge</h2>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
<h2>Badge inside an Element</h2>

<button type="button" class="btn btn-primary">
Email Notifications <span class="badge badge-light">5</span>
</button>
</div>
</body>
</html>

Laboratory Demo 01

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Laboratory Demo 01

Uploaded by

Copyright:

Available Formats

CONTAINERS

<div class="container p-3">

<div class="container p-3 my-3 border">

<div class="container p-3 my-3 bg-dark text-white">

<div class="container p-3 my-3 bg-primary text-white">

<h2>Dark Striped Table</h2>

<h2>Hoverable Dark Table</h2>

<h2>Table Head Colors</h2>

<h2>Button Classes used in a, button, or input elements</h2>

<h2>Block Level Buttons</h2>

<button class="btn btn-primary">

<button class="btn btn-primary" disabled>

<button class="btn btn-primary" disabled>

<h2>Badge inside an Element</h2>

You might also like