Scribd
Upload
11 views10 pages

Web Development Lesson Ten

This document is a lesson on web development focusing on Bootstrap, covering topics such as Bootstrap colors, buttons, alerts, images, and tables. It explains the use of various Bootstrap classes to enhance web design and includes examples of code snippets for practical application. Additionally, it includes a class task for designing an image gallery using Bootstrap.

Uploaded by

oluwafemiarike517
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

Web Development Lesson Ten

This document is a lesson on web development focusing on Bootstrap, covering topics such as Bootstrap colors, buttons, alerts, images, and tables. It explains the use of various Bootstrap classes to enhance web design and includes examples of code snippets for practical application. Additionally, it includes a class task for designing an image gallery using Bootstrap.

Uploaded by

oluwafemiarike517
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

WEB DEVELOPMENT

LESSON TEN

By Oluwadamilare Idowu Joshua


Table of Content
• More on Bootstrap

o Bootstrap Colors

o Bootstrap Buttons

o Bootstrap Alerts

o Bootstrap Images

o Bootstrap Tables
What is a Website
A website is a collection of
publicly accessible,
interlinked Web pages that
share a single domain name.
Together, all publicly
accessible websites
constitute the World Wide
Web. Notable examples are
wikipedia.org, google.com,
and amazon.com.
Bootstrap Text Colors Bootstrap Buttons
<div class="container"> <div class="container">
<p class="text-muted">This text is <button type="button" class="btn">Basic</button>
muted. </p> <button type="button"
<p class="text-primary">This text is class="btn btn-primary" >Primary</button>
important.</p> <button type="button" class="btn
<p class="text-success">This text btn-secondary">Secondary</button>
indicates success.</p> <button type="button" class="btn
<p class="text-info">This text btn-success">Success</button>
represents some information.</p> <button type="button"
<p class="text-warning">This text class="btn btn-info">Info</button>
represents a warning. </p> <button type="button"
<p class="text-danger">This text class="btn btn-warning">Warning</button>
represents danger. </p> <button type="button" class="btn
</div> btn-danger">Danger</button>
<button type="button"
class="btn btn-dark">Dark</button>
</div>
Bootstrap Alerts
<div class="container">
<h2>Alerts</h2>
<p>Alerts are created with the .alert
class, followed by a contextual
color classes: </p>
<div class="alert alert-danger">
<h3>Danger! </h3>
<p>This
alert box could indicate a
dangerous or potentially negative
action.</p>
</div>
<div class="alert alert-warning">
<h3>Warning!</h3>
Bootstrap Alerts
<p>This alert box could indicate a
warning that might need attention
</p>
</div>
<div class="alert alert-success">
<h3>Success!</h3>
<p>This alert box could indicate a
successful or positive action.</p>
</div>
<div class="alert alert-primary">
<h3>Primary!</h3>
<p>Indicates an important
action.</p>
</div>
</div>
Bootstrap Image Class
<div class="container m-3">
<img src="cinqueterre.jpg" class="rounded"
alt="Cinque Terre" width="300" >
<img src="cinqueterre.jpg"
class="rounded-circle" alt="Cinque Terre"
width="300" > <br><br>
<img src="cinqueterre.jpg"
class="img-thumbnail" alt="Cinque Terre"
width="300" height="236">
<!--Thumbnails are reduced-size
versions of pictures or videos, used to help
in recognizing and organizing them-->
</div>
Class Task
Design an Image Gallery Similar to the one below using
Bootstrap
Bootstrap Table
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>[email protected]</td>
</tr>
<tr> <!--Other Bootstrap table
<td>Mary</td> classes include
<td>[email protected]</td>
</tr> table-hover
<tr> table-dark
<td>July</td> table-bordered
<td>[email protected]</td> table-borderless
</tr>
</tbody> table striped etc.-->
</table>
More Bootstrap Table Classes
Class Description
.table-primary Blue: Indicates an important action
.table-success Green: Indicates a successful or positive action

.table-danger Red: Indicates a dangerous or potentially negative


action
.table-info Light blue: Indicates a neutral informative change or
action
.table-warning Orange: Indicates a warning that might need attention

.table-active Grey: Applies the hover color to the table row or table
cell
.table-secondary Grey: Indicates a slightly less important action

.table-light Light grey table or table row background

.table-dark Dark grey table or table row background

You might also like