Web Technologies

Bootstrap
 Summary of Today’s Lecture
• Bootstrap Introduction
• Bootstrap Grid System
• Bootstrap Grid Classes
• Bootstrap Grid Example (Photo Gallery)
• Bootstrap Column Layouts (Examples)
• Bootstrap Components (Examples)
– Navbar
– Jumbotron
– Breadcrumb
– Tables
– Buttons
– Forms
• Responsive Web Design Example (Restaurant Web Portal )
• 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.
 What is Bootstrap
• Bootstrap is a free and open-source CSS framework directed at
responsive, mobile-first front-end web development.
• It contains CSS- and (optionally) JavaScript-based design templates
for typography, forms, buttons, navigation, and other interface
components.
• It is a powerful front-end framework that helps create websites
faster and easier.
• It was released as an open source product in August 2011 on
GitHub.
 Bootstrap 5
• Bootstrap 5 is the newest version of Bootstrap, which is the most
popular HTML, CSS, and JavaScript framework for creating
responsive, mobile-first websites.
• Bootstrap 5 supports the latest, stable releases of all major
browsers and platforms. However, Internet Explorer 11 and down
is not supported.
• The main differences between Bootstrap 5 and Bootstrap 3 & 4, is
that Bootstrap 5 has switched to JavaScript instead of jQuery.
• Also, it has an xxl device breakpoint along with many new classes
to add styles on our HTML elements.
 What is Grid
• In graphic design, a grid is a structure (usually two-dimensional)
made up of a series of intersecting straight (vertical, horizontal)
lines used to structure content.
• Bootstrap includes a responsive, mobile first grid system that
appropriately scales up to 12 columns as the device or viewport size
increases.
• Bootstrap 4 is mobile first in the sense that the code for Bootstrap
now starts by targeting smaller screens like mobile devices, tablets,
and then “expands” components and grids for larger screens such
as laptops, desktops.
How do grid systems work?
 Adding Bootstrap Framework
• Two ways of adding boostrap framework to the HTML file,
• Bootstrap CDN (Content Delivery Network)
• <!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/
css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/
js/bootstrap.bundle.min.js"></script>
•
Add as a separate file by downloading it first
– <link rel="stylesheet"
href="bootstrap.min.css">
– To download and host, go to https://getbootstrap.com/, and follow the
instructions there.
 Working of Bootstrap grid System
• Rows must be placed within a .container class for proper
alignment and padding.
• Use rows to create horizontal groups of columns.
• Content should be placed within columns, and only columns may be
immediate children of rows.
• Predefined grid classes like .row and .col-sm-4 are available
for quickly making grid layouts.
• Grid columns are created by specifying the number of twelve
available columns you wish to span. For example, three equal
columns would use three .col-sm-4.
 Container

<div class=“container”> … </div>

element is added to ensure proper centering and width for layout.
 .container vs .container-fluid
• The .container class provides a responsive fixed width container.

• The .container-fluid class provides a full width container, spanning

the entire width of the viewport (width is always 100%).
.container vs .container-fluid
 Row

Once container is added, next you need think in terms of rows.

Add <div class=“row”>... </div> inside container.
 Columns

Every row in the grid is made up of 12 units and you can define the
desired size of your columns using those units.
In our example we have defined one column each 4 units wide.
 Grid Classes
• The Bootstrap 4 grid system has five classes:
– .col- (extra small devices - screen width less than 576px)
– .col-sm- (small devices - screen width equal to or greater than 576px)
– .col-md- (medium devices - screen width equal to or greater than 768px)
– .col-lg- (large devices - screen width equal to or greater than 992px)
– .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
• The classes above can be combined to create more dynamic and
flexible layouts.
 Responsive breakpoints
• Bootstrap is developed to be mobile first, we use a handful of
media queries to create sensible breakpoints for our layouts and
interfaces.
• These breakpoints are mostly based on minimum viewport widths
and allow us to scale up elements as the viewport changes.
 Basic Structure of Bootstrap Grid
• <div class=“container”>
– <div class="row">
• <div class="col-*-*"></div>
• </div>
• <div class="row">
• <div class="col-*-*"></div>
• <div class="col-*-*"></div>
• <div class="col-*-*"></div>
• </div>
• <div class="row">
...
• </div>
• </div>
 Extra Small Grid Example

• <div class="container">
<div class="row">
<div class="col-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
 Small Grid Example

• <div class="container">
<div class="row">
<div class="col-sm-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
 Medium Grid Example

• <div class="container">
<div class="row">
<div class="col-sm-3 col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
 Large Grid Example

• <div class="container">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
 Extra Large Grid Example

