Web Application Development
Bootstrap: CSS framework
Responsive Web Design
Responsive Web Design
The Viewport
• The viewport is the user's visible area of a web page.
• HTML5 introduced a method to let web designers take control over the
viewport, through the <meta> tag.
– 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.0 part sets the initial zoom level when the page is first loaded by
the browser.
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
</head>
<body>
. . .
Size Content to the Viewport
On both desktop and mobile devices, users are used to scrolling
websites vertically but not horizontally, and forcing the user to
scroll horizontally or to zoom out in order to see the whole page
results in a poor user experience.
• Do not use large fixed width elements.
– Instead, consider using relative width values, such as width: 100%.
– Similarly, beware of using large absolute positioning values that may cause the element
to fall outside the viewport on small screens.
• Content should not rely on a particular viewport width to render well.
• Use CSS media queries to apply different styling for small and large
screens.
CSS3 Media Queries
• Media queries consist of a media type and can contain one or more
expressions, expressed as media features, which resolve to either true or
false.
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)"
href="[Link]" />
<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
.sidebar {
display: none;
}
}
</style>
CSS3 Media Queries
• CSS styling based on multiple screens width
@media(max-width: 500px)
{
p{font-size:12px}
}
@media (min-width: 501) and (max-width: 900px)
{
p{font-size:15px}
}
@media(min-width: 901px){
p{font-size:16px}
}
CSS3 Media Queries
While there are several different items we can query on, the ones used most
often for responsive web design are min-width, max-width, min-height and
max-height.
Attribute Result
min-width Any browser width over the value defined in the query.
max-width Any browser width below the value defined in the query.
min-height Any browser height over the value defined in the query.
max-height Any browser height below the value defined in the query.
Any browser where the height is greater than or equal to the
orientation=portrait
width.
orientation=landscape Any browser where the width is greater than the height.
CSS Grid
Creating web layouts using CSS Grid
[Link]
05/01/2025 9
CSS Grid
Display: Defines the element as a grid container
Grid-template-columns: Defines the size and
number of columns in the grid.
Grid-template-rows: Defines the size and number
of rows in the grid.
Grid-template-areas: Defines named grid areas
which can be referenced when placing grid items.
CSS Grid
Grid-gap: Sets the size of the gap between grid items (shorthand for
row and column gaps).
Grid-column-gap: Sets the size of the gap between grid columns.
Grid-row-gap: Sets the size of the gap between grid rows.
Grid-auto-columns: Sets the size of implicitly created columns.
Grid-auto-rows: Sets the size of implicitly created rows.
Grid-auto-flow: Determines the direction in which grid items are
placed.
Justify-items: Aligns grid items along the inline axis.
Align-items: Aligns grid items along the block axis.
Justify-content: Aligns the grid along the inline axis.
Align-content: Aligns the grid along the block axis.
CSS Grid
Grid-column-start: Specifies the start position of a
grid item within the grid columns.
Grid-column-end: Specifies the end position of a
grid item within the grid columns.
Grid-row-start: Specifies the start position of a grid
item within the grid rows.
Grid-row-end: Specifies the end position of a grid
item within the grid rows.
12 05/01/2025
BOOTSTRAP
13 05/01/2025
What is bootstrap CSS?
• Bootstrap is a free and open-source front-end
framework for designing websites and web
applications.
• Bootstrap is a free front-end framework for
faster and easier web development that helps
you to create a responsive front-end design.
14 05/01/2025
BOOTSTRAP
• CSS farmwork
• Page layouts using bootstrap CSS
• Built in style for HTML elements like buttons
• Built in elements
15 05/01/2025
Why we need to use 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)
16 05/01/2025
Bootstrap selectors
• Bootstrap contains wide range of selectors. Some
very common selectors in bootstrap are as
following
– Bootstrap Grid System
– Bootstrap typography
– Bootstrap Tables
– Bootstrap buttons
– Bootstrap Pagination
– Bootstrap Navbar
17 05/01/2025
Creating shared layout using bootstrap
• For this purpose visit
– [Link]
ss/[Link]
– [Link]
[Link]
– [Link]
/[Link]
– Copy all three files into your local disk named:
[Link], [Link] and [Link]
18 05/01/2025
Bootstrap table Example
19 05/01/2025
Example
• Output
20 05/01/2025
Bootstrap Example
• Alert boxes are used to notify about alert
messages. For example
21 05/01/2025
Bootstrap Example
22 05/01/2025
Bootstrap example
• Output
23 05/01/2025
Bootstrap example
• List of Bootstrap alert classes
24 05/01/2025
Bootstrap Grid Example
• Bootstrap Grid
– Bootstrap Grid system allows you to create different
size of columns(based on 12) in your application such
as:
• See Next Page
25 05/01/2025
Bootstrap Grid Example
26 05/01/2025
Bootstrap Grid Example
27 05/01/2025
Bootstrap Grid Example
28 05/01/2025
Bootstrap Grid
• Bootstrap Grid Example
– 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.
29 05/01/2025
Bootstrap Grid Example
• The following table summarizes how the
Bootstrap grid system works across multiple
devices: (See Next page)
30 05/01/2025
Bootstrap Grid Example
31 05/01/2025
Bootstrap Grid Example
• Output (code is written on Notepad)
• After resizing page
32 05/01/2025
Bootstrap rows and column
• Row and column are bootstrap classes that helps
to design a layout
– Rows
• Create vertical position with each other
– Columns
• Creates horizontal position with each other
33 05/01/2025
Example: Bootstrap rows and column
34 05/01/2025
Example: Bootstrap rows and column
• Imagine the output of following html
35 05/01/2025
05/01/2025 36
Adding horizontal menu
• Bootstrap Tabs
37 05/01/2025
Bootstrap CSS Example
• Bootstrap Tabs
38 05/01/2025
Bootstrap CSS Example
• Bootstrap Pills
– Pills are used to make a horizontal menu.
– Pills are straight menu that looks like a horizontal
table cells.
39 05/01/2025
40 05/01/2025
Adding Pagination to the page
• Bootstrap Pagination
41 05/01/2025
Bootstrap CSS Example
• Bootstrap Pagination
42 05/01/2025
43 05/01/2025
Adding list to the page
• List Group Items
44 05/01/2025
Bootstrap CSS Example
• List group items with col-lg class
45 05/01/2025
46 05/01/2025
Create 2 rows in central column : col-lg-6
Create 2 rows in central column :
col-lg-6
Place the panel-primary inside
column of 3 indexes
Bootstrap Example
• Bootstrap CSS Buttons
– Provides different types of button design. For
example
• See next slide
52 05/01/2025
Bootstrap CSS Example
53 05/01/2025
Bootstrap CSS Example
54 05/01/2025
55 05/01/2025
Bootstrap CSS Example
• Bootstrap Images
– Bootstrap image class provides different image styles.
For example
• Circle
• Rounded Corner
56 05/01/2025
Bootstrap CSS Example
• Rounded Corner Images
57 05/01/2025
Bootstrap Example: Rounded corner img
58 05/01/2025
Bootstrap CSS Example
• Bootstrap Tabs
59 05/01/2025
Bootstrap CSS Example
• Bootstrap Form
60 05/01/2025
Bootstrap CSS Example
61 05/01/2025
Bootstrap CSS Example
• If you tried to remove form-control class, then
62 05/01/2025
Bootstrap CSS Example
• Checkboxes
– Checkboxes are used if you want the user to select
any number of options from a list of preset options.
– The following example contains three checkboxes.
The last option is disabled:
63 05/01/2025
Bootstrap CSS Example
64 05/01/2025
Layouts
Create a Layout busing row and column property in bootstrap
row
Col-lg-3 Col-lg-6 Col-lg-3
row
65 3/29/2024
Layout
• Create HTML file and download .css, .[Link] and
[Link] file as mentioned before
66 3/29/2024
