UI Technologies

Bootstrap

Introduction to Bootstrap
• “Bootstrap” is a “CSS framework”, developed by “Twitter” company, which is a collection of ready-
made “css classes”, which can be used in web pages to apply styles to the elements easily.
• Bootstrap can be used without css knowledge also. To customize the bootstrap styles, CSS
knowledge is required.
• Bootstrap provides responsive web design by default.
• Bootstrap was developed based on “jQuery” and "Popper".
• jQuery is a JavaScript library, which provides a set of functions to perform DOM manipulations
easily.
• Popper is a JavaScript library, which provides a set of functions to display popup messages.

Preparing Environment for Bootstrap

Downloading Bootstrap
• Go to “http://getbootstrap.com”.
• Select the latest version in the dropdownlist (Ex: v4.1). It by default, selects the latest version.
• Click on “Download”.
• Click on “Download” again under "Compiled CSS and JS".
• Download the file “bootstrap-4.1.1.zip”.
• Go to the downloaded location, right click on the “bootstrap-4.1.1.zip” file and click on “Extract All”.
• After extracting, you will get extracted folder.
• Copy the following files from “extracted folder (bootstrap-4.1.1)”, into “application folder
(c:\bootstrap)”.
▪ css\bootstrap.css
▪ js\bootstrap.js

Downloading jQuery
• Go to “http://jquery.com”.
• Click on “Download jQuery 3.3.1” (version number may vary).
• Click on “Download the uncompressed, development jQuery 3.3.1”.
• If required, press "Ctrl+S" to save the file. You will get a file “jquery-3.3.1.js”.
• Copy and paste “jquery-3.3.1.js” file from Downloaded location into “c:\bootstrap” folder.

D. Harsha Vardhan (UI Expert) P a g e 234 | 675

1
 UI Technologies

Downloading Popper
• Go to “https://unpkg.com/popper.js”.
• If required, press "Ctrl+S" to save the file. You will get a file “popper.js”.
• Copy and paste “popper.js” file from Downloaded location into “c:\bootstrap” folder.

Importing Bootstrap

Importing Bootstrap

• The "viewport meta tag" is used to set the actual width of the device as width of the web page.
• It is must to make the web page responsive.
• It also sets the initial zoom to "1" (actual size).

First Example on Bootstrap (c:\bootstrap\first.html)

D. Harsha Vardhan (UI Expert) P a g e 235 | 675

2
 UI Technologies

“container” class
• It acts as “outer container” for the entire page.
• It makes the web page responsive.
• The entire content of the page should be inside the “container”.
• It provides margin left and margin right for the page.
Syntax:
<div class=”container”>
any content
</div>

Example on Container

“container-fluid” class
• It also acts as “outer container” for the entire page.
• It also makes the web page responsive.
• The entire content of the page should be inside the “container-fluid”.

D. Harsha Vardhan (UI Expert) P a g e 236 | 675

3
 UI Technologies

• It removes margin left and margin right for the page. It makes the content occupy the full available
width of the web page.
Syntax:
<div class=”container”>
any content
</div>

Example on Container-Fluid

Text Colors
• It is used to set colors of the text.
• Based on the requirement, the developer can use any of the available colors.
• If you want other color, you can use CSS.

D. Harsha Vardhan (UI Expert) P a g e 237 | 675

4
 UI Technologies

List of Classes
• text-primary : Blue text color
• text-success : Green text color
• text-info : Light blue text color
• text-warning : Orange text color
• text-danger : Red text color
• text-muted : Grey color
• text-secondary : Darker grey text color
• text-dark : Dark grey text color
• text-light : Light grey text color

Example on Text Colors

D. Harsha Vardhan (UI Expert) P a g e 238 | 675

5
 UI Technologies

Background Colors
• It is used to set background colors of the element.
• Based on the requirement, the developer can use any of the available colors.
• If you want other color, you can use CSS.

List of Classes
• bg-primary : Blue background color
• bg-success : Green background color
• bg-info : Light blue background color
• bg-warning : Orange background color
• bg-danger : Red background color
• bg-secondary : Grey background color
• bg-dark : Dark grey background color
• bg-light : Light grey background color

Example on Background Colors

D. Harsha Vardhan (UI Expert) P a g e 239 | 675

6
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 240 | 675

7
 UI Technologies

Display Headings
• It is used to display headings with thin text and larger font size.

List of Classes
• display-1 : Display Heading 1
• display-2 : Display Heading 2
• display-3 : Display Heading 3
• display-4 : Display Heading 4

Example on Display Headings

D. Harsha Vardhan (UI Expert) P a g e 241 | 675

8
 UI Technologies

Text Alignment
• We can apply text alignment, by using the following bootstrap css classes.
• Default is "left alignment".

List of Classes
• text-left : Left alignment
• text-center : Center alignment
• text-right : Right alignment
• text-justify : Justify alignment