• <div class="container">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
• <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-
xl-2">
• <a href="photo1.html"><img class="photo_list"
src="./images/img_1.jpg" alt="graffiti cover
image"/></a></div>
• <div class="col-12 col-sm-6 col-md-4 col-lg-3
col-xl-2">
• <a href="photo1.html"><img class="photo_list"
src="./images/img_1.jpg" alt="graffiti cover
image"/></a></div>
• <div class="col-12 col-sm-6 col-md-4 col-lg-3
col-xl-2">
• <a href="photo1.html"><img class="photo_list"
src="./images/img_1.jpg" alt="graffiti cover
image"/></a></div>
• <div class="col-12 col-sm-6 col-md-4 col-lg-3
col-xl-2">
• <a href="photo1.html"><img class="photo_list"
src="./images/img_1.jpg" alt="graffiti cover
image"/></a></div>
• <div class="col-12 col-sm-6 col-md-4 col-lg-3
col-xl-2">
• <a href="photo1.html"><img class="photo_list"
src="./images/img_1.jpg" alt="graffiti cover
image"/></a></div>
 Example (Auto Column Layout)
• <!-- Two columns: 50% width-->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>

<!-- Four columns: 25% width-->

<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
 Example (Three equal columns)
• Get three equal-width columns starting at desktops and scaling to
large desktops.
• On mobile devices, tablets and below, the columns will automatically
stack.
• <div class="container">
– <div class="row">
• <div class="col-md-4" style="background-
color:lavender;">.col-md-4</div>
• <div class="col-md-4" style="background-
color:lavenderblush;">.col-md-4</div>
• <div class="col-md-4" style="background-
color:lavender;">.col-md-4</div>
– </div>
• </div>
 Example (Three unequal Columns)
• <div class="container">
– <div class="row">
• <div class="col-md-3" style="background-
color:lavender;">.col-md-3</div>
• <div class="col-md-6" style="background-
color:lavenderblush;">.col-md-6</div>
• <div class="col-md-3" style="background-
color:lavender;">.col-md-3</div>
– </div>
• </div>
 Example (Two nested columns)
• <div class="container">
– <div class="row">
• <div class="col-md-8" style="background-
color:lavender;">.col-md-8
– <div class="row">
» <div class="col-md-6" style="background-
color:lightcyan;">.col-md-6</div>
» <div class="col-md-6" style="background-
color:lightgray;">.col-md-6</div>
– </div>
• </div>
• <div class="col-md-4" style="background-
color:lavenderblush;">.col-md-4</div>
– </div>
• </div>
 Example (Column breaks)
• <div class="row">
• <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
• <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

• <!-- Force next columns to break to new line -->

• <div class="w-100"></div>

• <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

• <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
• </div>
 Example (Offsetting Column)
• <div class="container">
– <div class="row">
• <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .col-sm-
offset-2 .col-md-6 .col-md-offset-0</div>
• <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
– </div>
• </div>
 Example (Offsetting Column)
• <div class="row">
• <div class="col-md-4">.col-md-4</div>
• <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
• </div>
• <div class="row">
• <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
• <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
• </div>
• <div class="row">
• <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
• </div>
 Bootstrap Jumbotron
• A jumbotron is used to showcase key content on a website.
• It indicates a big grey box for calling extra attention to some special content or information.
• <div class="container">
• <div class="jumbotron">
• <h1>Bootstrap Tutorial</h1>
• <p>Bootstrap is the most popular HTML, CSS, and JS
framework for developing responsive, mobile-first projects on
the web.</p>
• </div>
• <p>This is some text.</p>
• <p>This is another text.</p>
• </div>
 Bootstrap Jumbotron
• <div class="jumbotron">
• <div class="container">
• <h1>Bootstrap Tutorial</h1>
• <p>Bootstrap is the most popular HTML, CSS, and JS
framework for developing responsive, mobile-first projects on
the web.</p>
• </div>
• </div>

• <div class="container">
• <p>This is some text.</p>
• <p>This is another text.</p>
• </div>
 Bootstrap Buttons
• <div class="container">
– <button type="button" class= "btn btn-primary">hello click
me</button>
– <button type="button" class= "btn btn-seondary">hello click
me</button>
– <button type="button" class= "btn btn-success">hello click
me</button>
– <button type="button" class= "btn btn-danger">hello click
me</button>
– <button type="button" class= "btn btn-info">hello click
me</button>
– <button type="button" class= "btn btn-light disabled">hello click
me</button>
– <button type="button" class= "btn btn-outline-danger btn-
sm">hello click me</button>
• </div>
 Buttons groups
