Scribd
Upload
32 views86 pages

305 Unit2

Classic notes

Uploaded by

fravat35
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
32 views86 pages

305 Unit2

Classic notes

Uploaded by

fravat35
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/ 86

UNIT 2 : DESIGN WEBSITES USING

BOOTSTRAP4
2.1. Bootstrap Introduction
2.2. Grid Structure
2.3. Table, Colours, Alerts, Form Controls
2.4. Buttons and Button Groups
2.5 Images, Media Objects
2.6 Pagination
2.7 Bootstrap Grids
2.8 Bootstrap Themes
2.1 Bootstrap Introduction
 Bootstrap is the most popular HTML,
CSS, and JavaScript framework for
developing responsive, mobile-first
websites.
 Bootstrap is completely free to download
and use!
 Bootstrap is a front-end framework
that is developed to support creating
dynamic websites and web
applications.
 Bootstrap is a free front-end framework
for faster and easier web development
 Bootstrap includes HTML and CSS based
design templates for typography, forms,
buttons, tables, navigation, modals,
images and many other, as well as
optional JavaScript plugins.
 Bootstrap also gives you the ability to
easily create responsive designs.
Bootstrap History
 Bootstrap was developed by Mark Otto
and Jacob Thornton at Twitter, and
released as an open source product in
August 2011 on GitHub.
 In June 2014 Bootstrap was the
No.1 project on GitHub!
What is Responsive Web Design?
 Responsive web design is about
creating web sites which
automatically adjust themselves to
look good on all devices, from small
phones to large desktops.
Advantages / Importance of
Bootstrap
 Easy to use
 Responsive feature
 Mobile-first Approach
 Browser Compatibility
 Customizable
 Simple Integration
 Pre-styled Components
Advantages of Bootstrap:
 Easy to use: Anybody with just basic
knowledge of HTML and CSS can start
using Bootstrap
 Responsive features: Bootstrap's
responsive CSS adjusts to phones,
tablets, and desktops
 Mobile-first approach: In Bootstrap 3,
mobile-first styles are part of the core
framework
 Browser compatibility: Bootstrap is
compatible with all modern browsers
(Chrome, Firefox, Internet Explorer,
Edge, Safari, and Opera)
 Customizable: Bootstrap facilitates
customization and helps developers in designing
websites, according to their specifications. It has
the facility to select any feature that is actually
needed to create a customized website. With this
feature, one can get rid of what they do not
require.
 Simple Integration: Bootstrap can be simply
integrated along with distinct other platforms
and frameworks, on existing sites and new ones
too. You can also utilize particular elements of
Bootstrap along with your current CSS.
 Pre-styled Components : Bootstrap approaches
with pre-styled components for alerts,
dropdowns, nav bars, etc. Hence, being a
feature-rich, Bootstrap provides numerous
advantages of using it.
Where to Get Bootstrap?
 Download Bootstrap from
getbootstrap.com
 Include Bootstrap from a CDN
 Just click on Download button
Bootstrap CDN
 If you don't want to download and
host Bootstrap yourself, you can
include it from a CDN (Content
Delivery Network).
 Get link from
 https://www.bootstrapcdn.com/
 <link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x
9JvoRxT2MZw1T" crossorigin="anonymous">
2.2 Grid Structure
 Bootstrap's grid system allows up to
12 columns across the page.
 If you do not want to use all 12 column
individually, you can group the
columns together to create wider
columns:
 Bootstrap's grid system is responsive,
and the columns will re-arrange
depending on the screen size: On a
big screen it might look better with the
content organized in three columns,
but on a small screen it would be
better if the content items were
stacked on top of each other.
Grid Classes
 xs (for phones - screens less than
768px wide)
 sm (for tablets - screens equal to or
greater than 768px wide)
 md (for small laptops - screens equal
to or greater than 992px wide)
 lg (for laptops and desktops - screens
equal to or greater than 1200px wide)
Example
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">
</head>
<body>
<div class="form-group col-sm-6">
<label >First Name:</label>
<input type="text" required class="form-control">
</div>
<div class="form-group col-sm-3">
<label >Last Name:</label>
<textarea class="form-control"></textarea>
</div>
</body>
</html>
Output
2.3. Table, Colours, Alerts,
Form Controls
Table
 A basic Bootstrap table has a light