Example on Text Alignment

D. Harsha Vardhan (UI Expert) P a g e 242 | 675

9
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 243 | 675

10
 UI Technologies

Text Styles
• The following set of bootstrap classes are used to set text styles such as bold, italic, uppercase etc.

List of Classes
• font-weight-bold : Bold text
• font-weight-light : Light weight text
• font-italic : Italic text
• text-lowercase : Lowercase
• text-uppercase : Uppercase
• text-capitalize : Capitalize

Example on Text Styles

D. Harsha Vardhan (UI Expert) P a g e 244 | 675

11
 UI Technologies

Lead
• It is used to display a leading paragraph (in larger font size and more line height).

List of Classes
• lead : Paragraph with larger font size and larger line height

Example on Lead

D. Harsha Vardhan (UI Expert) P a g e 245 | 675

12
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 246 | 675

13
 UI Technologies

Visibility
• It is used to show / hide the element in the web page.

List of Classes
• visible : Element is visible
• invisible : Element is invisble

Example on Visibility

D. Harsha Vardhan (UI Expert) P a g e 247 | 675

14
 UI Technologies

Understanding the Columns

• It is used to divide the web page as rows.
• Each row contains 12 equal blocks / columns.
• A <div> tag can occupy one or more blocks.
• A row can have maximum 12 <div> tags.

List of Classes
• .col-n : Specifies how may columns are occupied by the <div> tag

Example on Grid System - 12

D. Harsha Vardhan (UI Expert) P a g e 248 | 675

15
 UI Technologies

Example on Grid System - 4+4+4

D. Harsha Vardhan (UI Expert) P a g e 249 | 675

16
 UI Technologies

Example on Grid System - 6+6

D. Harsha Vardhan (UI Expert) P a g e 250 | 675

17
 UI Technologies

Example on Grid System - 4+8

Example on Grid System - Automatic

D. Harsha Vardhan (UI Expert) P a g e 251 | 675

18
 UI Technologies

Grid System with Responsive Web Design

• It is used to display the content differently on different devices, based on the screen resolution.
• It makes the web page fit for the current resolution automatically.
• We divide the devices into 5 types.

Sl. Type of Device Screen width Examples

No (pixels)

1 Extra Small Devices 1px to 575px iPhone 2G, 3G (320px / 480px height)

2 Small Devices 576px to 767px iPhone 4, 4S (640px width / 960px height)

iPhone 5, 5C, 5C, SE (640px width / 1136px)
iPhone 6, 6S, 7, 8 (750px width / 1134px height)

3 Medium Devices 768px to 991px Samsung Note 1 (800px width / 1280px height)

D. Harsha Vardhan (UI Expert) P a g e 252 | 675

19
 UI Technologies

4 Large Devices 992px to 1199px iPhone 6 Plus (1080px width / 1920px height)
iPhone 10 (1125px width / 2436px height)

5 Extra Large Devices 1200px to unlimited iPhone 7+, 8+ (1242px width / 2208px height)
Most-used laptops

Extra Small Devices:

• Very-Low-range Phones: Screens between 1px to 575px width.
• Ex: iPhone 2G, 3G (320px width / 480px height)
<div class=”col -n”>…</div>
<div class=”col -n”>…</div>
…

Small Devices:
• Low-range phones & Tablets: Screens between 576px to 767px width.
• Ex: iPhone 4, 4s (640px width / 960px height)
• Ex: iPhone 5, 5s, 5C, SE (640px width / 1136px height)
• Ex: iPhone 6, 6s, 7, 8 (750px width / 1334px height)
<div class=”col-sm-n”>…</div>
<div class=”col-sm-n”>…</div>
…

Medium Devices:
• Lower-mid range phones & Small laptops: Screens between 768px to 991px width.
• Ex: Samsung Note 1 (800px width / 1280px height)
<div class=”col-md-n”>…</div>
<div class=”col-md-n”>…</div>
…

Large Devices:
• Mid-range phones & Small laptops: Screens between 992px to 1199px width.
• Ex: iPhone 6 Plus (1080px width / 1920px height)
• Ex: iPhone 10 (1125px width / 2436px height)
<div class=”col-lg-n”>…</div>

D. Harsha Vardhan (UI Expert) P a g e 253 | 675

20
 UI Technologies

<div class=”col-lg-n”>…</div>
…

Extra Large Devices:

• High-end phones & Most used laptops: Screens between 1200px to unlimited width.
• Ex: iPhone 7+, 8+ (1242px width / 2208px height)
• Ex: iPad (all types)
<div class=”col-lg-n”>…</div>
<div class=”col-lg-n”>…</div>
…

Example on Grid System - Responsive

D. Harsha Vardhan (UI Expert) P a g e 254 | 675

21
 UI Technologies

Example on Grid System - Responsive - With Content

