Learning Css And Bootstrap basics

1. INTRO TO CSS
 Covered in this lesson:
 Overview
 What is CSS?
 Why to use CSS?
 Structure
 CSS Syntax Introduction
 Three places CSS can be defined
 CSS Syntax Specifics
 Cascading Inheritance
 Applied
 CSS Hands-on

2. WHAT IS CSS?
 Cascading Style Sheet
 Stylesheet Language
 Standards-based set of properties and attributes to
define styles
 To describe the presentation a document written in a
‘markup language’ like HTML or XML
 Markup encoding: <p>My paragraph here.</p>
 Defines the style of how things in <p> tags appear.
 Font, color, size, margins, etc.
 Cascading
 Rules to determine how to
apply markup that contains
other markup

3. WHY CSS?
 Separate Content from Form
 Content is the text and images, marked up to define regions
of specific types
 Form defines the “style” for the content
<font size=“14px”>
My First Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
My information 1 goes here.
</font>
<font size=“14px”>
My Second Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
Different information goes here.
</font>
The old way:

4. WHY CSS? CONTINUED.
 Separate Content from Form
 Content
 Form or Style
<p class=“header”>My First Header</p>
<p class=“info”>My Information 1 goes here</p>
<p class=“header”>My Second Header</p>
<p class=“info”>Different Information goes here</p>
(Specific markup properties like Class will be discussed later).
.header { font-size:14px;}
.info { font-family: verdana;
font-color: blue;
font-size: 12px; }

5. Advantages of CSS
⚫ CSS saves time
When most of us first learn HTML, we get taught to set the font face, size, colour,
style etc every time it occurs on a page. This means we find ourselves typing
(or copying & pasting) the same thing over and over again. With CSS, you only
have to specify these details once for any element. CSS will automatically apply
the specified styles whenever that element occurs.
⚫ Pages load faster
Less code means faster download times.
⚫ Easy maintenance
To change the style of an element, you only have to make an edit in one place.
⚫ Superior styles to HTML
CSS has a much wider array of attributes than HTML.

6. WHAT DOES THIS SEPARATION GET US?
 Separate Content from Form
 Specify the style once for every instance of that
class.
 Example: Specify the font once for all text on the
HTML page that you’ve identified as a “header”.
 The stylesheet can be a separate file which all
HTML pages on your entire site can link to.
 Only have to specify the style once for your ENITRE
SITE
 Can change the style for your entire site by
editing only ONE FILE.

7. CSS SYNTAX
 3 Elements to a CSS Statement
 Selector
 What HTML sections does it affect?
 Property
 What attribute of that HTML section will be affected?
 Value
 What change will be made to that attribute?

8. p {
property: value
}
The declaration is always defined in a
property/ value pair. The two are separated by
a colon.
How you define the properties will affect how
HTML elements are displayed.
CSSDECLARATION

9. p {
font-family: Arial, sans-serif;
font-size: 14px;
color: #666666;
}
You can apply multiple declarations to a
selector(s) by separating the delcarations
with semi-colons.
CSSDECLARATION

10. body {declaration}
p {declaration}
h1 {declaration}
ul {declaration}
The simplest selector is the type selector,
which targets an html element by name.
TYPE (ELEMENT) SELECTORS

11. p {
color: red
}
The selector is typed in front of the declaration,
with a space separating it and the opening
curly-bracket (aka curly-brace).
Typically, extra spaces and returns are added
as shown for the sake of readability.
CSSSELECTOR

12. h1,h2,h3,h4 {
font-weight: bold
}
You can apply styles to multiple selectors in
the same rule by separating the selectors with
commas.
CSSSELECTOR

13. CSS SYNTAX: SELECTORS
 There are many kinds of selectors and many ways to reference them:
 Type, Class, ID, Pseudo, etc.
 HTML Type Tag – selected with the tag type
 The Class Attribute – precede the class with a period
p { font-size: 10px;
font-color: White; }
<p>Content</p>
.myinfo { font-size: 10px;
font-color: White; }
<p class=“myinfo”>Content</p>
<div class=“myinfo”>Other content</div>