• <div class="container">
• <h2>Button Group</h2>
• <p>The .btn-group class creates a button group:</p>
• <div class="btn-group">
• <button type="button" class="btn btn-primary">Apple</button>
• <button type="button" class="btn btn-primary">Samsung</button>
• <button type="button" class="btn btn-primary">Sony</button>
• </div>
• </div>
 Bootstrap Navbar
• <nav class="navbar navbar-expand-sm bg-light">
• <ul class="navbar-nav">
• <li class="nav-item">
• <a class="nav-link" href="#">Link 1</a>
• </li>
• <li class="nav-item">
• <a class="nav-link" href="#">Link 2</a>
• </li>
• <li class="nav-item">
• <a class="nav-link" href="#">Link 3</a>
• </li>
• </ul>
• </nav>
 Navbar Options
• <nav class="navbar navbar-expand-sm bg-light justify-
content-center">
...
</nav>

• <nav class="navbar navbar-expand-sm bg-dark navbar-

dark">...</nav>
• Use any of the .bg-color classes to change the background color of the
navbar (.bg-primary, .bg-success, .bg-info, .bg-
warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light)
• Add a white text color to all links in the navbar with the .navbar-dark
class, or use the .navbar-light class to add a black text color.
 Navbar Options
• <nav class="navbar navbar-expand-sm bg-dark navbar-
dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="Logo" style="width:40px;">
</a>
...
</nav>

• Top Fixed Navbar

• <nav class="navbar navbar-expand-sm bg-dark navbar-dark
fixed-top">
...
</nav>
• Bottom Fixed Navbar
• <nav class="navbar navbar-expand-sm bg-dark navbar-dark
fixed-bottom">
...
</nav>
 Bootstrap Breadcrumb
• Breadcrumb indicates the current page’s location within a navigational hierarchy.
• <nav>
• <ol class="breadcrumb">
• <li class="breadcrumb-item active">Home</li>
• </ol>
• </nav>

• <nav>
• <ol class="breadcrumb">
• <li class="breadcrumb-item"><a href="#">Home</a></li>
• <li class="breadcrumb-item active">Library</li>
• </ol>
• </nav>

• <nav>
• <ol class="breadcrumb">
• <li class="breadcrumb-item"><a href="#">Home</a></li>
• <li class="breadcrumb-item"><a href="#">Library</a></li>
• <li class="breadcrumb-item active">Data</li>
• </ol>
• </nav>
 Bootstrap Tables
•
• <table class="table">
• <thead><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>
 Bootstrap Table (Striped)
• <table class="table table-striped">
• <thead>
• <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>
 Bootstrap Forms (Stacked)
• <div class="container">
• <form>
– <div class= "form-group">
• <label for="user"> studentname: </label>
• <input type="text" name="" id="user" class="form-control">
– </div>
– <div class= "form-group">
• <label for="password"> Password: </label>
• <input type="text" name="" id="password" class="form-control">
– </div>
– <div class= "form-group">
• <label for="email"> Email: </label>
• <input type="text" name="" id="" class="form-control">
– </div>
– <input type="submit" name="" class= "btn btn-success">
• </form>
 Bootstrap Forms (Inline)
• <div class="container">
• <form class=“form-inline”>
– <div class= "form-group">
• <label for="user"> studentname: </label>
• <input type="text" name="" id="user" class="form-control">
– </div>
– <div class= "form-group">
• <label for="password"> Password: </label>
• <input type="text" name="" id="password" class="form-control">
– </div>
– <div class= "form-group">
• <label for="email"> Email: </label>
• <input type="text" name="" id="" class="form-control">
– </div>
– <input type="submit" name="" class= "btn btn-success">
• </form>
• </div>
Restaurant Portal (Extra-Small Screen)
Home.html
Restaurant Portal (Small Screen)
Home.html
Restaurant Portal (Small Screen)
Aboutus.html
Restaurant Portal (Small Screen)
Contactus.html
Restaurant Portal (Small Screen)
Contactus.html
 Summary of Today’s Lecture
• Bootstrap Introduction
• Bootstrap Grid System
• Bootstrap Grid Classes
• Bootstrap Grid Example (Photo Gallery)
• Bootstrap Column Layouts (Examples)
• Bootstrap Components (Examples)
– Navbar
– Jumbotron
– Breadcrumb
– Tables
– Buttons
– Forms
• Responsive Web Design Example (Cuisine Web Portal )
 References
• https://getbootstrap.com/docs/4.5/getting-started/introduction/
• https://getbootstrap.com/docs/4.4/layout/grid/
• https://www.w3schools.com/bootstrap4/bootstrap_grid_system.as
p
• https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
• https://v5.getbootstrap.com/docs/5.0/getting-started/introduction
/