UNIT III: BOOTSTRAP

FUNDAMENTALS

Contents: BOOTSTARP FUNDAMENTALS: Why Bootstrap, CSS over Bootstrap, How to Use Bootstrap. Bootstrap

Grid System, Bootstrap Responsive, Bootstrap Classes, Bootstrap Components (i.e., Button, Table, List, etc.),

Bootstrap as a Cross Platform. W3C FUNDAMENTALS: What is W3C, How W3C handles /Supports Web

Technologies

10/18/2024 1
 BOOTSTRAP

10/18/2024 2
 BOOTSTRAP

❑Bootstrap is the most popular open-source front-end framework.

❑ It is developed by Mark Otto, Jacob Thornton 19 August 2011.

❑Bootstrap includes HTML and CSS based design templates for

typography, forms, buttons, tables, navigation, modals, image
carousels and many other, as well as optional JavaScript plugins

❑It generally works on a grid system for creating page layout with
the help of rows and columns and it supports all browsers for
creating responsive websites.
10/18/2024 3
 BOOTSTRAP
• Here are some key features of Bootstrap:
1.Grid System: Bootstrap uses a flexible grid system that allows for responsive layouts.
You can create various column arrangements that adapt to different screen sizes.
2.Pre-designed Components: It includes a wide range of reusable components like
buttons, modals, navbars, alerts, and more, which can be easily customized.
3.Responsive Design: Bootstrap ensures that your website looks good on all devices,
from mobile phones to large desktop monitors.
4.JavaScript Plugins: The framework comes with built-in JavaScript components for
functionality like carousels, tooltips, and dropdowns, enhancing user interaction.
5.Customizable: You can easily customize Bootstrap's styles using variables, allowing
you to tailor the look and feel to match your branding.
6.Documentation: Bootstrap has comprehensive documentation and a large
community, making it easy to find support and resources.
10/18/2024 4
Difference between Bootstrap 5, Bootstrap 4 and Bootstrap 3.

5
Difference between Bootstrap 5, Bootstrap 4 and Bootstrap 3.

6
Why Use Bootstrap?
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)

7
 Getting Started with Bootstrap
Where to Get Bootstrap?

There are two ways to start using Bootstrap on your own web site.
You can:
❑Download Bootstrap from getbootstrap.com
❑Include Bootstrap from a CDN

(You can either include it via a Content Delivery Network

(CDN) Once integrated, you can use Bootstrap's classes in your
HTML to create styled elements quickly.)
Downloading Bootstrap
go to getbootstrap.com, and follow the instructions there.

10/15/2024 8
 Getting Started with Bootstrap
Bootstrap CDN
• MaxCDN provides CDN support for Bootstrap's CSS and
JavaScript. You must also include jQuery:

10/15/2024 9
Bootstrap CDN …
One advantage of using the Bootstrap CDN:
Many users already have downloaded Bootstrap from MaxCDN when
visiting another site. As a result, it will be loaded from cache when they
visit your site, which leads to faster loading time. Also, most CDN's will
make sure that once a user requests a file from it, it will be served from
the server closest to them, which also leads to faster loading time.

jQuery
Bootstrap uses jQuery for JavaScript plugins (like modals, tooltips, etc).
However, if you just use the CSS part of Bootstrap, you don't need
jQuery.

10
 Getting Started with Bootstrap
Create First Web Page With Bootstrap
1. Add the HTML5 doctype
• Bootstrap uses HTML elements and CSS properties that require the HTML5
doctype.
• Always include the HTML5 doctype at the beginning of the page, along with
the lang attribute and the correct character set:

10/15/2024 11
 Getting Started with Bootstrap
Create First Web Page With Bootstrap
2. Bootstrap 3 is mobile-first :
❑Bootstrap 3 is designed to be responsive to mobile devices.
❑To ensure proper rendering and touch zooming, add the following <meta> tag
inside the <head> element:

<meta name="viewport" content="width=device-width, initial-

scale=1">
• The width=device-width part sets the width of the page to follow the screen-width of the
device (which will vary depending on the device).
• The initial-scale=1 part sets the initial zoom level when the page is first loaded by the
browser.

10/18/2024 12
 Getting Started with Bootstrap
Create First Web Page With Bootstrap
3. Containers
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:
❑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

