Web Designing - II

1(Theory) + 1(Practical)
Teaching by Prof. Shivani Kania
Unit 1: Introduction to Design Framework
• 1.1 Bootstrap Basics, Need, Advantages and Disadvantages
• Bootstrap is a free and open-source CSS framework directed at
responsive, mobile-first front-end web development. It
contains HTML, CSS and (optionally) JavaScript-based design
templates for typography, forms, buttons, navigation, and other
interface components.
• Bootstrap is an HTML, CSS and JS library that focuses on simplifying
the development of informative web pages (as opposed to web
applications). The primary purpose of adding it to a web project is to
apply Bootstrap's choices of color, size, font and layout to that
project.
Overview of Bootstrap design framework:
• Bootstrap is a front-end framework that helps you design web
interfaces with ready-made CSS and JavaScript components for
common elements like navigation, forms, and buttons.
• It also has a responsive grid layout system that adjusts your site for
devices with different screen sizes, such as phones and tablets. Using
the Bootstrap layout system, you can create a single site that looks
good on any device your customers might use.
• Power Pages templates use standard Bootstrap components with
minimal custom styles. Using these templates, you can easily change
the theme (fonts, colors, and so on) to match your brand and
preferences consistently across your entire site.
•Bootstrap, originally named Twitter Blueprint, was developed
by Mark Otto and Jacob Thornton at Twitter as a framework
to encourage consistency across internal tools.
•Bootstrap 2
On January 31, 2012, Bootstrap 2 was released.
•Bootstrap 3
On August 19, 2013, Bootstrap 3 was released.
•Bootstrap 4
Otto announced Bootstrap 4 on October 29, 2014.
•Bootstrap 5
Bootstrap 5 was officially released on May 5, 2021.
• It's designed to ease the web development process of responsive,
mobile-first websites by providing a collection of syntax for template
designs. In other words, Bootstrap helps web developers build websites
faster as they don't need to worry about basic commands and functions.
• Advantages of Bootstrap:
• Responsive Design:
Bootstrap provides a grid system and responsive classes, making it easy to
create mobile-friendly and adaptive designs across various screen sizes.
• Pre-Designed Components:
It includes a wide range of pre-designed UI components like buttons, forms,
modals, carousels, and navigation bars, reducing development time.
• Cross-Browser Compatibility:
Bootstrap ensures consistent performance and appearance across major
web browsers like Chrome, Firefox, Safari, and Edge.
• Customizability:
Developers can easily customize Bootstrap by overriding default styles
or using the SASS/SCSS variables provided by the framework.
• Documentation and Community Support:
Comprehensive documentation and an active community make it
beginner-friendly and provide quick solutions to issues.
• Time-Saving:
The ready-to-use components and pre-built utilities allow developers
to create functional designs quickly.
• Open Source and Free:
Bootstrap is an open-source framework, making it accessible to
everyone without cost.
• Integration with Other Tools:
It integrates seamlessly with popular libraries and frameworks like
jQuery and React.
• Disadvantages of Bootstrap
• Heavy Dependency on Classes:
To achieve styling, Bootstrap relies heavily on adding multiple classes
to HTML elements, which can make the code cluttered and harder to
maintain.
• Design Similarity:
Websites built using Bootstrap often look similar because of the
predefined styles and components unless customized significantly.
• Learning Curve:
While documentation is helpful, beginners may find it challenging to
understand the grid system and customization techniques initially.
• Overhead:
Including the entire Bootstrap library for small projects can add
unnecessary weight to the application, affecting performance.
• Customization Challenges:
Customizing deeply nested styles or overriding default styles can be
complex and time-consuming.
• Browser-Specific Issues:
Although Bootstrap is cross-browser compatible, some features may
not work as intended on older browser versions.
• JavaScript Dependency:
Some Bootstrap components rely on jQuery, which may not align with
modern JavaScript practices or lightweight frameworks.
• Less Tailored Designs:
Developers relying solely on Bootstrap may produce designs that lack
creativity or uniqueness, as opposed to creating designs from scratch.
• 1.2 Bootstrap Grid System Structure
• Bootstrap's grid system is built with flexbox and allows up to 12
columns across the page.
• If you do not want to use all 12 columns individually, you can group
the columns together to create wider columns:
•
• The grid system is responsive, and the columns will re-arrange
automatically depending on the screen size.
• Make sure that the sum adds up to 12 or fewer (it is not required that
you use all 12 available columns).
• The basic layout component is called "Container", as every other
element in the page is placed in it. Developers can choose between a
fixed-width container and a fluid-width container.
•
The Bootstrap 5 grid system has six 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)