D. Harsha Vardhan (UI Expert) P a g e 255 | 675

22
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 256 | 675

23
 UI Technologies

Jumbotron
• It is used to display heading and paragraph in large size with a special box to highlight its content.

List of Classes
• jumbotron : Large heading and paragraph.

D. Harsha Vardhan (UI Expert) P a g e 257 | 675

24
 UI Technologies

Example on Jumbotron

Image Shapes
• It is used to display images with rounded corners.

List of Classes
• rounded : Rounded corners
• rounded-circle : Circle-shaped image
• img-thumbnail : Bordered image

D. Harsha Vardhan (UI Expert) P a g e 258 | 675

25
 UI Technologies

Example on Image Shapes

Image Alignment
• It is used to specify horizontal alignment of the image.

List of Classes
• float-left : Left alignment
• float-right : Right alignment
• mx-auto : Center alignement
• d-block : Display the image as a block; this is needed to apply "mx-auto".

Example on Image Alignment

D. Harsha Vardhan (UI Expert) P a g e 259 | 675

26
 UI Technologies

Image Fluid
• It is used to display reduce the size of the image automatically, if the page width is reduced.

List of Classes
• img-fluid : Image size automatically gets reduced if the screen width is reduced.

Example on Image Fluid

D. Harsha Vardhan (UI Expert) P a g e 260 | 675

27
 UI Technologies

Basic Table
• It is used to display table with expand width and padding, horizontal borders.

List of Classes
• table : bootstrap table style.

Example on Basic Table

D. Harsha Vardhan (UI Expert) P a g e 261 | 675

28
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 262 | 675

29
 UI Technologies

Borderless Table
• It is used to display table without borders.

List of Classes
• table-borderless : Table without border

Example on Borderless Table

D. Harsha Vardhan (UI Expert) P a g e 263 | 675

30
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 264 | 675

31
 UI Technologies

Bordered Table
• It is used to display table with both horizontal & vertical borders.

List of Classes
• table-bordered : Table with border

Example on Bordered Table

D. Harsha Vardhan (UI Expert) P a g e 265 | 675

32
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 266 | 675

33
 UI Technologies

Striped Table
• It is used to display table with alternate row background

List of Classes
• table-striped : Table with alternate row background.

Example on Striped Table

D. Harsha Vardhan (UI Expert) P a g e 267 | 675

34
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 268 | 675

35
 UI Technologies

Hover Table
• It is used to display table with background color change on row hover.

List of Classes
• table-hover : Table row background color gets changed on hover

Example on Hover Table

D. Harsha Vardhan (UI Expert) P a g e 269 | 675

36
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 270 | 675

37
 UI Technologies

Table Background Colors

• It is used to display table / rows with different background colors.
• These classes can be applicable for <table>, <tr> or <td> tags.

List of Classes
• table-primary : Blue color
• table-success : Green color
• table-danger : Red color
• table-info : Light blue color
• table-warning : Orange color
• table-active : Grey color
• table-secondary : Different Grey color
• table-light : Light grey color
• table-dark : Dark grey color

Example on Table Background Colors

D. Harsha Vardhan (UI Expert) P a g e 271 | 675

38
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 272 | 675

39
 UI Technologies

Table Header Background Colors

• It is used to display table header row with dark / light colors.
• These classes can be applicable only for <thead> tag.

D. Harsha Vardhan (UI Expert) P a g e 273 | 675

40
 UI Technologies

List of Classes
• thead-dark : Black color
• thead-light : Light Grey color

Example on Table Header Background Colors

D. Harsha Vardhan (UI Expert) P a g e 274 | 675

41
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 275 | 675

42
 UI Technologies

Table Small
• It is used to display table with small size (less padding).

List of Classes
• table-sm : Table with Less padding

Example on Table Small

D. Harsha Vardhan (UI Expert) P a g e 276 | 675

43
 UI Technologies

Table Responsive
• It is used to display scrollbar for the table automatically, when the web page is resized.
• This class can be applicable only for <div> tag that contains <table> tag.

List of Classes
• table-responsive : Table with scrollbar

Example on Table Responsive

D. Harsha Vardhan (UI Expert) P a g e 277 | 675

44
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 278 | 675

45
 UI Technologies

Alerts
• It is used to display alert message (short message) at the top of the web page.

List of Classes
• alert : Represents alert
• fade : Show alert with fade
• show : Displays the alert
• close : Displays close button
• alert-primary : Blue color
• alert-success : Green color
• alert-info : Light blue color
• alert-warning : Orange color
• alert-danger : Red color
• alert-secondary : Grey color

D. Harsha Vardhan (UI Expert) P a g e 279 | 675

46
 UI Technologies

• alert-light : Light grey color

• alert-dark : Black color

Example on Alerts

D. Harsha Vardhan (UI Expert) P a g e 280 | 675

47
 UI Technologies