10/18/2024 13
 Bootstrap Grid System
• Bootstrap's grid system 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:

Bootstrap's grid system is responsive, and the columns will re-arrange

automatically depending on the screen size.
10/18/2024 14
 Bootstrap Grid System

Grid Classes
The Bootstrap grid system has four 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)
The classes above can be combined to create more dynamic and flexible layouts.

10/18/2024 15
 Bootstrap Grid System
Basic Structure of a Bootstrap Grid
The following is a basic structure of a Bootstrap grid:

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
If You want to create the layout you want, create a container
</div>
<div class="row"> (<div class="container">). Next, create a row (<div
<div class="col-*-*"></div>
<div class="col-*-*"></div> class="row">). Then, add the desired number of columns
<div class="col-*-*"></div>
</div> (tags with appropriate .col-*-* classes). Note that numbers
<div class="row">
... in .col-*-* should always add up to 12 for each row.
</div>
</div>
10/18/2024 16
 Bootstrap Grid System

10/18/2024 17
 Bootstrap Grid System

10/18/2024 18
Bootstrap Grid System- works across multiple devices:

10/18/2024 19
 Bootstrap Grid - Stacked-to-horizontal
<div class="container"> The following example
<h1>Hello World!</h1>
<div class="row"> shows a simple "stacked-
<div class="col-sm-6" to-horizontal" two-
style="background-
color:yellow;"> column layout, meaning
<p>Lorem ipsum...</p> it will result in a
</div>
<div class="col-sm-6"
50%/50% split on all
style="background- screens, except for extra
color:pink;"> small screens, which it
<p>Sed ut
perspiciatis...</p> will automatically stack
</div> (100%):
</div>
</div>

20
 Bootstrap Grid Example: Small Devices

<div class="container”> The following example will

<h1>Hello World!</h1>
<div class="row">
result in a 25%/75% split
<div class="col-sm-4"
style="background-
on small devices and a
color:yellow;">
<p>Lorem ipsum...</p>
50%/50% split on medium
</div>
<div class="col-sm-8"
(and large) devices. On
style="background-color:pink;"> extra small devices, it will
<p>Sed ut
perspiciatis...</p> automatically stack
</div>
</div> (100%):
</div>
21
Bootstrap Grid Example: Multiple Devices
Class-Small Devices Class-Medium Class-Large Devices

Devices
<div class="container- <div class="row"> <div class="container-
fluid"> <div class="col-md-6" fluid">
<h1>Hello World!</h1> style="background- <h1>Hello World!</h1>
<div class="row"> color:yellow;"> <div class="row">
<div class="col-sm-4" <div class="col-lg-6"
style="background-
<p>Lorem style="background-
color:yellow;"> ipsum...</p> color:yellow;">
<p>Lorem </div> <p>Lorem
ipsum...</p> <div class="col-md-6" ipsum...</p>
</div> style="background- </div>
<div class="col-sm-8" color:pink;"> <div class="col-lg-6"
style="background- <p>Sed ut style="background-
color:pink;"> perspiciatis...</p> color:pink;">
<p>Sed ut </div> <p>Sed ut
perspiciatis...</p> perspiciatis...</p>
</div>
</div> </div> 22
 Bootstrap Text/Typography
1.Bootstrap's Default Settings
Bootstrap's global default font-size is 14px, with a line-height of
1.428.
This is applied to the <body> and all paragraphs.
In addition, all <p> elements have a bottom margin that equals
half their computed line-height (10px by default).
2.Typography
The elements below are HTML elements that will be styled a little bit differently by
Bootstrap than browser defaults. Look at the "Try it" examples to see the
result/differences.

23
 Bootstrap Text/Typography
Bootstrap's Default Settings
• Bootstrap's global default font-size is 14px, with a line-height of 1.428.
• This is applied to the <body> element and all paragraphs (<p>).

<h1> - <h6>
By default, Bootstrap will style the HTML headings (<h1> to <h6>) in the following way:

Example
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

10/18/2024 24
 Bootstrap Text/Typography

10/18/2024 25
 Bootstrap Text/Typography

10/18/2024 26
 Bootstrap Text/Typography
The classes for background colors are:.bg-primary, .bg-success,
.bg-info, .bg-warning, and .bg-danger:

