Bootstrap and CSS

HELLO!
I am R.M.Shaikh
For a Third Semester course – XXXXXX
Bootsrap and CSS

2
 1
Introduction Of
Bootstrap

3
We will talk about ...
► Software Framework
► Why use Framework?
► Difference between CSS & Bootstrap
► What is Bootstrap?
► Why use Bootstrap?
► How to install and use Bootstrap?

4
After this session you are able to...
► Understand Software Framework
► Describe Applications of Framework
► Differentiate CSS & Bootstrap
► Understand Bootstrap framework
► List features of Bootstrap
► To install and use Bootstrap
5
 What is Framework?
◉ A framework, or software framework, is a platform for developing
software applications.
◉ A framework is a set of tools in programming on which on which
software developers can build well-structured, reliable software
programs.
◉ For example, a framework may include predefined classes and
functions that can be used to do various tasks - process input,
manage hardware devices, and interact with system software.
◉ This facilitates the development process bcoz programmers don't
need to redevelop same things each time they develop a new
application.

6
 What is Framework?
◉ built, tested, and optimized by several experienced software
engineers and programmers, software frameworks are versatile,
robust, and efficient.

7
 Why use Framework?
◉ Assists in establishing better programming practices
◉ Code is more secure
◉ Duplicate and redundant code can be avoided
◉ Helps consistent developing code with fewer bugs
◉ Makes it easier to work on sophisticated technologies
◉ One could create their software framework or contribute to open-
source frameworks. Hence, there is a continuous improvement in
the functionality

8
 Why use Framework? Continue...
◉ Several code segments and functionalities are pre-built and
pre-tested. This makes applications more reliable
◉ Testing and debugging the code is a lot easier and can be
done even by developers who do not own the code
◉ The time required to develop an application is reduced
significantly

9
Server side (Back End) & Client side (Front End)

10
 Server side (Back End) & Client side (Front End)

◉ Client side Front end coding includes HTML,CSS and Java script.
◉ Code will be downloaded from server and compile entirely in the
browser

11
 Difference between CSS and Bootstrap

Cascading Style Sheet(CSS) Bootstrap

CSS is developed by Hakon Wium Lie, Bootstrap is developed by Mark Otto,

Bert Bos,World Wide Web Dec 1996. Jacob Thornton August 2011.
CSS represent the style and the Bootstrap is a free and open-source
appearance of content like font, color, CSS Framework that is used for
margin, padding, etc. developing responsive website.

CSS does not have a grid system Bootstrap is based on-grid system.

CSS does not provide responsive In Bootstrap we can design a

pages or website. responsive website or webpages.

12
 Difference between CSS and Bootstrap Continue...
Cascading Style Sheet(CSS)
CSS is more complex than Bootstrap
because there is no pre-defined class
and design.
In CSS, we have to write code from
scratch.
CSS3 is the latest version
Bootstrap
Bootstrap is easy to understand and it
has much pre-design class.
In Bootstrap, we can add pre-defined
class into the code without writing
code.
Bootstrap 5 is the latest version
13
 “
What is Responsive website?
A website is called responsive website which
can automatically adjust itself to look good
on all devices, from smart phones to desktops
etc.

14
 “
What is Bootstrap?
Bootstrap is a sleek, intuitive, and powerful
mobile first front-end framework for faster
and easier web development. It uses HTML,
CSS and Javascript.

15
 What is Bootstrap?
◉ “The most popular HTML, CSS, and JS framework for
developing responsive, mobile-first projects on the web.”
◉ It consists of HTML, CSS, and JS-based scripts for various web
design-related functions and components.
◉ Bootstrap is a free and open-source web development
framework.
◉ It is also a frontend development framework that enables
developers and designers to quickly build fully responsive
websites.

16
 What is Bootstrap?