14. RULES
 Attached to elements
 As attributes of elements (inline style)
 Tied to id attribute of elements
 Tied to class attribute of elements
 Rules all have form
{Property Name : Value;}
 Multiple rules separated by ;
14

15. The id and class Selectors
In addition to setting a style for a HTML element, CSS allows you to specify
your own selectors called "id" and "class".
The id Selector
⚫ The id selector is used to specify a style for a single, unique element.
⚫ The id selector uses the id attribute of the HTML element, and is defined
with a "#".
⚫ The style rule below will be applied to the element with id="para1":
⚫ Example
#para1
{
text-align:center; color:red;
}

16. THE CLASS SELECTOR
⚫ The class selector is used to specify a style for a group of elements. Unlike the
id selector, the class selector is most often used on several elements.
⚫ This allows you to set a particular style for any HTML elements with the same
class.
⚫ The class selector uses the HTML class attribute, and is defined with a "."
⚫ In the example below, all HTML elements with class="center" will be center-
aligned:
Example
.center
{
text-align:center;
}
⚫ In the example below, all p elements with class="center" will be center-
aligned:
Example
p.center {text-align:center;}

17. IDS VS CLASSES
The most important difference between IDs
and classes is that there can be only one
ID on a page, but multiple classes.
An ID is more specific than a class.
An element can have both an ID and
multiple classes.

18. IDS VS CLASSES
ID: #344-34-
4344
Class: Male
Class: Employee
ID: #123-54-
9877
Class: Female
Class: Employee

19. SPECIFICITY
 <html>
<head>
<style>
.test {color: green;}
p {color: red;}
#demo {color: blue;}
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
 Output : Hello World!

20. THREE CSS DEFINITION LOCATIONS
 Inline: the “style” attribute
Note, the selector for inline CSS is the tag which contains the style attribute.
 Internal: the <style> markup tag
 External: the .css stylesheet file
<p style=“font-color:red;font-size:10px;”>Content</p>
<html><head><style>
p { background-color: Red;
font-family: serif;
font-color: White; }
</style></head><body>
<p>Content</p>
</body></html>
<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />

21. THREE WAYS TO INSERT CSS
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With
an external style sheet, you can change the look of an entire Web site by
changing one file. Each page must link to the style sheet using the <link>
tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
An external style sheet can be written in any text editor. The file should not
contain any html tags. Your style sheet should be saved with a .css
extension. An example of a style sheet file is shown below:
hr {color:red;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

22. Internal Style Sheet
An internal style sheet should be used when a single
document has a unique style.
<head>
<style type="text/css">
hr {color:red;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

23. <p style="color : red; margin-left : 20px">This is a paragraph.</p>
MULTIPLE STYLE SHEETS
If some properties have been set for the same selector in different style sheets, the values will be
inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;
font-size:20pt;
}
If the page with the internal style sheet also links to the external style sheet the properties for h3
will be:
color:red;
text-align:right;
font-size:20pt;
The color is inherited from the external style sheet and the text-alignment and the font-size is
replaced by the internal style sheet.
INLINE STYLES

24. More examples
1. body { background-color:#b0c4de; }
2. h1 { background-color:#6495ed; }
3. p { background-color:#e0ffff; }
4. div { background-color:#b0c4de; }
5. body { background-image:url('paper.gif'); }
6. Body { background-image:url('gradient2.png'); background-
repeat:repeat-x; }
7. body
{background-image:url('img_tree.png'); background-repeat:no-repeat;}

25. Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback"
system. If the browser does not support the first font, it tries the next font.
Eg:
p{font-family:"Times New Roman", Times, serif;}
The font-style property is mostly used to specify italic text.
Eg:
p.class1 { font-style : normal; }
p.class2 { font-style : italic; }
p.class3 { font-style : oblique; }
 The font-size property sets the size of the text.
 Eg:
H1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

26. Styling Links
Links can be style with any CSS property (e.g. color, font-family,
background-color).
Special for links are that they can be styled differently depending on what
state they are in.
The four links states are:
A : link - a normal, unvisited link
A : visited - a link the user has visited
A : hover - a link when the user mouses over it
A : active - a link the moment it is clicked

27. Styling Background
background-color
background-image
background-repeat
Eg:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
body {
background-color: yellow; background-image:url ('paper.gif');
}

28. Styling Borders
The border-width property specifies the width of the four borders.
The border-color property is used to set the color of the four
borders.
In CSS, there are also properties for specifying each of the borders
(top, right, bottom, and left) using border-style.
Eg 1: p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Eg 2:
H1 {
border: 5px dashed green
border-radius: 2px;
}

29. The border-style property specifies what kind of border to
display.
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border.
ridge - Defines a 3D ridged border.
inset - Defines a 3D inset border.
outset - Defines a 3D outset border.
none - Defines no border
hidden - Defines a hidden border
Eg 3:
H1 {
border-style: dotted solid
dashed double;
border-width: medium;
border-color: blue
border-radius: 2px;
}

30. Margins & Paddings
Margins are used to create space around elements, outside of any
defined borders.
Eg 1:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
 Padding is used to generate space around an element's
content, inside of any defined borders.
Eg2 : div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

31. Styling Links
Example
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

32. BUTTONS
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
1. <a href="#" class="button">Link Button</a>
2. <button class="button">Button</button>
3. <input type="button" class="button" value="Input Button">

33. Styling Text
Using:
1. Text-align
2. Text-direction
3. Vertical-align
4. Text-decoration
5. Text-decoration-line
6. Text-decoration-style
7. Text-decoration-color
8. Text-shadow
Example:
P {text-align : justify; text-decoration-line : overline;
text-decoration-color : red; text-decoration-style : wavy;
text-shadow : 5px; }

34. Styling Lists
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
ul
{
list-style-image: url('sqpurple.jpg');
}

35. Styling Tables
table, th, td{border: 1px solidblack;}
table,th, td{border: 1px solid black;}
td{height:50px; vertical-align:bottom; }
Td { padding:15px; }
table, td, th { border:1px solid green; }
Th { background-color:green; color:white; }

36. HOW CSS WORKS — MATCHING
 Every XHTML document represents a document
tree
 The browser uses the tree to determine which
rules apply
 What about inheritance? And conflicts?
36

37. CASCADING INHERITANCE
 Nested elements inherit
the properties from the
its parent
 If you specify a style for the
<body> tag it will affect all
content in your HTML page.
 If you want to override
inherited settings, you
need to specify a style in
a more local element
body { font-family: Verdana;
font-size: 14px; }
body { font-family: Verdana;
font-size: 1.1em; }
.littletext { font-size: 8px; }
<body>
This text is larger.
<p class=“littletext”>This text is
smaller.</p>

38. VISUAL FORMATTING: BOX MODEL
39
Margin
Border
Padding

39. BOX MODEL (CONT.)
 Padding
 Size in %, em, or ex for text
 padding-top, padding-right, padding-bottom, padding-
left
Mnemonic: TRouBLe
 Set all at once with padding
 Margin
 Similar to padding
 But can also be auto
40
Width is of content only.
Neither the border nor the
padding are included in width.

40. BOXMODEL(BLOCK)

41. BOXMODEL(BLOCK)

42. PREVIEW

43. The display Property
The display property specifies if/how an element is displayed. Every HTML
element has a default display value depending on what type of element it is.
The default display value for most elements is block or inline.
Block-level Elements
A block-level element always starts on a new line
and takes up the full width available
Inline Elements
An inline element does not start on a new line
and only takes up as much width as necessary.
<span>
<a>
<img>
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

44. OVERRIDE THE DEFAULT DISPLAY VALUE
EG 1: <html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li> HTML </li>
<li> CSS </li>
<li> Bootstrap </li>
<li> Javascript</li>
</ul>
</body>
</html>

45. OVERRIDE THE DEFAULT DISPLAY VALUE
EG 2:
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<h1>Display span elements as block elements</h1>
<span>A display property with </span>
<span>a value of "block" results in</span>
<span>a line break between each span elements.</span>
</body>
</html>

46. Setting the width or max-width of a block-level element will prevent it
from stretching out to the edges of its container.
<html>
<head>
<style>
.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
background-color:pink;
}
</style>
</head>
<body>
<h2>CSS Max-width</h2>
<p class="ex1">This div element has width: 500px;</div>
</body>
</html>
CSS WIDTH AND MAX-WIDTH

47. The Float Property
The float property is used for positioning and formatting
content e.g. let an image float left to the text in a container.
The float property can have one of the following values:
•left - The element floats to the left of its container
•right - The element floats to the right of its container
•none - The element does not float (will be displayed just
where it occurs in the text). This is default
•inherit - The element inherits the float value of its parent

48. Eg. Of Float Property
<style>
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
</style>
<body>
<h2>Float Next To Each Other</h2>
<div class="div1"> Div 1 </div>
<div class="div2"> Div 2 </div>
<div class="div3"> Div 3 </div>
</body>
Output

49. Bootstrap

50. Bootstrap is Front-end Framework
HTML, CSS, and JS framework for developing responsive,
mobile first projects on the web.
WWW.GETBOOTSTRAP.COM

51. Bootstrap is Ready-to-use Web
Elements
HTML / CSS elements for button, form, table, image, navbar,
label, progress bar, alert etc.

52. 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.
 Bootstrap is the most popular HTML, CSS, and
JavaScript framework for developing responsive,
mobile-first web sites.
 Bootstrap is completely free to download and use!

53. WHY BOOTSTRAP?
● Save 100+ hours of coding
● Easy to use web elements
● Easy to use: Anybody with just basic knowledge of
HTML and CSS can start using Bootstrap
● Quick responsive prototype / website

54. | Advantages of Bootstrap |
1. Fewer Cross browser bugs
2. A consistent framework that supports major of all browsers and
CSS compatibility fixes
3. Lightweight and customizable
4. Responsive structures and styles
5. Several JavaScript plugins using the jQuery
6. Good documentation and community support
7. Loads of free and professional templates, WordPress themes
and plugins
8. Great grid system

55. HISTORY & VERSIONS OF BOOTSTRAP
Bootstrap was developed by Mark Otto and Jacob Thornton at
Twitter. It was released as an open source product in August 2011 on
GitHub.
In June 2014 Bootstrap was the No.1 project on GitHub.
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, 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 vanilla JavaScript instead of jQuery.

56. WHERE TO GET BOOTSTRAP FROM?
 There are two ways to start using Bootstrap
on your own web site.
 Download Bootstrap from getbootstrap.com
 If you want to download and host Bootstrap yourself, go
to getbootstrap.com, and follow the instructions there.
 Include Bootstrap from a CDN
 If you don't want to download and host Bootstrap yourself,
you can include it from a CDN (Content Delivery Network).
 MaxCDN provides CDN support for Bootstrap's CSS and
JavaScript. You must also include jQuery.

57. BOOTSTRAP CDN
 You must include the following Bootstrap’s CSS, JavaScript, and jQuery
from MaxCDN into your web page.
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstr
ap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bo
otstrap.min.js"></script>
<!-- latest jQuery library -->
<script src="https://code.jquery.com/jquery-latest.js"></script>
 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.

58. CREATE 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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

59. CREATE WEB PAGE WITH BOOTSTRAP (2)
 Bootstrap is mobile-first
 Bootstrap 3 is designed to be responsive to mobile
devices. Mobile-first styles are part of the core framework.
 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.

60. CREATE 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.
 Note: Containers are not nestable (you cannot put a
container inside another container).

61. CONTAINER
 In Bootstrap, container is used to set the content's margins
dealing with the responsive behaviors of your layout. It contains
the row elements and the row elements are the container of
columns (known as grid system).
 The container class is used to create boxed content.
 There are two container classes in Bootstrap:
1. Container  viewport provides a responsive fixed width
container
2. container-fluid  provides a full width container, spanning
the entire width of the

62. First Bootstrap Example
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js>
</script>
</head>
<body>
<div class="container-fluid">
<h1>First Bootstrap Page</h1>
<p>This is first para of .container-fluid class.</p>
<p>This is second paragraph </p>
</div>
</body> </html>

63. RESPONSIVE CONTAINERS
 You can also use the .container-sm|md|lg|xl classes to
determine when the container should be responsive.
 The max-width of the container will change on
different screen sizes/viewports
 Examples:
<div class="container-sm">First Example</div>
<div class="container-md">Second Example </div>
<div class="container-lg">Third Example </div>
<div class="container-xl">Fourth Example </div>
<div class="container-xxl">Fifth Example </div>

64. Bootstrap Components
Start Workshop

65. BOOTSTRAP GRIDS
 The Bootstrap Grid System allows up to 12 columns
across the page. You can use all 12 columns
individually or you can groups 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.

66. Grid Classes
 The Bootstrap grid system has SIX classes:
 .col-
 .col-sm-
 .col-md-
 .col-lg-
 .col-xl-
 .col-xxl-
Example:
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
The classes above can be combined to create more dynamic
and flexible layouts.

67. BOOTSTRAP GRID
12 Responsive Grid

68. BOOTSTRAP GRIDS – EQUAL & UNEQUAL COLUMNS
 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:
<div class="col-md-12">Span 12 columns</div>
<div class="col-md-6">Span 6</div>
<div class="col-md-6">Span 6</div>
<div class="col-md-4">Span 4</div>
<div class="col-md-8">Span 8</div>
<div class="col-md-4">Span 4</div>
<div class="col-md-4">Span 4</div>
<div class="col-md-4">Span 4</div>

69. How many grids in each box?
BOOTSTRAP GRID EXAMPLE

70. BOOTSTRAP GRID EXAMPLE
4 grids x 3 Columns

71. BOOTSTRAP GRID EXAMPLE

72. BOOTSTRAP GRID EXAMPLE 2
How many grids in each box?

73. BOOTSTRAP GRID EXAMPLE 2
6 grids x 2 Columns

74. BOOTSTRAP GRID EXAMPLE 2

75. BOOTSTRAP ROW
3 Rows

76. BOOTSTRAP ROW EXAMPLE

77. BOOTSTRAP RESPONSIVE GRID
Columns will stack when responsive

78. BOOTSTRAP RESPONSIVE GRID
1 2 3 1
2
3
Desktop Mobile
Columns stack on mobile

79. BOOTSTRAP GRID WORKSHOP
3 Easy Steps:
1. Add container
2. Add row
3. Add columns

80. BASIC STRUCTURE OF A BOOTSTRAP GRID
<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>
 First; create a row (<div class="row">). Then, add the
desired number of columns (tags with
appropriate .col-*-*classes). Note that numbers
in .col-*-* should always add up to 12 for each row.

81. BOOTSTRAP TABLES
 A basic Bootstrap table has a light padding and only horizontal
dividers.
 The .table class adds basic styling to a table:
 Striped Rows
 The .table-striped class adds zebra-stripes to a table:
 Bordered Table
 The .table-bordered class adds borders on all sides of the table and cells:
 Hover Rows
 The .table-hover class enables a hover state on table rows:
 Borderless Tables
 The .table-borderless class removes borders from the table
 Black Tables
 The .table-dark class adds a black background to the table
 Responsive Tables
 The .table-responsive class creates a responsive table The .table-responsive
class adds a scrollbar to the table when needed

82. BOOTSTRAP TABLE EXAMPLE
<body>
<div class="container mt-3">
<h2>Striped Rows</h2>
<p>The .table-striped class adds
zebra-stripes to a table:</p>
<table class="table table-striped">
<tr>
<td>Firstname</th>
<td>Lastname</th>
<td>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</table>
</div>
</body>

83. BOOTSTRAP IMAGES
 Rounded Corners
 The .rounded class adds rounded corners to an image (IE8 does not
support rounded corners):
 Circle
 The . rounded-circle class shapes the image to a circle (IE8 does not
support rounded corners):
 Thumbnail
 The .img-thumbnail class shapes the image to a thumbnail:
 Responsive Images
 Images comes in all sizes. So do screens. Responsive images
automatically adjust to fit the size of the screen.
 Create responsive images by adding an .img-fluid 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:

84. EXAMPLE OF BOOTSTRAP IMAGE
<body>
<div class="container mt-3">
<h2>Circle</h2>
<p> This is an example of Bootstrap Image</p>
<img src="cinqueterre.jpg" class="rounded-circle“
width="304" height="236">
</div>
</body>

85. BOOTSTRAP BUTTONS
 Button Styles
 Bootstrap provides various styles of buttons with the
following classes:
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
The button classes can be used on <a>, <button>, or
<input> elements

86. FEW EXAMPLES OF BOOTSTRAP BUTTONS
<button type="button" class="btn btn-primary">Primary
</button>
<button type="button" class="btn btn-secondary">Secondary
</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning
</button>

87. BUTTON SIZES
 Bootstrap provides four button sizes with the following
classes:
.btn-lg
.btn-md
.btn-sm
.btn-xs
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

88. ACTIVE/DISABLED BUTTONS
 A button can be set to an active (appear pressed) or a
disabled (unclickable) state:
 The class .active makes a button appear pressed, and the class
.disabled makes a button unclickable:
 <button type="button" class="btn btn-primary active"> Active
Primary</button>
 <button type="button" class="btn btn-primary disabled">
Disabled Primary</button>

89. BOOTSTRAP JUMBOTRONS
 A Bootstrap jumbotron specifies a big box for getting extra
attention to some special content or information. It is
displayed as a grey box with rounded corners. It can also
enlarge the font sizes of the text inside it.
 You can put any valid HTML or other Bootstrap elements/
classes inside a jumbotron.
 The class .jumbotron within the <div> element is used to
create a jumbotron.
 Eg: <div class="jumbotron">

90. BOOTSTRAP GLYPHICONS
 Glyphicons are the icon fonts that are used in web
projects. Bootstrap provides 260 Glyphicons
Some examples of Glyphicons are:
 Envelope glyphicon
 Print glyphicon
 Search glyphicon
 Download glyphicon etc.
 Syntax:
<span class="glyphicon glyphicon-name"></span>

91. EXAMPLE
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
Search
</button>

92. TYPOGRAPHY
 Bootstrap 5 uses a default font-size of 1rem (16px by default), and its
line-height is 1.5.
<h1> - <h6>
 Bootstrap 5 styles HTML headings (<h1> to <h6>) with a bolder font-
weight and a responsive font-size.
 You can also use .h1 to .h6 classes on other elements to make them
behave as headings
For Eg: <p class="h2">h2 Bootstrap heading</p>
Display Headings
 Display headings are used to stand out more than normal headings
 There are six classes to choose from: .display-1 to .display-6
For Eg: <h1 class="display-2">Display 2</h1>

93. TYPOGRAPHY
<small>
 In Bootstrap 5 the HTML <small> element (and the .small class) is
used to create a smaller, secondary text in any heading
<mark>
 Bootstrap 5 will style <mark> and .mark with a yellow background
color and some padding
<dl>
 Bootstrap 5 will style the HTML <dl> element
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Output
Coffee
- black hot drink
Milk
- white cold drink

94. MORE TYPOGRAPHY CLASSES
 .text-break Prevents long text from breaking layout
 .text-center Indicates center-aligned text
 .text-end Indicates right-aligned text
 .text-lowercase Indicates lowercased text
 .text-uppercase Indicates uppercased text
 .text-capitalize Indicates capitalized text
 .list-inline Places all list items on a single line
 .list-unstyled Removes the default list-style and left
margin on list items (works on both <ul> and <ol>)

95. THANK YOU