Button Colors
• It is used to display buttons with different colors.

List of Classes
• btn : Bootstrap button style
• btn-primary : Blue color
• btn-secondary : Grey color
• btn-success : Green color
• btn-info : Light blue color
• btn-warning : Orange color
• btn-danger : Red color

D. Harsha Vardhan (UI Expert) P a g e 281 | 675

48
 UI Technologies

• btn-dark : Black color

• btn-light : Light grey color
• btn-link : Link style

Example on Button Colors

Button Outline
• It is used to display buttons with only border (white background).

D. Harsha Vardhan (UI Expert) P a g e 282 | 675

49
 UI Technologies

List of Classes
• btn-outline-primary : Blue color
• btn-outline-secondary : Grey color
• btn-outline-success : Green color
• btn-outline-info : Light blue color
• btn-outline-warning : Orange color
• btn-outline-danger : Red color
• btn-outline-dark : Black color
• btn-outline-light : Light grey color

Example on Button Outline

D. Harsha Vardhan (UI Expert) P a g e 283 | 675

50
 UI Technologies

Button Sizes
• It is used to display large / small buttons.

List of Classes
• btn-block : Full-width button
• btn-lg : Large button
• btn-sm : Small button

Example on Button Sizes

Button Groups
• It is used to display grouped buttons.
• It reduces margin between buttons.

D. Harsha Vardhan (UI Expert) P a g e 284 | 675

51
 UI Technologies

List of Classes
• btn-group : Group of buttons

Example on Button Groups

Button Vertical Groups

• It is used to display vertically grouped buttons.
• It reduces margin between buttons.

List of Classes
• btn-group-vertical : Vertical group of buttons

Example on Button Vertical Groups

D. Harsha Vardhan (UI Expert) P a g e 285 | 675

52
 UI Technologies

Button DropDown
• It is used to display dropdownlist for the button.

List of Classes
• dropdown-toggle : Dropdown button
• dropdown-toggle-split : Split button
• caret : Caret symbol
• dropdown-menu : Represents the menu
• dropdown-item : Represents item in the menu

Example on Button DropDown

D. Harsha Vardhan (UI Expert) P a g e 286 | 675

53
 UI Technologies

Basic Badges
• It is used to indication near heading / button.

List of Classes
• badge : Represents Badge

Example on Badges

D. Harsha Vardhan (UI Expert) P a g e 287 | 675

54
 UI Technologies

Badge Colors
• It is used to set background colors for the badges

List of Classes
• badge-primary : Blue color
• badge-secondary : Grey color

D. Harsha Vardhan (UI Expert) P a g e 288 | 675

55
 UI Technologies

• badge-success : Green color

• badge-info : Light blue color
• badge-warning : Orange color
• badge-danger : Red color
• badge-dark : Black color
• badge-light : Light grey color

Example on Badge Colors

Pill Badges
• It is used to display more rounded badges.

D. Harsha Vardhan (UI Expert) P a g e 289 | 675

56
 UI Technologies

List of Classes
• badge-pill : More rounded badge

Example on Pill Badges

Basic Progress Bar

• It is used to display progress bar, based on the given width and height.

List of Classes
• progress : Progress bar container
• progress-bar : Progress
• mx-auto : Center alignment

D. Harsha Vardhan (UI Expert) P a g e 290 | 675

57
 UI Technologies

Example on Basic Progress Bar

Progress Bar Colors

• It is used to display progress bar with different colors..

List of Classes
• bg-success : Green color
• bg-info : Light blue color
• bg-warning : Orange color
• bg-danger : Red color
• bg-secondary : Grey color
• bg-light : Light grey color
• bg-dark : Black color
• progress-bar-striped : Striped progress bar
• progress-bar-animated : Animated progress bar

D. Harsha Vardhan (UI Expert) P a g e 291 | 675

58
 UI Technologies

Example on Progress Bar Colors

D. Harsha Vardhan (UI Expert) P a g e 292 | 675

59
 UI Technologies

Basic Pagination
• It is used to display page numbers.

List of Classes
• pagination : Enable pagination style
• page-item : Page number
• page-link : Page number link
• active : Current page

Example on Basic Pagination

D. Harsha Vardhan (UI Expert) P a g e 293 | 675

60
 UI Technologies

Pagination Size
• It is used to display pagination in large / small size.

List of Classes
• pagination-lg : Large size progress bar
• pagination-sm : Small size progress bar

Example on Pagination Size

D. Harsha Vardhan (UI Expert) P a g e 294 | 675

61
 UI Technologies

Pagination Alignment
• It is used to display pagination left / center / right side of the page.

List of Classes
• justify-content-center : Center alignment for pagination
• justify-content-end : Right alignment for pagination

Example on Pagination Alignment

D. Harsha Vardhan (UI Expert) P a g e 295 | 675

62
 UI Technologies

