Scribd
Upload
11 views10 pages

Laboratory Demo 01

Uploaded by

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

Laboratory Demo 01

Uploaded by

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

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">


<h1>My First Bootstrap Page</h1>
<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">


<h1>My First Bootstrap Page</h1>
<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">


<h1>My First Bootstrap Page</h1>
<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>
<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">
<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>[email protected]</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
<td>[email protected]</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>
<td>[email protected]</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
<td>[email protected]</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>
<td>[email protected]</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
<td>[email protected]</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>
<td>[email protected]</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
<td>[email protected]</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>
<td>[email protected]</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
<td>[email protected]</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>
<td>[email protected]</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
<td>[email protected]</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>
<td>[email protected]</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
<td>[email protected]</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>
<td>[email protected]</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
<td>[email protected]</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>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Juan Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Juan Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Juan Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Juan Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Juan Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Juan Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Juan Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Juan Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Juan Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Juan Dela Cruz</td>
<td>[email protected]</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>
<table class="table">
<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>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<table class="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>
<td>[email protected]</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
<td>[email protected]</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>
<td>[email protected]</td>
</tr>
<tr>
<td>Juan</td>
<td>Dela Cruz</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Amarah</td>
<td>Mateo</td>
<td>[email protected]</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>
<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">
<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">


<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>

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


<span class="spinner-border spinner-border-sm"></span>
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>
<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>

<!--Badges are used to add additional information to any content. -->


<!--Use the .badge class together with a contextual class (like .badge-secondary) -->
<!--within <span> elements to create rectangular badges.-->

<div class="container">
<h2>Heading with Badge</h2>
<h1>Example heading <span class="badge badge-secondary">Badge</span></h1>
<h2>Example heading <span class="badge badge-secondary">Badge</span></h2>
<h3>Example heading <span class="badge badge-secondary">Badge</span></h3>
<h4>Example heading <span class="badge badge-secondary">Badge</span></h4>
<h5>Example heading <span class="badge badge-secondary">Badge</span></h5>
<h6>Example heading <span class="badge badge-secondary">Badge</span></h6>

<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>

You might also like