◉ It includes HTML and CSS based design templates for texts, forms,
buttons, tables, navigation, modals, image carousels (slideshow)
and many others.
◉ Essentially, Bootstrap saves you from writing lots of CSS code,
giving you more time to spend on designing webpages.

17
 Why Bootstrap?
◉ Open Source – Free to download
◉ Easy to use: Required just basic knowledge of HTML and CSS. It
comes bundled with templates for typography, forms, buttons,
drop-down menus, navigation, and other interface components.
◉ Responsive features: Bootstrap's responsive CSS adjusts to
phones, tablets, and desktops so website works on all devices
◉ Mobile-first approach: Meaning, the code was optimized for
mobile devices (i.e. the smallest screen size) first and then scaled
up to display on larger screens.
◉ Browser compatibility: It’s also fully customizable, and
compatible with all modern browsers.

18
 Bootstrap Versions
◉ Bootstrap Versions - 3.0, 4.0, 5.0
◉ Bootstrap 5 (released 2021) is the newest version of Bootstrap
(released 2013); with new components, faster stylesheet and more
responsiveness.
◉ Bootstrap 5 supports the latest 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 vanilla JavaScript instead of
jQuery.

19
 What Bootstrap Package Includes? (Application)
 Scaffolding: Bootstrap provides a basic structure with Grid
System, link styles, and background.

 CSS: Bootstrap comes with the feature of global CSS settings,

fundamental HTML elements styled and enhanced with extensible
classes, and an advanced grid system.

 Components: Bootstrap contains over a dozen reusable built–in

components to provide iconography, dropdowns, navigation,
alerts, pop-overs, and much more.

20
 What Bootstrap Package Includes?
 JavaScript Plugins: Bootstrap contains over a dozen custom
jQuery plugins. You can easily include them all, or one by one.

 Customize: You can customize Bootstrap's components, LESS

variables, and jQuery plugins to get your very own version.

◉ A plugin is a software add-on /extention that is installed on a

program to enhancing its functionality.

21
 What You Can Do with Bootstrap
◉ There are lot more things you can do with Bootstrap.
◉ You can easily create responsive websites.
◉ You can quickly create multi-column layout with pre-defined classes.
◉ You can quickly create different types of form layouts.
◉ You can quickly create different variation of navigation bar.
◉ You can easily create dynamic tabs to manage large amount of
content.
◉ You can easily create tooltips and popovers to show hint text.
◉ You can easily create carousel or image slider to showcase your
content.
◉ You can quickly create different types of alert boxes.

22
 How to install Bootstrap?

◉ It is very easy to setup and start using Bootstrap.

◉ You can download the latest version of Bootstrap from

http://getbootstrap.com/

23
How to install Bootstrap?

24
How to install Bootstrap?

25
 How to install Bootstrap?
 Download Bootstrap: Clicking this, you can download the
precompiled and minified versions of Bootstrap CSS, JavaScript,
and fonts. No documentation or original source code files are
included.  
- Minifying implies the removal of unnecessary characters in the
source code to reduce the file size and facilitate faster loading of the site.
 Download Source: Clicking this, you can get the latest Bootstrap
LESS and JavaScript source code directly from GitHub.
◉ We just need to include the bootstrap.css CSS file and, optionally,
the bootstrap.js JavaScript file into your website and you are ready
to go.

26
Precompiled Bootstrap File Structure
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
├── img/
│ ├── glyphicons-halflings.png
│ ├── glyphicons-halflings-white.png
└── README.md

27
 Bootstrap Source Code File Structure
├── less/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └──docs/
│      └── 4.6/
│        └── examples/
├── js/
└── scss/
◉ If you work with Bootstrap's uncompiled source code, you need to compile the
LESS files to produce usable CSS files.

28
 How to use Bootstrap?
◉ The Bootstrap download includes three folders: css, js, and img.
For simplicity, add these to the root of your project.
◉ Here you can see the jquery.js, bootstrap.min.js and
bootstrap.min.css files that are included to make a normal HTM
file to the Bootstrapped Template.
◉ Make sure to include jQuery library before you include Bootstrap
library.