Breadcrumbs
• It is used to display location (navigation path) of the current web page in the website.

D. Harsha Vardhan (UI Expert) P a g e 296 | 675

63
 UI Technologies

List of Classes
• breadcrumb : Represents entire breadcrumb
• breadcrumb-item : Represents single item in the breadcrumb
• active : Represents current item

Example on Breadcrumbs

Basic List Groups

• It is used to display items (text / hyperlinks) as a list.

List of Classes
• list-group : Represents the list

D. Harsha Vardhan (UI Expert) P a g e 297 | 675

64
 UI Technologies

• list-group-flush : Remove borders for the list group

• list-group-item : Represents single item
• list-group-item-action : Hover style for the item

Example on Basic List Groups

List Group Colors

• It is used to display list group with different background colors.

List of Classes
• list-group-item-success : Green color

D. Harsha Vardhan (UI Expert) P a g e 298 | 675

65
 UI Technologies

• list-group-item-secondary : Grey color

• list-group-item-info : Light blue color
• list-group-item-warning : Orange color
• list-group-item-danger : Red color
• list-group-item-dark : Black color
• list-group-item-light

Example on List Group Colors

D. Harsha Vardhan (UI Expert) P a g e 299 | 675

66
 UI Technologies

Basic Cards
• It is used to display some content (box) with header and footer.

List of Classes
• card : Represents entire card
• card-header : Header of card
• card-body : Content of card
• card-footer : Footer of card

Example on Basic Cards

D. Harsha Vardhan (UI Expert) P a g e 300 | 675

67
 UI Technologies

Card Colors
• It is used to display some content (box) with header and footer.

List of Classes
• bg-primary : Blue color
• bg-success : Green color
• bg-info : Light blue color
• bg-warning : Orange color
• bg-danger : Red color
• bg-secondary : Grey color
• bg-dark : Black color

Example on Card Colors

D. Harsha Vardhan (UI Expert) P a g e 301 | 675

68
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 302 | 675

69
 UI Technologies

Card Images
• It is used to display cards with images.

List of Classes
• card-img-top : Represents card image at top
• card-img-bottom : Represents card image at bottom
• card-title : Title of the card
• card-text : Normal text of the card

Example on Card Images

D. Harsha Vardhan (UI Expert) P a g e 303 | 675

70
 UI Technologies

Card Groups
• It is used to display group of cards side by side.

List of Classes
• card-group : Group of cards

D. Harsha Vardhan (UI Expert) P a g e 304 | 675

71
 UI Technologies

Example on Card Groups

D. Harsha Vardhan (UI Expert) P a g e 305 | 675

72
 UI Technologies

Tooltip
• It is used to display tooltip message when the user places mouse pointer on it.

List of Classes
• data-toggle="tooltip" : Enables tooltip for the element
• data-placement="top | bottom | left | right" : Specifies position of tooltip
• title : Tooltip text

Example on Tooltip

D. Harsha Vardhan (UI Expert) P a g e 306 | 675

73
 UI Technologies

Popover
• It is used to display message (some text) when the user clicks an element.
• The popover can show when the cursor focuses the element.
• The popover can have title and content also.

List of Classes
• data-toggle="popover" : Enables popover
• title : Title of popover
• data-content="some text" : Text of popover
• data-placement="top | bottom | left | right" : Position of popover
• data-trigger="focus" : Show popover on focus

Example on Popover

D. Harsha Vardhan (UI Expert) P a g e 307 | 675

74
 UI Technologies

Basic Collapsible
• It is used to display expandable / collapsible content.
• The content will be shown when the user clicks on the button / link.

List of Classes
• collapse : Represents collapsible container.
• data-toggle="collapse" : Enables collapsible content, when button is clicked
• data-target="#id" : Connects the button with collapsible container.

Example on Basic Collapsible

D. Harsha Vardhan (UI Expert) P a g e 308 | 675

75
 UI Technologies

Link Collapsible
• It is used to display expandable / collapsible content, based on the link.
• The content will be shown when the user clicks on the link.

List of Classes
• show : Shows the collapsible content by default, while page is loading.

Example on Link Collapsible

D. Harsha Vardhan (UI Expert) P a g e 309 | 675

76
 UI Technologies

Accordion
• It is used to display a group of collapsible items and show any one of them, when the user clicks it.
• Out of few collapsible items, only one is visible to the user.

List of Classes
• show : Shows the card
• data-parent="id" : Specifies reference to the parent div

Example on Accordion

D. Harsha Vardhan (UI Expert) P a g e 310 | 675

77
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 311 | 675

78
 UI Technologies

Inline Form
• It is used to create a simple form (with limited no. of elements), where the elements appear side-by-
side.

List of Classes
• form-inline
• form-group
• form-control
• mr-n
• form-check
• form-check-label

D. Harsha Vardhan (UI Expert) P a g e 312 | 675