10/18/2024 27
Bootstrap Text/Typography

28
 Bootstrap Tables
Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table

10/18/2024 29
 Bootstrap Tables
Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table

10/18/2024 30
 Bootstrap Tables

10/18/2024 31
 Bootstrap Tables

10/18/2024 32
 Bootstrap Responsive Tables
The .table-responsive class creates a responsive table.
The table will then scroll horizontally on small devices (under 768px).
When viewing on anything larger than 768px wide, there is no difference:

10/18/2024 33
 Bootstrap Images

Rounded Corners
The .img-rounded class adds rounded corners to an
image

<img src="cinqueterre.jpg" class="img-rounded">

10/18/2024 34
 Bootstrap Image Gallery
Image Gallery
You can also use Bootstrap's grid system in conjunction with the .thumbnail class
to create an image gallery.

<img class="img-responsive" src="imgres.jpg" alt=“India">

10/18/2024 35
 Bootstrap Responsive Images
Images come in all sizes. So do screens.
Responsive images automatically adjust to fit the size of the screen.
Create responsive images by adding an .img-responsive class to the <img> tag.
The image will then scale nicely to the parent element.
The .img-responsive class applies display: block; and max-width: 100%; and height:
auto; to the image:

<img class="img-responsive" src="imgres.jpg" alt=“India">

10/18/2024 36
 Bootstrap Buttons

10/18/2024 37
 Bootstrap Button Groups

10/18/2024 38
 Bootstrap Button Groups
<div class="btn-group-vertical">

10/18/2024 39
 Bootstrap Forms

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

10/18/2024 40
 Bootstrap Forms-Bootstrap Vertical Form (default)
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

10/18/2024 41
 Bootstrap Forms

10/18/2024 42
 Bootstrap Component List:

Basic List Groups Contextual Classes Custom Content

<ul class="list-group"> <div class="list-group">
<ul class="list-group">
<li class="list-group-item list- <a href="#" class="list-group-item
group-item-success">First item</li> active">
<li class="list-group-item">First <li class="list-group-item list- <h4 class="list-group-item-
item</li> group-item-info">Second item</li> heading">First List Group Item
<li class="list-group-item list- Heading</h4>
<li class="list-group-item">Second group-item-warning">Third item</li> <p class="list-group-item-
<li class="list-group-item list- text">List Group Item Text</p>
item</li> group-item-danger">Fourth item</li> </a>
</ul> <a href="#" class="list-group-
<li class="list-group-item">Third item">
item</li> <h4 class="list-group-item-
heading">Second List Group Item
</ul> Heading</h4>
<p class="list-group-item-
text">List Group Item Text</p>
</a>
<a href="#" class="list-group-
item">
<h4 class="list-group-item-
heading">Third List Group Item
Heading</h4>
<p class="list-group-item-
text">List Group Item Text</p>
</a>
</div>

43
 Bootstrap as a Cross Platform
Benefits of Bootstrap as a Cross-Platform Framework:

•Consistency: Ensures that users experience the same interface and functionality across

devices.

•Efficiency: Speeds up development by using ready-made components.

•Adaptability: Works with various platforms, operating systems, and browsers without

extra code for specific platforms.

10/18/2024 44
 W3C FUNDAMENTALS
W3C FUNDAMENTALS: What is W3C

❑ The W3C (World Wide Web Consortium) is the main international standards

organization for the World Wide Web.

❑ It was founded in 1994 by Tim Berners-Lee, the inventor of the web, and is

responsible for developing protocols and guidelines that ensure the long-

term growth and smooth operation of the web.

10/18/2024 45
 W3C FUNDAMENTALS
What are the W3C standards?

• The W3C standards describe the best practices of web

development.

• These range from recommended programming languages

such as HTML and CSS, to the generally accepted principles

of web architecture and services.

10/18/2024 46
 W3C FUNDAMENTALS
Characteristics of W3C
▪ It is responsible for creating and publishing web standards.
▪ It also ensures the growth and development of web.
▪ It also develops the standards for web scripting, web applications
and other dynamic contents.
▪ It is an organization which helps in the promotion of
interoperability by the promotion and designing of open protocols.
▪ W3C uses the principles of modularity, simplicity and extensibility
while designing web protocols.
10/18/2024 47
 W3C FUNDAMENTALS