.col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)

The classes above can be combined to create more dynamic and flexible layouts.
• <!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
• First example: create a row (<div class="row">). Then, add the desired
number of columns (tags with appropriate .col-*-* classes). The first
star (*) represents the responsiveness: sm, md, lg, xl or xxl, while the
second star represents a number, which should add up to 12 for each
row.

• Second example: instead of adding a number to each col, let

bootstrap handle the layout, to create equal width columns: two "col"
elements = 50% width to each col, while three cols = 33.33% width to
each col. Four cols = 25% width, etc. You can also use
.col-sm|md|lg|xl|xxl to make the columns responsive.

• Below we have collected some examples of basic Bootstrap grid

layouts.
• Basic Table
• A basic Bootstrap 5 table has a light padding and horizontal dividers.
• The .table class adds basic styling to a table:
• Example in VS code.
• Button Styles
• Bootstrap 5 provides different styles of buttons: code in VScode
• Bootstrap Image Shapes
• Rounded Corners
The .img-rounded class adds rounded corners to an image (IE8 does not
support rounded corners):
Example:
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre“>
• Circle
The .img-circle class shapes the image to a circle (IE8 does not support
rounded corners):
Example:
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre">
• Thumbnail
The .img-thumbnail class shapes the image to a thumbnail:
Example:
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
• Helper classic:

• Use the ratio helper to manage the aspect ratios of external content
like <iframe>s, <embed>s, <video>s, and <object>s. These helpers
also can be used on any standard HTML child element (e.g., a <div> or
<img>). Styles are applied from the parent .ratio class directly to the
child.
• Code:<div class="ratio ratio-16x9">
• <iframe
src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"
title="YouTube video" allowfullscreen></iframe>
• </div>
• Responsive Utilities,Layout:
• Reference link:
https://getbootstrap.com/docs/5.0/utilities/background/
• Components-
• 1. Dropdown
• A dropdown menu is a toggleable menu that allows the user to
choose one value from a predefined list:
• <div class="dropdown">
• <button class="btn btn-primary dropdown-toggle" type="button"
data-bs-toggle="dropdown">Dropdown Example
• <span class="caret"></span></button>
• <ul class="dropdown-menu">
• <li><a href="#">HTML</a></li>
• <li><a href="#">CSS</a></li>
• <li><a href="#">JavaScript</a></li>
• </ul>
• </div>
• Button Groups
• Bootstrap allows you to group a series of buttons together (on a
single line) in a button group:

• <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>
• Pagination is built with list HTML elements so screen readers can announce
the number of available links. Use a wrapping <nav> element to identify it
as a navigation section to screen readers and other assistive technologies.
• <nav aria-label="Page navigation example">
• <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-link" href="#">Next</a></li>
• </ul>
• </nav>
 Alerts
• Bootstrap provides an easy way to create predefined alert messages:
• <div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>

• <div class="alert alert-info">

<strong>Info!</strong> Indicates a neutral informative change or action.
</div>

• <div class="alert alert-warning">

<strong>Warning!</strong> Indicates a warning that might need attention.
</div>

• <div class="alert alert-danger">

<strong>Danger!</strong> Indicates a dangerous or potentially negative
action.
</div>