79
 UI Technologies

• form-check-input

Example on Inline Form

Stacked Form
• It is used to create a form, where the form elements appear line-by-line.

List of Classes
• form-text

D. Harsha Vardhan (UI Expert) P a g e 313 | 675

80
 UI Technologies

• form-control-file

Example on Stacked Form

D. Harsha Vardhan (UI Expert) P a g e 314 | 675

81
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 315 | 675

82
 UI Technologies

Form Grid
• It is used to create a form, where the desired form elements appear side-by-side.

List of Classes
• form-row

D. Harsha Vardhan (UI Expert) P a g e 316 | 675

83
 UI Technologies

Example on Form Grid

D. Harsha Vardhan (UI Expert) P a g e 317 | 675

84
 UI Technologies

Horizontal Form Grid

• It is used to create a form, where the labels and form elements appear side-by-side.

List of Classes
• form-row
• col-sm-n
• col-form-label
• offset-sm-n

D. Harsha Vardhan (UI Expert) P a g e 318 | 675

85
 UI Technologies

Example on Horizontal Form Grid

D. Harsha Vardhan (UI Expert) P a g e 319 | 675

86
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 320 | 675

87
 UI Technologies

Input Groups
• It is used to create a form element, with some text inside it.

List of Classes
• input-group
• input-group-prepend
• input-group-append
• input-group-text

Example on Input Groups

D. Harsha Vardhan (UI Expert) P a g e 321 | 675

88
 UI Technologies

Form Validation
• It is used to display success message / error message, based on the value that is entered by the user.

List of Classes
• needs-validation

D. Harsha Vardhan (UI Expert) P a g e 322 | 675

89
 UI Technologies

• novalidate="novalidate"
• valid-feedback
• invalid-feedback
• valid-tooltip
• invalid-tooltip
• required="required"
• pattern="reg exp"

Example on Form Validation

D. Harsha Vardhan (UI Expert) P a g e 323 | 675

90
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 324 | 675

91
 UI Technologies

Basic Navigation
• It is used to display a simple navigation bar with few hyperlinks
• When the user clicks on any hyperlink, the corresponding web page (html file) will be opened.

List of Classes
• nav
• nav-item
• nav-link

Example on Basic Navigation

D. Harsha Vardhan (UI Expert) P a g e 325 | 675

92
 UI Technologies

Navigation Alignment
• It is used to set alignment for the simple navigation bar.
• Default is left alignment.
• You can set center / right alignment.

List of Classes
• justify-content-center
• justify-content-end

Example on Navigation Alignment

D. Harsha Vardhan (UI Expert) P a g e 326 | 675

93
 UI Technologies

Vertical Navigation
• It is used to display the simple navigation bar in vertical mode.

D. Harsha Vardhan (UI Expert) P a g e 327 | 675

94
 UI Technologies

List of Classes
• flex-column

Example on Vertical Navigation

D. Harsha Vardhan (UI Expert) P a g e 328 | 675

95
 UI Technologies

Tabs
• It is used to display a set of tabs and show the corresponding content below, when the user clicks
on any one tab.

List of Classes
• nav-tabs
• data-toggle="tab"
• tab-content
• tab-pane
• container
• active
• fade

Example on Tabs

D. Harsha Vardhan (UI Expert) P a g e 329 | 675

96
 UI Technologies

Pills
• It is used to display a set of tabs with more rounded corners and background color.

List of Classes
• nav-pills
• data-toggle="pill"

Example on Pills

D. Harsha Vardhan (UI Expert) P a g e 330 | 675

97
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 331 | 675

98
 UI Technologies

Tabs with DropDown

• It is used to display dropdown menu in the tabs.

List of Classes
• dropdown
• dropdown-toggle
• data-toggle="dropdown"
• dropdown-menu
• dropdown-item

Example on DropDown

D. Harsha Vardhan (UI Expert) P a g e 332 | 675

99
 UI Technologies

Basic Navigation Bar

• It is used to display a complex navigation bar (NavBar) with few hyperlinks.
• When the user clicks on any hyperlink, the corresponding web page (html file) will be opened.
• NavBar can shrink when we reduce the width of the browser / in mobile devices, automatically.
• NavBar supports to display website logo (text / image).
• NavBar supports to display form elements such as textboxes etc.

D. Harsha Vardhan (UI Expert) P a g e 333 | 675

100
 UI Technologies

List of Classes
• navbar
• navbar-expand-sm
• navbar-dark
• navbar-nav
• nav-item
• nav-link
• active

Example on Basic Navigation Bar

home.html

about.html

D. Harsha Vardhan (UI Expert) P a g e 334 | 675

101
 UI Technologies

contact.html

D. Harsha Vardhan (UI Expert) P a g e 335 | 675

102
 UI Technologies