29
 First Page Using Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-
scale=1.0">
    <title>Document</title>
    <link href = "css/bootstrap.css" rel="stylesheet">
</head>

30
 First Page Using Bootstrap
<body>
    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p> This is our first sample example that will be more awesome later! </p>
        <hr class="my-4">
        <a class="btn btn-primary btn-lg" href="#" role="button">
        Button Large         </a>
        <a class="btn btn-primary btn-sm" href="#" role="button">
            Button Small            </a>
        </div>
    <script src="/js/bootstrap.js"></script>
    <script src="/js/jquery.js"> </script>
</body> </html>

31
Output - First Page Using Bootstrap

32
Bootstrap Grid
2 33
We will talk about ...
► What is Grid ?
► Bootstrap Grid System
► Working of Bootstrap Grid System
► Grid Options
► Grid Examples

34
After this session you are able to...
► Understand Grid
► Describe Bootstrap Grid
► Explain working of Grid
► Apply Grid and its Options

35
 What is Grid?
◉ A pattern of horizontal and vertical lines that cross each
other to make a set of squares. It is widely used to design
layout and content structure in print design.
◉ The website grid is a system for organizing the content on
the page and creating alignment and order.
◉ It forms the basic structure or skeleton of user interface.
◉ Designers use website grids to make design decisions and
create a good user experience.
◉ Grids in web design organize and structure content of
website that makes it user friendly.

36
What is
Grid?

37
 “
Mobile First Strategy
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.

38
 Mobile First Strategy
◉ Content
o Determine what is most important.
◉ Layout
o Design to smaller widths first.
o Base CSS address mobile device first ; media queries
address for tablet,desktops.
◉ Progressive Enhancement
o Add elements as screen size increases.

39
 Bootstrap Grid System
◉ Bootstrap includes a responsive, mobile first fluid grid
system that appropriately scales up to 12 columns as the
device or viewport size increases.
◉ The viewport is the user's visible area of a web page.
◉ The browser's viewport is the area of the window in which
web content can be seen.
◉ The viewport varies with the device, and will be smaller on a
mobile phone than on a computer screen.
◉ It includes predefined classes for easy layout options, as
well as powerful mixing of classes for generating more
semantic layouts.

40
 Default Grid System

◉ At the default width, each column is 60 pixels wide and offset 20

pixels to the left.

41
 How Bootstrap Grid System Works
◉ For proper alignment and padding, rows must be wrapped
within a .container or .container-fluid respectively for
fixed-width and full-width.
◉ Use rows to create horizontal groups of columns.
◉ Content should be placed within the columns, and only
columns may be the immediate children of rows.
◉ Bootstrap offers a lot of classes to set up layouts fast using
classes like .row to create a new row or .col-xs-4 to create a
grid layout.

42
 Bootstrap Grid System

◉ Columns create gutters (gaps between column content) via

padding. That padding is offset in rows for the first and the
last column via negative margin on .rows
◉ 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-xs-4
◉ When trying to add more than 12 columns within a row, the
extra columns will automatically wrap onto a new line.

43
 Document Setup with Bootstrap ‘s Basic Syntax
◉A basic HTML template using Bootstrap basic syntax : <!
DOCTYPE html> <html>
<head>
<title>Bootstrap 101 Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Include all compiled plugins (below), or include individual files as
needed -> <script src="js/bootstrap.min.js"></script>
</body> </html>

44
 Document Setup with Bootstrap‘s Basic Syntax
◉ HTML DOCTYPE - Include the below code for HTML5 doctype at the
beginning of all your projects using Bootstrap
<!DOCTYPE html>
<html> ....
</html>
◉ MOBILE FIRST – add the viewport meta tag to the<head> element, to ensure
proper functions on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
◉ width property controls the width of the device. Setting it to device-width will
make sure that it is rendered across various devices
(mobiles,desktops,tablets...) properly.
◉ initial-scale=1.0 ensures that when loaded, your web page will be rendered
at a 1:1 scale, and no zooming will be applied out of the box.