padding and only horizontal dividers.
 The .table class adds basic styling to a
table:
Table Classes
 .table
 .table-striped
 .table-bordered
 .table-hover
Example: table
<html>
<head>
<link rel="stylesheet" href="bootstrap-4.4.1-dist\css\bootstrap.min.css">
</head>
<body>
<table class="table">
<tr>
<td>Sr. No</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>Bhavin</td>
</tr>
<tr>
<td>2</td>
<td>Vivek</td>
</tr>
<tr>
<td>3</td>
<td>Abhi</td>
</tr>
</table>
</body>
</html>
Output
Example: table-striped
<html>
<head>
<link rel="stylesheet" href="bootstrap-4.4.1-dist\css\bootstrap.min.css">
</head>
<body>
<table class="table table-striped">
<tr>
<td>Sr. No</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>Bhavin</td>
</tr>
<tr>
<td>2</td>
<td>Vivek</td>
</tr>
<tr>
<td>3</td>
<td>Abhi</td>
</tr>
</table>
</body>
</html>
Output
Example: table-bordered
<html>
<head>
<link rel="stylesheet" href="bootstrap-4.4.1-dist\css\bootstrap.min.css">
</head>
<body>
<table class="table table-bordered">
<tr>
<td>Sr. No</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>Bhavin</td>
</tr>
<tr>
<td>2</td>
<td>Vivek</td>
</tr>
<tr>
<td>3</td>
<td>Abhi</td>
</tr>
</table>
</body>
</html>
Output
Example: table-hover
<html>
<head>
<link rel="stylesheet" href="bootstrap-4.4.1-dist\css\bootstrap.min.css">
</head>
<body>
<table class="table table-hover">
<tr>
<td>Sr. No</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>Bhavin</td>
</tr>
<tr>
<td>2</td>
<td>Vivek</td>
</tr>
<tr>
<td>3</td>
<td>Abhi</td>
</tr>
</table>
</body>
</html>
Output
Colors
 Bootstrap 4 has some contextual
classes that can be used to provide
"meaning through colors".
Classes
 .text-muted
 .text-primary
 .text-success
 .text-info
 .text-warning
 .text-danger
 .text-secondary
 .text-white
 .text-dark
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<div class="text-muted">SYBCA The Great Class</div>
<div class="text-primary">SYBCA The Great Class</div>
<div class="text-success">SYBCA The Great Class</div>
<div class="text-info">SYBCA The Great Class</div>
<div class="text-warning">SYBCA The Great Class</div>
<div class="text-danger">SYBCA The Great Class</div>
<div class="text-secondary">SYBCA The Great Class</div>
<div class="text-white">SYBCA The Great Class</div>
<div class="text-dark">SYBCA The Great Class</div>
</body>
</html>
Output:
Alert
 Bootstrap provides an easy way to
create predefined alert messages.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<div class="alert alert-success">
Indicates a successful or positive action.
</div>
<div class="alert alert-info">
Indicates a Informative Change.
</div>
<div class="alert alert-warning">
Indicates a Warning action.
</div>
<div class="alert alert-danger">
Indicates a dangerous or potentially negative action.
</div>
</body>
</html>
OUTPUT
Form Controls
 Form controls automatically receive
some global styling with Bootstrap:
 All textual <input>, <textarea>,
and <select> elements with
class .form-control have a width of
100%.
Bootstrap Form Layouts
 Bootstrap provides three types of form
layouts:
 Vertical form (this is default)
 Horizontal form
 Inline form
 Standard rules for all three form
layouts:
 Wrap labels and form controls in <div
class="form-group"> (needed for optimum
spacing)
 Add class .form-control to all
textual <input>, <textarea>,
and <select> elements
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<form>
<div class="form-group col-sm-6">
<label >First Name:</label>
<input type="text" required class="form-control">
</div>
<div class="form-group col-sm-6">
<label >Last Name:</label>
<input type="text" required class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn">Save</button>
</div>