Key Aspects of the W3C

1. Standardization of Web Technologies

• The W3C develops open standards for web technologies, such as HTML, CSS, XML, and many others,
to promote universal access and interoperability across the web.
• W3C standards ensure that the web remains accessible to everyone, regardless of the device,
software, or browser they are using.

2. Interoperability and Compatibility

• The W3C promotes interoperability, ensuring that different web technologies work together
smoothly. This means that a website or web service works correctly across different platforms,
devices, and browsers.
• Web standards minimize conflicts between proprietary software and ensure that websites remain
functional and accessible across the internet.

10/18/2024 48
 W3C FUNDAMENTALS
Key Aspects of the W3C

3. W3C Recommendations

Some well-known W3C recommendations include:

▪ HTML (HyperText Markup Language): The standard language for creating web pages.

▪ CSS (Cascading Style Sheets): A style sheet language used for describing the presentation of a document.

▪ SVG (Scalable Vector Graphics): A standard for vector graphics on the web.

▪ WAI (Web Accessibility Initiative) Guidelines: Standards that ensure websites are accessible to people

with disabilities.

10/18/2024 49
 W3C FUNDAMENTALS
Key Aspects of the W3C

4. Open Participation

• The W3C is an open organization, meaning that web developers, companies, and even individuals can

contribute to the creation and refinement of web standards. It operates by consensus among its

members and seeks input from a wide range of stakeholders.

• Some of its members include large tech companies like Google, Microsoft, Apple, and Mozilla.

10/18/2024 50
 How W3C supports Web Technologies

The W3C (World Wide Web Consortium) handles and supports web technologies by

developing open standards, providing guidelines, and collaborating with developers,

businesses, and other organizations to ensure that web technologies are interoperable,

accessible, secure, and scalable.

10/18/2024 51
 How W3C supports Web Technologies

Here's how the W3C handles and supports web technologies:

1. Developing Open Standards
Examples: HTML, CSS, SVG, XML, DOM, and WCAG are all standards that have been developed and
maintained by W3C.
2. Ensuring Interoperability
W3C collaborates with major browser vendors like Google, Mozilla, Microsoft, and Apple to ensure that
their browsers support and adhere to W3C standards.
3. Providing Accessibility
Through initiatives like WAI (Web Accessibility Initiative), the W3C ensures that web technologies are
accessible to all users, including people with disabilities. Guidelines such as WCAG (Web Content
Accessibility Guidelines) and WAI-ARIA (Accessible Rich Internet Applications) help developers create
websites and applications that are usable by individuals with different abilities.

10/18/2024 52
 How W3C supports Web Technologies

Here's how the W3C handles and supports web technologies:

4. Security and Privacy
Standards like WebAuthn promote passwordless authentication, making web interactions safer by
eliminating the need for insecure passwords. The W3C also works on secure communication protocols.

5. Supporting Innovation
For example, W3C is actively working on:
• WebAssembly (Wasm): Enabling high-performance applications on the web.
• WebXR: Supporting virtual and augmented reality experiences.
• WebRTC: Facilitating real-time voice, video, and data communication.

10/18/2024 53
 How W3C supports Web Technologies

Here's how the W3C handles and supports web technologies:

6. Testing and Validation Tools
W3C provides various tools to help developers adhere to web standards

❑ W3C Markup Validation Service:

This tool checks the validity of HTML, XHTML, and CSS documents to ensure they comply with W3C
standards.
The W3C Markup Validation Service
❑ WAI Tools: Various accessibility testing tools to check if web content is accessible to people with
disabilities.

❑ Performance and Compatibility Testing: W3C offers resources for testing web technologies to ensure
they work efficiently across different browsers and devices.
10/18/2024 54
 How W3C supports Web Technologies

10/18/2024 55
 How W3C supports Web Technologies

Here's how the W3C handles and supports web technologies:

7. Education and Outreach

W3C provides resources, documentation, and educational materials to help developers learn and implement

web standards. This includes:

❑ Training and Certification: W3C offers training programs, courses, and certification in web technologies.

❑ Developer Resources: Guides, tutorials, and best practices to ensure that web developers understand and

follow the latest standards.

10/18/2024 56
Q&A

Thank You !

10/18/2024 57