NavBar Collapsible
• It is used to display a collapsible navbar. That means when the web page has been opened in small
devices, the menu will be automatically converted into "=" icon. When the user clicks on this icon,
the menu gets opened.

List of Classes
• navbar-expand-sm
• navbar-brand
• navbar-toggler
• data-toggle="collapse"
• data-target="#id"
• collapse
• navbar-collapse

Example on NavBar Collapsible

D. Harsha Vardhan (UI Expert) P a g e 336 | 675

103
 UI Technologies

NavBar DropDown
• It is used to display a dropdown menu for the navigation bar item.

List of Classes
• dropdown
• dropdown-toggle
• data-toggle="dropdown"

D. Harsha Vardhan (UI Expert) P a g e 337 | 675

104
 UI Technologies

• dropdown-menu
• dropdown-item

Example on NavBar DropDown

D. Harsha Vardhan (UI Expert) P a g e 338 | 675

105
 UI Technologies

NavBar Search
• It is used to display a search box for the navigation bar.

List of Classes
• form-inline
• form-control
• mr-sm-n

Example on NavBar Search

D. Harsha Vardhan (UI Expert) P a g e 339 | 675

106
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 340 | 675

107
 UI Technologies

NavBar FixedTop
• It is used to display a navbar always at the top of the page, even though the user has scrolled the
page up / down.

List of Classes
• fixed-top

Example on NavBar FixedTop

D. Harsha Vardhan (UI Expert) P a g e 341 | 675

108
 UI Technologies

NavBar Sticky Top

• By default, the navbar appears in the middle of the page; and the navbar will be displayed always at
the top of the page, only when the user has scrolled the page up / down.

List of Classes
• sticky-top

D. Harsha Vardhan (UI Expert) P a g e 342 | 675

109
 UI Technologies

Example on NavBar Sticky-Top

D. Harsha Vardhan (UI Expert) P a g e 343 | 675

110
 UI Technologies

Scrollspy
• It is used to change the "active" class to the current menu item, when the web page is scrolled
vertically.

D. Harsha Vardhan (UI Expert) P a g e 344 | 675

111
 UI Technologies

List of Classes
• data-spy="scroll"
• data-target=".navbar"
• data-offset="pixels"

Example on ScrollSpy

D. Harsha Vardhan (UI Expert) P a g e 345 | 675

112
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 346 | 675

113
 UI Technologies

Carousel
• It is used to display image slide show with / without text.

List of Classes
• carousel
• slide
• data-ride="carousel"
• data-interval="milli seconds"
• carousel-indicators
• data-target="#id"
• data-slide-to="n"
• active
• carousel-inner
• carousel-item
• carousel-caption
• carousel-control-prev
• carousel-control-prev-icon
• data-slide="prev"
• data-slide="next"

D. Harsha Vardhan (UI Expert) P a g e 347 | 675

114
 UI Technologies

Example on Carousel

D. Harsha Vardhan (UI Expert) P a g e 348 | 675

115
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 349 | 675

116
 UI Technologies

Modal
• It is used to display modal popup box with desired content.

List of Classes
• data-toggle="modal"
• data-target="#id"
• modal
• fade
• modal-dialog
• modal-lg
• modal-dialog-centered
• modal-content
• modal-header
• modal-body
• modal-footer
• close
• data-dismiss="modal"

Example on Modal

D. Harsha Vardhan (UI Expert) P a g e 350 | 675

117
 UI Technologies

D. Harsha Vardhan (UI Expert) P a g e 351 | 675

118
 UI Technologies

LESS

Introduction to LESS
• LESS stands for "LEAN CSS".
• "LESS" makes it easy to modify the CSS file. If you make the change in one place, the same will be
automatically effected in multiple places.
• The LESS code is written in ".less" files and will be converted into "css" files, as the browser supports
only CSS, but not LESS.
• If you modify the the LESS file and compile it into CSS file, the change will be effected in multiple
places in CSS.
• Additionally, LESS supports some additional features such as variables, operators, mixins, color
functions etc., which are not supported by CSS. LESS is the superset of CSS, which supports all
concepts of CSS along with the specified additional features.

1. Download and Install WinLess

2. Create LESS file
3. Compile LESS file to CSS file
4. Import CSS file into HTML file
5. Run the HTML file

1. Downloading and Installing WinLess

• Go to "http://winless.org".

D. Harsha Vardhan (UI Expert) P a g e 352 | 675

119
 UI Technologies

• Click on "Download".
• You will get a file called "WinLess-1.9.1.msi".

• Double click on "WinLess-1.9.1.msi".

D. Harsha Vardhan (UI Expert) P a g e 353 | 675

120
 UI Technologies

• Check the checkbox "I accept the terms in the License Agreement".
• Click on "Install".

D. Harsha Vardhan (UI Expert) P a g e 354 | 675

121
 UI Technologies

• Click on "Finish".