45
 Document Setup with Bootstrap‘s Basic Syntax
◉ RESPONSIVE IMAGES
◉ to make the images responsive by adding a class .img-responsive to the
<img>tag. This class applies max-width: 100%; and height: auto; to the
image so that it scales nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
◉ CONTAINERS
◉ Use class .container to wrap a page's content and easily center the content's as
shown below.
<div class="container">
...
</div>

46
 Document Setup with Bootstrap ‘s Basic Syntax
◉ The <meta> tag defines metadata about an HTML document.
◉ Metadata is data (information) about data.
◉ <meta> tags always go inside the <head> element
◉ typically used to specify character set, page description, keywords, author
of the document, and viewport settings.
◉ The charset attribute specifies the character encoding for the HTML
document. In HTML-5 the UTF-8 character set, which covers almost all of
the characters and symbols in the world!
◉ <meta name="viewport" content="width=device-width">
◉ <meta name="viewport" content="width=device-width, initial-scale=1">
◉ This means that the browser will (probably) render the width of the page at
the width of its own screen. 

47
 <meta> tag
Property Description
width The width of the virtual viewport of the device.
device-width The physical width of the device’s screen.
height The height of the “virtual viewport” of the device.
device-height The physical height of the device’s screen.
initial-scale The initial zoom when visiting the page. 1.0 does not zoom.
minimum- The minimum amount the visitor can zoom on the page. 1.0 does
scale not zoom.
maximum- The maximum amount the visitor can zoom on the page. 1.0 does
scale not zoom.
user-scalable Allows the device to zoom in and out. Values are yes or no.

48
Without Viewport <Meta> With Viewport <Meta>

49
 Grid Options - The Grid Across Multiple Devices
Extra small Small devices Medium Large devices
devices Tablets devices Desktops
Phones (≥768px) Desktops (≥1200px)
(<768px) (≥992px)
Grid behavior Horizontal at all Collapsed to start, Collapsed to start, Collapsed to start,
horizontal above horizontal above horizontal above
times breakpoints breakpoints breakpoints

Max container None (auto) 750px 970px 1170px

width
Class prefix .col-xs- .col-sm- .col-md- .col-lg-

# of columns 12 12 12 12

Max column Auto 60px 78px 95px

width
Gutter width 30px 30px 30px 30px
(15px on each (15px on each (15px on each (15px on each
side of a column) side of a column) side of a column) side of a column)

50
 Grid Options - The Grid Across Multiple Devices
Extra small Small devices Medium Large devices
devices Tablets devices Desktops
Phones (≥768px) Desktops (≥1200px)
(<768px) (≥992px)
Can Nested? Yes Yes Yes Yes

Offsets Yes Yes Yes Yes

Column Yes Yes Yes Yes

ordering

51
What is Grid in Web design ?

52
 What is Grid in Web design ?
1 2 3 4 5 6 7 8 9 10 11 12

53
 What is Grid in Web design ?
1 2 3 4 5 6 7 8 9 10 11 12

4Grid X 3 Cols
= 12 Grids

54
Bootstrap Grid Examples

55
Bootstrap Grid Examples

How many Grids in each box ?

56
Bootstrap Grid Examples

6 Grids in 2 Columns

57
 Bootstrap Row

1 Row = 12 Grids

58
Bootstrap Row

3 Rows

59
Bootstrap Row Example

60
 Bootstrap Responsive Grid Mobile
Desktop

1
1 2 3

3
61
 How to Use Bootstrap Grid?

3 Easy Steps :
1. Add Container
2. Add Row
3. Add Columns

62
Thanks !
Any Queries ?