</body>
</html>
Output:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
Output:
2.4. Buttons and Button Groups
Buttons
 Bootstrap provides different styles of
buttons:
Classes
 .btn
 .btn-default
 .btn-primary
 .btn-success
 .btn-info
 .btn-warning
 .btn-danger
 .btn-link
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>
</body>
</html>
Output:
Button Groups
 Group a series of buttons together on a
single line with the button group, and
super-power them with JavaScript.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">
</head>
<body>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
</body>
</html>
Output:
Button toolbar
 Combine sets of button groups into
button toolbars for more complex
components. Use utility classes as
needed to space out groups, buttons,
and more.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">
</head>
<body>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
</body>
</html>
Output:
Vertical Buttons:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">
</head>
<body>
<div class="btn-group-vertical" >
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>
</div>

</div>
</body>
</html>
Output:
2.5 Images, Media Objects
 Images in Bootstrap are made
responsive with .img-fluid. max-width:
100%; and height: auto; are applied to
the image so that it scales with the
parent element.
 rounded-circle
 img-thumbnail
 img-fluid
Example:
<HTML>

<head>
<title>welcome to sybca</title>
<link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css">
</head>

<body>
<h1>vtcbb</h1>
<img src="Main5.jpg" CLASS="img-fluid img-thumbnail ROUNDED-
CIRCLE"STYLE="MAX-WIDTH=100%;HEIGHT:AUTO">
</body>
</HTML>
Media Object
 Bootstrap provides an easy way to
align media objects (like images or
videos) to the left or to the right of
some content. This can be used to
display blog comments, tweets and so
on.
 .media
 .media-body
<div class="container mt-3">
<h2>Media Object</h2>
<p>Create a media object with the .media and .media-body classes:</p>
<div class="media border p-3">
<img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-
circle" style="width:60px;">
<div class="media-body">
<h4>John Doe <small><i>Posted on February 19,
2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
Top, Middle or Bottom
Alignment
 .align-self-start
 .align-self-center
 .align-self-end
Example:
<div class="media">
<img src="img_avatar1.png" class="align
-self-start mr-3" style="width:60px">
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
2.6 Pagination
 If you have a web site with lots of
pages, you may wish to add some sort
of pagination to each page.
 To create a basic pagination, add the
.pagination class to an <ul> element:
 .pagination
 .pagination-lg or .pagination-sm
 .breadcrumb
 .active
 .disabled
CLASSES
 <UL>
 .pagination
 <LI>
 .page-item
 <A>
 .page-link
 <ul class="pagination">
<li class="page-item"><a class="page-
link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-
ink" href="#">Next</a></li>
</ul>
Active State
 The .active class is used to "highlight"
the current page:
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
Pagination Sizing
 Add class .pagination-lg for larger
blocks or .pagination-sm for smaller
blocks:
Example:
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

<ul class="pagination pagination-sm">


<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
Breadcrumbs
 The .breadcrumb and .breadcrumb-
item classes indicates the current
page's location within a navigational
hierarchy:
Example:
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
Output:
2.7 Bootstrap Grids
 Bootstrap's grid system allows up to
12 columns across the page.
 If you do not want to use all 12 column
individually, you can group the
columns together to create wider
columns:
 Bootstrap's grid system is responsive,
and the columns will re-arrange
depending on the screen size: On a
big screen it might look better with the
content organized in three columns,
but on a small screen it would be
better if the content items were
stacked on top of each other.
Grid Classes
 xs (for phones - screens less than
768px wide)
 sm (for tablets - screens equal to or
greater than 768px wide)
 md (for small laptops - screens equal
to or greater than 992px wide)
 lg (for laptops and desktops - screens
equal to or greater than 1200px wide)
Example
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">
</head>
<body>
<div class="form-group col-sm-6">
<label >First Name:</label>
<input type="text" required class="form-control">
</div>
<div class="form-group col-sm-3">
<label >Last Name:</label>
<textarea class="form-control"></textarea>
</div>
</body>
</html>
Output
2.8 Bootstrap Themes

You might also like