2. Creating LESS File

• Open Visual Studio Code.
• Go to "File" > "New File".
• Write the following program:

D. Harsha Vardhan (UI Expert) P a g e 355 | 675

122
 UI Technologies

• Go to "File" menu – "Save".

D. Harsha Vardhan (UI Expert) P a g e 356 | 675

123
 UI Technologies

• Enter filename as "StyleSheet.less".

• Select the folder "c:\ui".
• Click on "Save".

D. Harsha Vardhan (UI Expert) P a g e 357 | 675

124
 UI Technologies

• Now the "c:\ui\StyleSheet.less" file is ready.

D. Harsha Vardhan (UI Expert) P a g e 358 | 675

125
 UI Technologies

3. Compile LESS File into CSS File

• Go to "Start" > "WinLess" > "WinLess".

D. Harsha Vardhan (UI Expert) P a g e 359 | 675

126
 UI Technologies

• WinLess opened.

• Click on "Add folder".

• Select "c:\ui". Click on "Select Folder".

D. Harsha Vardhan (UI Expert) P a g e 360 | 675

127
 UI Technologies

• It shows the list of LESS files automatically. It also generates CSS filename automatically.
• Click on "Compile".

• It compiles the LESS file and generates CSS file automatically.

• The compiled CSS code (automatically generated):

D. Harsha Vardhan (UI Expert) P a g e 361 | 675

128
 UI Technologies

4. Import the CSS File into HTML File

• Open Visual Studio Code.
• Go to "File" > "New File".
• Write the following program:

• Go to "File" menu – "Save".

D. Harsha Vardhan (UI Expert) P a g e 362 | 675

129
 UI Technologies

• Enter filename as "Page1.html".

• Select the folder "c:\ui".
• Click on "Save".

D. Harsha Vardhan (UI Expert) P a g e 363 | 675

130
 UI Technologies

• Now the "c:\ui\Page1.html" file is ready.

D. Harsha Vardhan (UI Expert) P a g e 364 | 675

131
 UI Technologies

5. Run the HTML File

• Go to "c:\ui" folder and double click on "Page1.html".
Output:

Variables
• In LESS, variables are used to store a value.
• The variable create once, can be used many times within the same less file. While converting into
CSS, the variables will be replaced with actual value.
• Variable names must be started with "@".

D. Harsha Vardhan (UI Expert) P a g e 365 | 675

132
 UI Technologies

Mixins
• Mixins are used to mix a CSS class with another style.

Syntax (LESS File):

.classname
{
property1: value;
property2: value;
}
selector
{
.classname;
property3: value;
property3: value;
}

Result (CSS File):

.classname
{
property1: value;
property2: value;
}
selector
{
property1: value;
property2: value;
property3: value;
property3: value;

D. Harsha Vardhan (UI Expert) P a g e 366 | 675

133
 UI Technologies

Example on Mixins
c:\ui\StyleSheet.less

c:\ui\Page1.html

Mixins With Parameters

• Mixins can receive one or more parameters (arguments), and utlize those values into the styles.
Everytime when you call the mixin, you can pass different values to the mixin.

D. Harsha Vardhan (UI Expert) P a g e 367 | 675

134
 UI Technologies

Syntax (LESS File):

.classname(@parameter1, @parameter2, …)
{
property1: value;
property2: value;
}

Example on Mixins with Parameters

c:\ui\StyleSheet.less

c:\ui\Page1.html

D. Harsha Vardhan (UI Expert) P a g e 368 | 675

135
 UI Technologies

Nested Rules
• These are used to apply CSS styles for the child elements of a specific parent tag.

Syntax (LESS File):

parenttag
{
child1
{
styles here
}
child2
{
styles here
}
}

Result (CSS File):

parenttag child1
{
}

parenttag child2
{
}

Example on Nested Rules

c:\ui\StyleSheet.less

D. Harsha Vardhan (UI Expert) P a g e 369 | 675

136
 UI Technologies

c:\ui\Page1.html

Operators
• In LESS, we can use all the arithmetical operators such as +, -, *, / etc.
• The LESS compiler calculates the operators and generates the result.

Syntax (LESS File):

selector
{
property: a+b;
}

Result (CSS File):

selector
{
property: sum;

D. Harsha Vardhan (UI Expert) P a g e 370 | 675

137
 UI Technologies

Example on Operators
c:\ui\StyleSheet.less

c:\ui\Page1.html

Color Functions
• These are used to make the color darker / lighter.

Syntax (LESS File):

darken(color, percentage);

D. Harsha Vardhan (UI Expert) P a g e 371 | 675

138
 UI Technologies

lighten(color, percentage);

Result (CSS File):

#ffffff
#000000

Example on Operators
c:\ui\StyleSheet.less

c:\ui\Page1.html

D. Harsha Vardhan (UI Expert) P a g e 372 | 675

139