IFETCE R-2019A ACADEMIC YEAR:2023-2024

IFET COLLEGE OF ENGINEERING

(An Autonomous Institution)
DEPARTMENT OF CSE & IT
CSH007 – UI and UX DESIGNS
YEAR/SEM: III/V
MODULE
UNIT III– UI DEVELOPMENT KIT
Introduction to Bootstrap, Overview of features and components - Bootstrap Grid System -
Bootstrap CSS Components: typography, colors, and spacing classes, forms and input
components with Bootstrap - Navigation menus and bars - Bootstrap javascript Components -
Bootstrap's modal, carousel, tooltip components, image gallery – Bootstrap Customization -
Bootstrap's Sass files, optimization - Extending Bootstrap with third-party plugins - Setting up a
development environment with Bootstrap.
3.1 INTRODUCTION TO BOOTSTRAP
Bootstrap is a free and open-source tool collection for creating responsive websites and web
applications. It is the most popular HTML, CSS, and JavaScript framework for developing
responsive, mobile-first websites. It solves many problems which we had once, one of which is
the cross-browser compatibility issue. Nowadays, the websites are perfect for all the browsers
(IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones).
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..
 Faster and Easier Web Development.
 It creates Platform-independent web pages.
 It creates Responsive Web-pages.
 It is designed to be responsive to mobile devices too.
 It is Free! Available on www.getbootstrap.com
Bootstrap is a powerful front-end framework that simplifies the process of creating user
interfaces (UIs) for websites and web applications. It provides a collection of ready-to-use CSS
and JavaScript components, along with a responsive grid system, to help developers build
modern and responsive UIs quickly and efficiently.
Here are some key aspects of Bootstrap in UI development:
 Responsive Grid System: Bootstrap's responsive grid system is at the core of its
framework. It allows developers to create flexible and responsive layouts by dividing the
page into 12 equal-width columns. The grid system automatically adjusts the layout and
reorganizes columns based on different screen sizes, making your UI look great on
various devices.
 CSS Components: Bootstrap offers a wide range of CSS components that can be easily
integrated into your UI. These components include buttons, forms, navigation bars, alerts,
modals, carousels, and much more. Each component comes with pre-defined styles and
behaviors, saving developers time and effort in writing custom CSS from scratch.
 Typography and Utility Classes: Bootstrap provides typography styles and utility
classes that assist in structuring and formatting text within your UI. Typography styles
ensure consistent and readable text, while utility classes offer quick and easy adjustments
for margins, padding, alignment, and other common CSS properties.

1
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 JavaScript Components: In addition to CSS components, Bootstrap includes a set of

JavaScript plugins that enhance the functionality and interactivity of your UI. These
plugins cover features such as modals, tooltips, dropdowns, sliders, and form validation.
By leveraging these JavaScript components, you can create dynamic and engaging user
experiences.
 Customization and Theming: Bootstrap allows for easy customization and theming to
match your project's design requirements. You can modify variables, such as colors,
fonts, spacing, and more, to create a unique look and feel. Additionally, Bootstrap
provides a range of pre-built themes and templates, both from the official Bootstrap team
and the community, offering a variety of design options to choose from.
 Cross-Browser Compatibility: Bootstrap is designed to be compatible with major web
browsers, ensuring that your UI works consistently across different platforms and
devices.
By using Bootstrap in UI development, you can benefit from its extensive set of pre-built
components, responsive grid system, and flexibility for customization. It allows you to create
visually appealing, responsive, and interactive UIs while maintaining consistency and saving
development time. Whether you're a beginner or an experienced developer,
3.1.1 Advantages and Disadvantages of Bootstrap
Advantages of Bootstrap
The main advantage of Bootstrap are
 It is very easy to use. Anybody having basic knowledge of HTML and CSS can use
Bootstrap.
 It facilitates users to develop a responsive website.
 It is compatible on most of browsers like Chrome, Firefox, Internet Explorer, Safari and
Opera etc.
Disadvantage of Bootstrap
 Personal risk
 Lack of networking
 Slow growth
3.1.2 Bootstrap package
The Bootstrap package contains
 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 style and an advanced grid system.
 Components: Bootstrap contains a lot of reusable components built to provide
iconography, dropdowns, navigation, alerts, pop-overs, and much more.
 JavaScript Plugins: Bootstrap also contains a lot of custom jQuery plugins. You can
easily include them all, or one by one.
 Customize: Bootstrap components are customizable and you can customize Bootstrap's
components, LESS variables, and jQuery plugins to get your own style.
Bootstrap 4
Bootstrap is the newest and latest version of Bootstrap. It is the most popular HTML, CSS,
JavaScript framework for developing responsive, mobile first websites.

2
IFETCE R-2019A ACADEMIC YEAR:2023-2024

3.1.3 Applications of Bootstrap

 Responsive Web Design: Bootstrap empowers developers to create websites that
seamlessly adapt to different screen sizes and devices, providing a consistent and optimal
user experience.
 Mobile-First Development: Bootstrap’s mobile-first approach ensures that websites are
designed and optimized for mobile devices, catering to the increasing usage of
smartphones and tablets.
 Efficient Prototyping: With its extensive collection of pre-designed components and
templates, Bootstrap facilitates rapid prototyping, enabling developers to quickly create
functional website layouts and UIs.
 Consistent Cross-Browser Compatibility: Bootstrap’s standardized CSS and JavaScript
codebase ensures consistent rendering and functionality across various web browsers,
saving developers time and effort in browser-specific troubleshooting.
 Customizable Themes and Styling: Bootstrap offers a wide range of customizable
themes and styles, allowing developers to create visually appealing and unique designs
that align with their brand or project requirements.
 Time and Cost Efficiency: By leveraging the power of Bootstrap, developers can save
significant time and effort in front-end development, resulting in faster project delivery
and cost savings

3.2 OVERVIEW OF FEATURES AND COMPONENTS

Bootstrap provides a wide range of features and components that can be used to build
responsive and visually appealing user interfaces (UI). Here is an overview of some key features
and components offered by Bootstrap:
 Responsive Grid System: Bootstrap's responsive grid system allows you to create
flexible and responsive layouts for your UI. It provides a 12-column grid that
automatically adjusts and stacks columns based on the screen size, ensuring that your UI
looks good on different devices and screen resolutions.
 CSS Components: Bootstrap offers a comprehensive collection of pre-built CSS
components that can be easily integrated into your UI. These components include
buttons, forms, navigation menus, dropdowns, alerts, modals, carousels, cards, badges,
and many more. They are designed to be customizable and provide consistent styling
across different browsers.
 Typography: Bootstrap provides a set of typography styles and classes that help
maintain consistent and readable text throughout your UI. It offers a default typography
style and allows you to modify font sizes, weights, alignments, and other typographic
elements.
 CSS Utilities: Bootstrap includes a variety of utility classes that enable you to apply
styling and layout adjustments to elements quickly. These utility classes assist with tasks
such as margins, padding, text alignment, display properties, visibility, and more.
 JavaScript Components: In addition to CSS components, Bootstrap offers a collection
of JavaScript plugins that add interactive features to your UI. These plugins include
functionalities like modals, tooltips, carousels, dropdowns, form validation, scrollspy,
and more. By including the Bootstrap JavaScript files and initializing these components,
you can easily incorporate interactive elements into your UI.

3
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 Customization and Theming: Bootstrap allows for extensive customization and

theming. It provides a Sass-based framework that enables you to modify variables such as
colors, typography, spacing, and more, allowing you to create a custom theme that
matches your project's branding and design requirements. Bootstrap also offers a variety
of ready-to-use themes and templates, providing a range of design options.
 Cross-Browser Compatibility: Bootstrap is designed to work consistently across
different browsers, ensuring a consistent user experience for your UI. It takes care of
handling browser inconsistencies and provides a solid foundation for cross-browser
compatibility.
 Responsive Media Queries: Bootstrap's CSS and components are built with
responsiveness in mind. It utilizes media queries to ensure that your UI adapts and looks
great on different devices and screen sizes.
Bootstrap's features and components provide developers with a powerful toolkit for UI
development. They streamline the process of building responsive and visually appealing UIs,
making it a popular choice for projects of all sizes and complexity levels.
3.2.1 Components of Bootstrap.
Bootstrap provides a variety of customizable and reusable components which makes the
development faster and easier. They are heavily based on the base modifier nomenclature i.e. the
base class has many groups of shared properties together while the modifier class has a group of
individual styles. For example, .btn is a base class and .btn-primary or .btn-success is a modifier
class. The bootstrap components range from alerts, buttons, badges, cards to various other
components. Bootstrap is bundled with tons of components that can be reused to provide a good
user experience and user interactions in a web page like navigation bars, pop-ups, dropdowns,
icons, buttons, pre-designed forms and also sizing options for different elements.
3.2.2 List of components:
 Jumbotron: It simply put extra attention to particular content or information by making
it larger and more eye-catching.
 Alerts: It is a popup with a predefined message that appears after a particular action.
 Buttons: It is customized buttons that are used to perform an action in the form, dialogue
box, etc. They are in multiple states, sizes and have predefined styles.
 Button group: It is a group of buttons aligned in a single line and they can be arranged
both vertically as well as horizontally.
 Badge: It Is a labeling component that is used to add additional information.
 Progress Bar: It is used to show the progress of a particular operation with a custom
progress bar. They have text labels, stacked bars, and animated backgrounds.
 Spinner: The spinner displays the loading state of websites or projects. They are built
with HTML, CSS and don’t require any JavaScript.
 Scrollspy: It keeps updating the navigation bar to the currently active link based on the
scroll position in the viewport.
 List group: It is used to display an unordered series of content in a proper way.
 Card: It provides a customizable, extensible, and flexible content container.
 Dropdown: It is used to drop the menu in the format of a list of links, they are contextual
and toggleable overlays.
 Navs: It is used to create a basic and simple navigation menu with a .nav base class.
 Navbar: The navigation bar is the headers at the top of a website or webpage.

4
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 Forms: Forms are used to take multiple inputs at once from the user. Bootstrap has two
layouts available stacked and inline.
 Input groups: They have extended form controls by adding a button, button group or
text on either side of inputs.
 Breadcrumb: It provides the location of the current page in a navigational hierarchy and
also adds separators through CSS.
 Carousel: It is a slide show of image or text content built with CSS 3D and JavaScript.
 Toast: It displays a message for a small amount of time, a few seconds. They are alert
messages designed to imitate push notifications popular in desktop and mobile systems.
 Tooltip: It provides small information about the element/link when the mouse hovers
over the element.
 Popovers: It displays extra information about the element/link when clicked on it.
 Collapse: It is a JavaScript plugin that is used to show or hide the content.
 Modal: It is a small popup window positioned over the actual window.
 Pagination: It is used to easily navigate between different pages, a large block of
connected links is used for making them accessible.
 Media Object: The Media object is used for repetitive and complex components like
tweets or blogs. The images or videos are placed/aligned to the left or the right of the
content.

3.3 BOOTSTRAP GRID SYSTEM

The Bootstrap grid system is a fundamental component of the framework that allows you
to create responsive and flexible layouts in your UI. It provides a 12-column grid system that
helps you structure and arrange content across different screen sizes and devices. Here's an
overview of the Bootstrap grid system and how it works in UI development:
 Grid Structure: The grid system is based on a concept of rows and columns. Your UI
layout is divided into rows, and each row consists of up to 12 columns. The columns act
as containers for your content.
 Column Classes: Bootstrap provides a set of CSS classes to define the width and
behavior of columns. You can assign classes like col-, col-sm-, col-md-, col-lg-, or col-
xl- followed by a number (1 to 12) to specify the column width. For example, col-6
would create a column that spans six columns out of the available 12.
 Responsive Behavior: The grid system is responsive, meaning that the column widths
can automatically adjust based on the screen size. By using the responsive column classes
mentioned earlier (col-sm-, col-md-, col-lg-, col-xl-), you can define different column
widths for different screen sizes. This allows your UI to adapt and look good on various
devices, from mobile phones to desktops.
 Column Nesting: You can nest columns within columns to create more complex layouts.
By placing columns inside other columns, you can create multi-level structures and
achieve fine-grained control over the arrangement of content.
 Offsetting Columns: Bootstrap allows you to offset columns by adding offset classes.
These classes (offset-, offset-sm-, offset-md-, etc.) push the columns horizontally,
creating space between columns.
 Alignment and Ordering: Bootstrap provides alignment classes (justify-content-start,
justify-content-center, justify-content-end, etc.) that allow you to align columns

5
IFETCE R-2019A ACADEMIC YEAR:2023-2024

horizontally within a row. You can also use the order- classes to change the order of
columns within a row, enabling you to control the visual flow of your UI.
 Container and Container-fluid: To contain your grid-based layout, Bootstrap provides
two types of containers: .container and .container-fluid. The .container class sets a fixed-
width container, while the .container-fluid class creates a full-width container that spans
the entire viewport.
By utilizing the Bootstrap grid system, you can create responsive UI layouts that automatically
adapt to different screen sizes. It provides a consistent and organized structure for your content,
ensuring a visually appealing and user-friendly experience across devices.
3.3.1 Grid Classes
The Bootstrap grid system has four classes that can be combined to make more flexible
layouts. 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.
3.3.2 Grid System Rules
Some Bootstrap grid system rules:
 Rows must be placed within a .container (fixed-width) or .container-fluid (full-width)
for proper alignment and padding
 Use rows to create horizontal groups of columns
 Content should be placed within columns, and only columns may be immediate
children of rows
 Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
 Columns create gutters (gaps between column content) via padding. That padding is
offset in rows for the first and last column via negative margin on .rows
 Grid columns are created by specifying the number of 12 available columns you wish to
span. For example, three equal columns would use three .col-sm-4
 Column widths are in percentage, so they are always fluid and sized relative to their
parent element
3.3.3 Basic Structure of a Bootstrap Grid
The following is a basic structure of a Bootstrap grid:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
</div>

6
IFETCE R-2019A ACADEMIC YEAR:2023-2024

So, to create the layout you want, create a container (<div class="container">). Next, 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.
3.3.2 Grid System: Bootstrap Grid System allows up to 12 columns across the page. You can
use each of them individually or merge them together for wider columns as shown in the figure
3.1. You can use all combinations of values summing up to 12. You can use 12 columns each of
width 1, or use 4 columns each of width 3 or any other combination.

Fig: 3.1 Grid System

3.4 BOOTSTRAP CSS COMPONENTS: TYPOGRAPHY, COLORS, AND SPACING

CLASSES, FORMS AND INPUT COMPONENTS WITH BOOTSTRAP
Bootstrap provides a wide range of CSS components that you can utilize to enhance the
typography, colors, spacing, forms, and input components in your UI. Here's an overview of
these Bootstrap CSS components:
 Typography: Bootstrap offers a set of typography classes that allow you to style text
elements. You can apply classes like .h1, .h2, .lead, .text-muted, and more to define
different heading sizes, emphasized text, muted text, and other typographic styles.
 Colors: Bootstrap provides a variety of color classes that can be used to apply color to
elements. You can use classes like .text-primary, .bg-success, .text-danger, and more to
apply predefined color styles to text or background elements.
 Spacing: Bootstrap offers spacing classes to control the spacing between elements. You
can use classes like .mt-2, .px-3, .my-4, and more to add margin and padding to elements.
The spacing classes follow a naming convention of {property}-{size}, where m
represents margin, p represents padding, and the size can be a number from 0 to 5.
 Forms: Bootstrap provides CSS classes to style form elements and create consistent form
layouts. You can apply classes like .form-control, .form-group, .form-check, and more to
style input fields, form groups, checkboxes, radio buttons, and other form elements.
 Input Components: Bootstrap offers additional CSS classes for customizing and
enhancing input components. Examples include .input-group for creating input groups
with addons or buttons, .input-group-append and .input-group-prepend for adding
elements before or after input fields, and .form-control-file for styling file input fields.
 Validation: Bootstrap provides CSS classes for indicating and styling validation states of
form elements. Classes like .is-valid and .is-invalid can be applied to form controls to
highlight valid or invalid inputs. Additionally, you can use the .was-validated class on the
parent form to apply validation styles to all its controls.
These are just a few examples of the CSS components that Bootstrap offers for typography,
colors, spacing, forms, and input components. Bootstrap's extensive set of CSS classes allows

7
IFETCE R-2019A ACADEMIC YEAR:2023-2024

you to easily style and customize these aspects of your UI, ensuring a cohesive and visually
appealing design. By leveraging these components, you can create consistent and user-friendly
interfaces while saving development time and effort.
3.4.1 Typography
The typography component in Bootstrap provides a set of CSS classes and styles to enhance the
visual appearance and styling of text elements in your UI. Typography is a feature of Bootstrap
for styling and formatting the text content. It is used to create customized headings, inline
subheadings, lists, paragraphs, aligning, adding more design-oriented font styles, and much
more. Bootstrap support global settings for the font stack, Headings and Link styles to be used in
the web app for every type of OS and Device to deliver the best user interface. Here's an
overview of the typography component in Bootstrap:
 Headings: Bootstrap offers CSS classes for styling headings from <h1> to <h6>. By
applying the classes .h1 to .h6, you can control the size and weight of the headings to
create a visual hierarchy in your content.
 Display Headings: Bootstrap provides additional CSS classes for creating large,
attention-grabbing headings. These classes, such as .display-1 to .display-4, can be
applied to headings to make them stand out and draw the user's attention.
 Lead Text: The .lead class can be applied to paragraphs to give them a larger font size
and increased line height. It is useful for highlighting introductory or important text.
 Inline Text Elements: Bootstrap offers CSS classes for styling inline text elements.
Classes like .text-muted, .text-primary, .text-success, and others can be applied to text
elements to change their color and provide visual cues.
 Abbreviations: Bootstrap provides a class, .initialism, to style abbreviations and
acronyms. When applied, it adds a smaller font size and slightly increased letter spacing
to the element.
 Blockquotes: Bootstrap includes CSS classes for styling blockquotes. The .blockquote
class can be applied to a <blockquote> element to give it a special styling. Additionally,
the .blockquote-footer class can be used for styling the footer of a blockquote.
 Text Alignment: Bootstrap provides classes to align text within elements. Classes like
.text-left, .text-center, .text-right, and .text-justify can be applied to align text in various
ways.
 Text Transformation: Bootstrap offers classes to transform the text in elements. The
.text-lowercase and .text-uppercase classes can be applied to change the text to lowercase
or uppercase, respectively.
 Responsive Typography: Bootstrap's typography classes are responsive by default. By
using responsive breakpoints, such as .text-sm, .text-md, and so on, you can apply
different typography styles for different screen sizes.
These are some of the key features and classes provided by the typography component in
Bootstrap. By utilizing these classes, you can easily style and customize the typography in your
UI, creating visually appealing and readable content.
Typography can be used to create:
 Headings
 Subheadings
 Text and Paragraph font color, font type, and alignment
 Lists
 Other inline elements
8
IFETCE R-2019A ACADEMIC YEAR:2023-2024

Some classes and Tags to implement the typography feature of bootstrap:

 h1 – h6: To match the font styling of a heading but cannot use the associated HTML
element.
 text-muted: It is used for text color, text-muted fades the text. i.e. text greyed out.
 display: It is used to create better headings.
 lead: It is used to make a paragraph stand out i.e. Visually better.
 mark: It is used to highlight the text.
 small: It is used to create secondary subheadings.
 initialism: It is used to render abbreviations in slightly small text size.
 blockquote: It is used to quote content.
 blockquote-footer: It is the footer details for identifying the source of the Quote.
 text-center: It is used to align the text to the center.
 list-inline: It is used to make the element of the list inline.
 text-truncate: It is used to shorten the longer text by truncating with an ellipsis.
 text-uppercase: It is used to transform text to uppercase.
 text-lowercase: It is used to transform text to lowercase.
 text-capitalize: It is used to transform text to capitalize the first letter of each word
leaving other letters in lowercase.
 pre-scrollable: Makes a <pre> element scrollable
 dl-horizontal: Lines up the terms(<dt>) and descriptions (<dd>) elements side-by-side.
 list-unstyled: the default list-style and left margin on list items are removed.
 text-right: Depicts right-aligned text.
 text-left: Depicts left-aligned text.
3.4.2 Colors
The colors component in Bootstrap allows you to apply predefined color classes to elements in
your UI, giving them visually appealing and consistent color styles. MDB is supported by an
extensive Material Design color system that themes our styles and components. This enables
more comprehensive customization and extension for any project. Here's an overview of the
colors component in Bootstrap:
 Text Colors: Bootstrap provides a set of classes to change the color of text elements.
You can use classes like .text-primary, .text-secondary, .text-success, .text-danger, .text-
warning, .text-info, .text-light, .text-dark, and .text-muted to apply different colors to text.
These classes can be applied to any HTML element containing text.
 Background Colors: Bootstrap offers classes to set the background color of elements.
You can use classes like .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-
warning, .bg-info, .bg-light, .bg-dark, and .bg-transparent to apply different background
colors. These classes can be used on any HTML element.
 Contextual Colors: Bootstrap provides contextual color classes that can be used to
indicate different states or meanings of elements. For example, you can use .bg-info to
represent informational content or .bg-danger to indicate a warning or error. Contextual
colors are available for both text and background, such as .text-success, .text-warning,
.bg-info, etc.
 Color Palettes: Bootstrap includes a set of predefined color palettes that you can use in
your UI. These palettes consist of a primary color and a set of related shades and tints. By

9
IFETCE R-2019A ACADEMIC YEAR:2023-2024

using the primary color class, such as .bg-primary or .text-primary, you can ensure
consistency and a harmonious color scheme throughout your UI.
 Customization: Bootstrap also allows you to customize the default color values and
create your own color palettes. By modifying the Sass variables or using the built-in
customization options, you can define your own set of colors to match your project's
branding and design requirements.
 Accessibility: Bootstrap's color classes are designed with accessibility in mind. The
contrast ratios between the text and background colors are carefully chosen to ensure
readability and meet accessibility standards.
By utilizing the colors component in Bootstrap, you can easily apply visually appealing
and consistent color styles to elements in your UI. Color plays a vital role in aiding visitors’
navigation through the site, guiding them through the site content quickly and easily, along with
a well-designed user interface. In addition to assisting in developing a content hierarchy, color
can draw attention to essential details and calls to action. The predefined color classes, along
with the customization options, provide flexibility and help maintain a cohesive design
throughout your project
3.4.3 Spacing classes
Bootstrap provides a set of spacing classes that allow you to add margin and padding to elements
in your UI. These spacing classes provide a convenient way to control the spacing between
elements and create visually appealing layouts. Here's an overview of the spacing classes in
Bootstrap:
 Margin Classes: Bootstrap offers margin classes that add spacing around elements.
These classes have the format m{direction}-{size}. The {direction} can be one of the
following: t (top), b (bottom), l (left), r (right), x (horizontal), or y (vertical). The {size}
can be a number from 0 to 5, indicating the amount of margin to be added. For example,
mt-3 adds a top margin of 3 units.
 Padding Classes: Bootstrap provides padding classes that add spacing within elements.
These classes follow the same format as the margin classes: p{direction}-{size}. They
allow you to add padding to the top, bottom, left, right, horizontal, or vertical sides of an
element. For example, py-2 adds vertical padding of 2 units.
 Auto Margins: Bootstrap also offers classes for automatically applying margins to
elements. The classes mx-auto and my-auto center the element horizontally and
vertically, respectively, by setting the left/right or top/bottom margins to "auto". This is
commonly used to center elements within their parent containers.
 Negative Margins: In addition to regular margins, Bootstrap provides negative margin
classes that allow you to adjust the positioning of elements. These classes have the format
m{-direction}-{size}, where {direction} and {size} follow the same conventions as the
regular margin classes. Negative margins can be used to pull elements closer or overlap
them with other elements.
By using these spacing classes, you can easily control the spacing between elements and achieve
the desired visual spacing in your UI. The classes are responsive, meaning they can be combined
with breakpoint prefixes (sm-, md-, lg-, xl-) to apply different spacing at different screen sizes.
Bootstrap's spacing classes provide a consistent and intuitive way to manage spacing in your UI
layout.

10
IFETCE R-2019A ACADEMIC YEAR:2023-2024

3.4.4 Forms
Bootstrap provides a comprehensive set of CSS classes and components for creating stylish and
user-friendly forms in your UI. These form components make it easier to structure and style form
elements, apply validation states, and enhance user interactions. Here's an overview of forms in
Bootstrap
 Form Structure: Bootstrap uses the <form> element as the container for your form. You
can add form controls, labels, and other form elements within the <form> tag.
 Form Controls: Bootstrap provides a range of CSS classes to style various form
controls, such as text inputs, checkboxes, radio buttons, select dropdowns, and more. For
example, the .form-control class can be applied to text inputs to give them a consistent
and visually appealing style.
 Form Layout: Bootstrap offers classes like .form-group and .form-inline to structure and
arrange form controls. The .form-group class can be applied to group related form
controls together, and the .form-inline class allows you to create a horizontal form layout
where form controls are placed side by side.
 Form Sizing: Bootstrap provides classes for controlling the size of form controls. You
can use classes like .form-control-sm and .form-control-lg to apply smaller or larger sizes
to inputs and select dropdowns, making them more visually distinctive.
 Form Validation: Bootstrap offers CSS classes to indicate the validation states of form
controls. By applying the .is-valid or .is-invalid class to a form control, you can visually
highlight valid or invalid input fields. Additionally, the .was-validated class can be added
to the <form> element to display validation styles for all its controls.
 Input Groups: Bootstrap allows you to create input groups by using the .input-group
class. Input groups combine an input field with additional elements like buttons,
dropdowns, or text, providing a convenient way to gather input and actions together.
 Custom Checkboxes and Radio Buttons: Bootstrap provides custom styles for
checkboxes and radio buttons. By using the .form-check class and associated classes like
.form-check-label, you can create custom-styled checkboxes and radio buttons.
 Form Help Text: Bootstrap allows you to add help text to form controls using the .form-
text class. This can be used to provide additional instructions, hints, or explanations
related to the form field.
These are just a few examples of the form-related features and components provided by
Bootstrap. By utilizing Bootstrap's form classes and components, you can create visually
appealing and interactive forms that enhance the user experience in your UI.
3.4.5 Input components
Bootstrap provides a variety of input components that you can use to create interactive and
visually appealing forms in your UI. These input components offer consistent styling and
additional features to enhance user input and interactions. Here's an overview of the input
components in Bootstrap:
 Text Inputs: Bootstrap offers the .form-control class to style text input fields. It provides
a clean and uniform appearance for text inputs across different browsers and devices.
 Textarea: Bootstrap provides styling for <textarea> elements using the .form-control
class. It gives the textarea a consistent appearance and resizable behavior.
 Select Dropdowns: Bootstrap allows you to style select dropdowns using the .form-
select class. It provides a unified look and feel for dropdowns and can be used with the
<select> element.

11
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 Checkboxes and Radio Buttons: Bootstrap offers custom styles for checkboxes and radio
buttons. You can use the .form-check class along with the appropriate input types (<input
type="checkbox"> or <input type="radio">) to create custom-styled checkboxes and
radio buttons.
 Switches: Bootstrap includes a switch component that can be used to create toggle
switches. By using the .form-switch class along with a checkbox input, you can create
visually appealing switches that can be toggled on and off.
 File Inputs: Bootstrap provides styling for file input fields using the .form-control-file
class. It enhances the appearance and interaction of file upload buttons, allowing users to
select files easily.
 Input Groups: Bootstrap allows you to create input groups by using the .input-group
class. Input groups combine an input field with additional elements like buttons,
dropdowns, or text, providing a convenient way to gather input and actions together.
 Range Inputs: Bootstrap offers styling for range input sliders using the <input
type="range"> element. By applying the .form-range class, you can create sliders that
allow users to select a value within a specified range.
 Datepickers: Although Bootstrap doesn't have a built-in datepicker component, it can be
easily integrated with third-party datepicker libraries such as jQuery UI's Datepicker or
Tempus Dominus's DateTimePicker to add date selection functionality to your forms.
These input components, along with Bootstrap's form-related classes, provide a powerful
toolkit for creating dynamic and interactive forms in your UI. By utilizing these components, you
can enhance the user experience and ensure a consistent design throughout your application.

3.5 NAVIGATION MENUS AND BARS

A navigation bar is used in every website to make it more user-friendly so that the
navigation through the website becomes easy and the user can directly search for the topic of
their interest.
Navbar: Bootstrap provide various types of navigation bar:
1. Basic Navbar: First of all, we will initialize it by using a nav tag which is an inbuilt tag
just like the paragraph tag and the header tags. Within this tag, we will call the
class=”navbar navbar-default” which are the inbuilt classes of the bootstrap that give the
top space of your web page to your navigation part and the default part is for the default
view of that bar which is white in color. Then going further, we will have two div tags
one class=”container-fluid” and the other class=”navbar-header”. These classes are
basically for the navigation bar to take the full upper width of the page and then we add
the homepage and the other links to it.
2. Inverted Navbar: It is quite similar to what we studied earlier in the Basic Navbar
section. The change comes inside the class associated with the nav tag i.e. instead of the
navbar-default we will use the navbar-inverse and the colors of the navigation bar get
inverted.
3. Coloured navigation Bar : In Bootstrap 4, To change the background colour of the
navigation bar we can use various classes with the nav tag-
.bg-primary – Blue
.bg-success – Green
.bg-warning – Yellow
.bg-danger – Red

12
IFETCE R-2019A ACADEMIC YEAR:2023-2024

.bg-secondary – Grey
.bg-dark – Black
.bg-light – White
Use .bg-color class to change the color of the navbar to the above-listed colors.
4. Right-Aligned Navbar: By default, the links on a navigation bar are arranged on the left,
To arrange the links on the right side of the navigation bar In this section, we will see that
in the navigation bar not only the space on the left but also in the right can be used. This
makes the navigation bar much more interactive. The change comes inside the last div tag
in which the list is present to be shown on the navbar. We simply add a new class in the
already existing class i.e. class= “nav navbar-nav” and we add navbar-right to it. Now we
can see the content on the right side of the navigation bar too. The content that will be
written last will appear closer to the center of the screen.
5. Fixed Navigation Bar: We can fix a navigation bar at the top of the webpage so that, if
you scroll down that webpage you can still view the navigation bar from any position on
the page. Scroll down the GeeksForGeeks HomePage to see this effect. To make a
navigation bar fixed at the top of the webpage, add a navbar-fixed-top class to the navbar.
6. Drop-Down Menu Navbar: This is a good approach to be used in designing a navigation
bar because if we are creating a website that has a lot of content in it and is quite big to
scroll then we can use this approach. The benefit of this approach is that the whole
navigation bar does not get occupied with these links. In this, the only change is the
introduction of a drop-down menu after the addition of the homepage. We will initialize a
div tag with class=”dropdown” to make a drop-down interface and after that, we can add
the content to it.
7. Collapsible Navigation Bar: To hide links on the navigation bar and make them visible
after clicking a button, we add a collapsible navigation bar. Add a navbar-toggle class to
a button, then add data-toggle=”collapse”, then add an id to the list of links and add the
name of that id inside data-target=”#id”. Then finally, wrap all the content of the navbar
inside a div element with class navbar-collapse collapse
8. Pagination: Bootstrap provides a Pagination component that helps divide content into
multiple pages. Pagination is commonly used for long lists or sets of data, allowing users
to navigate through different pages. The .pagination class can be used to create a
pagination menu with numbered links.
9. Breadcrumbs: Bootstrap offers a Breadcrumb component that displays the user's current
location within a hierarchy of pages. Breadcrumbs are typically displayed as a trail of
links, showing the user's path from the homepage to the current page. The .breadcrumb
class can be used to structure and style the breadcrumb navigation.
10. Navs: Bootstrap's Navs component allows you to create tabbed navigation menus. Navs
can be used to organize content into separate sections, and they support different styles
such as tabs or pills. You can use the .nav and .nav-item classes to structure the
navigation items and apply additional classes like .nav-tabs or .nav-pills to style the
navigation
3.6 BOOTSTRAP JAVASCRIPT COMPONENTS
Bootstrap provides a collection of JavaScript components that enhance the functionality
and interactivity of your UI. These components are designed to work seamlessly with Bootstrap's
CSS classes and offer a range of features. Here are some of the JavaScript components available
in Bootstrap:

13
IFETCE R-2019A ACADEMIC YEAR:2023-2024

 Modal: The Modal component allows you to display content in a popup dialog window.
It can be used for displaying additional information, forms, or images. The Modal
component provides methods for programmatically opening and closing modals, as well
as events for handling user interactions.
 Dropdown: The Dropdown component enables you to create dropdown menus and
dropdown toggles. It allows you to add dropdown functionality to navigation bars,
buttons, or any other HTML element. Dropdowns can be triggered by clicking or
hovering over the associated element and can contain various menu options.
 Tooltip: The Tooltip component provides contextual tooltips that appear when hovering
over an element. Tooltips can be used to display additional information or descriptions
related to specific elements. The Tooltip component includes options for customizing the
tooltip's position, appearance, and triggering behavior.
 Popover: The Popover component is similar to tooltips but offers more extensive
content. Popovers can contain text, images, or other HTML elements and provide
additional context or interaction options. They can be triggered by hovering or clicking
on an element and can be customized to fit your UI's design.
 Collapse: The Collapse component allows you to create collapsible sections of content. It
can be used to create accordions or collapsible panels that hide or reveal content with a
smooth animation. The Collapse component provides methods and events to control the
collapsing behavior programmatically.
 Carousel: The Carousel component enables you to create image or content sliders. It
allows you to showcase a set of images or content in a rotating manner. The Carousel
component provides controls for navigating between slides, indicators to display the
current slide, and options for autoplay and animation.
 Scrollspy: The Scrollspy component automatically highlights navigation links based on
the scroll position. It helps users navigate long pages by indicating the active section they
are currently viewing. Scrollspy can be used with navigation menus or custom elements,
and it updates the active state as the user scrolls.
 Collapse Navbar: Bootstrap's Navbar component includes JavaScript functionality to
automatically collapse the navigation menu on small screens. It adds a toggle button that
expands or collapses the menu when clicked, providing better user experience on mobile
devices.
These JavaScript components can be easily integrated into your UI by including the Bootstrap
JavaScript file and initializing the components using appropriate HTML attributes or JavaScript
code. They enhance the functionality and interactivity of your UI, making it more dynamic and
user-friendly
 Individual or compiled
Plugins can be included individually (using Bootstrap’s individual *.js files), or all at once using
bootstrap.js or the minified bootstrap.min.js (don’t include both).
 Dependencies
Some plugins and CSS components depend on other plugins. If you include plugins individually,
make sure to check for these dependencies in the docs. Also note that all plugins depend on
jQuery (this means jQuery must be included before the plugin files). Consult our package.json to
see which versions of jQuery are supported.

14
IFETCE R-2019A ACADEMIC YEAR:2023-2024

Our dropdowns, popovers and tooltips also depend on Popper.js..

 Data attributes
Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data
attributes (our preferred way of using JavaScript functionality). Be sure to only use one set of
data attributes on a single element (e.g., you cannot trigger a tooltip and modal from the same
button.) However, in some situations it may be desirable to disable this functionality. To disable
the data attribute API, unbind all events on the document namespaced with data-api like so:
$(document).off('.data-api')
Alternatively, to target a specific plugin, just include the plugin’s name as a namespace along
with the data-api namespace like this:
$(document).off('.alert.data-api')
 Events
Bootstrap provides custom events for most plugins’ unique actions. Generally, these come in an
infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an
event, and its past participle form (ex. shown) is triggered on the completion of an action. All
infinitive events provide preventDefault() functionality. This provides the ability to stop the
execution of an action before it starts. Returning false from an event handler will also
automatically call preventDefault().
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
 Programmatic API
We also believe you should be able to use all Bootstrap plugins purely through the JavaScript
API. All public APIs are single, chainable methods, and return the collection acted upon.
$('.btn.danger').button('toggle').addClass('fat')
All methods should accept an optional options object, a string which targets a particular method,
or nothing (which initiates a plugin with default behavior):
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately
Each plugin also exposes its raw constructor on a Constructor property:
$.fn.popover.Constructor. If you’d like to get a particular plugin instance, retrieve it directly
from an element: $('[rel="popover"]').data('popover').
 Asynchronous functions and transitions
All programmatic API methods are asynchronous and returns to the caller once the transition is
started but before it ends.
In order to execute an action once the transition is complete, you can listen to the corresponding
event.
$('#myCollapse').on('shown.bs.collapse', function (e) {
// Action to execute once the collapsible area is expanded
})
 Default settings
You can change the default settings for a plugin by modifying the plugin’s Constructor.Default
object

15
IFETCE R-2019A ACADEMIC YEAR:2023-2024

3.7 BOOTSTRAP'S MODAL, CAROUSEL, TOOLTIP COMPONENTS, IMAGE

GALLERY
Bootstrap provides several JavaScript components that are commonly used in UI
development. Here's an overview of Bootstrap's Modal, Carousel, Tooltip, and Image Gallery
components:
 Modal: The Modal component allows you to create modal windows, which are overlay
windows that appear on top of the main content. Modals are commonly used to display
additional information, forms, or media. They provide a focused and interactive
experience for users. With Bootstrap's Modal component, you can easily create and
customize modals. You can trigger modals with buttons or links and control their
visibility through JavaScript or data attributes. Bootstrap's Modal component is a
powerful feature that allows you to create modal windows in your UI. Modals are overlay
windows that appear on top of the main content and provide a focused and interactive
experience for users. They are commonly used to display additional information, forms,
or media.
To use the Modal component in your UI, you'll need to include the Bootstrap CSS and JavaScript
files in your project. Here's an overview of how to create and customize modals using Bootstrap:
1. HTML Structure: Start by defining the HTML structure for your modal. Typically, a
modal consists of a modal container, a modal dialog, and a modal content area. Here's an
example:
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal content goes here -->
</div>
</div>
</div>
2. Triggering the Modal: Next, you need to provide a way to trigger the modal. This can
be done using a button, link, or any other HTML element. Add the data-bs-toggle and
data-bs-target attributes to specify the target modal. Here's an example using a button:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#myModal">
Open Modal
</button>
3. Modal Content: Inside the modal content area (<div class="modal-content">), you can
add the desired content for your modal, such as text, forms, images, or any other HTML
elements. Customize the content to suit your specific needs.
4. Customizing the Modal: Bootstrap provides various classes and options to customize
the appearance and behavior of your modals. You can add classes like modal-lg or
modal-sm to adjust the size of the modal, modal-dialog-centered to center the modal
vertically, or modal-dialog-scrollable to enable scrolling within the modal.
5. JavaScript Initialization: Finally, you need to initialize the modal using JavaScript. You
can do this by including the Bootstrap JavaScript file and writing a script to handle the
modal functionality. Here's an example:
<script src="bootstrap.js"></script>
<script>

16
IFETCE R-2019A ACADEMIC YEAR:2023-2024

var myModal = new bootstrap.Modal(document.getElementById('myModal'));

</script>
This initializes the modal and provides programmatic control over its opening and
closing. You can use methods like show() and hide() to open or close the modal through
JavaScript. Remember to refer to the Bootstrap documentation for detailed information
on additional options, events, and customization possibilities for the Modal component.
 Carousel: The Carousel component allows you to create image or content sliders.
Carousels are used to showcase multiple images or content items in a rotating manner.
They are commonly used for image galleries, testimonials, or product showcases.
Bootstrap's Carousel component provides options for navigation controls (previous and
next), indicators to display the current slide, and autoplay functionality. You can easily
customize the appearance and behavior of the carousel to fit your UI. Bootstrap's
Carousel component allows you to create image or content sliders in your UI. Carousels
are commonly used to showcase multiple images or content items in a rotating manner.
Here's an overview of how to use the Carousel component in your UI:
1. HTML Structure: Start by defining the HTML structure for your carousel. The carousel
consists of a container element that holds the slides and navigation controls. Here's an
example:
<div id="myCarousel" class="carousel slide">
<!-- Carousel slides go here -->
<!-- Navigation controls go here -->
</div>
2. Carousel Slides: Inside the carousel container, add the carousel slides. Each slide is
defined using the <div> element with the class carousel-item. You can place images,
content, or any other HTML elements within the slides. The first slide should also include
the active class. Here's an example:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="image3.jpg" alt="Slide 3">
</div>
</div>
</div>
3. Navigation Controls: Bootstrap provides built-in navigation controls for the carousel.
You can add previous and next buttons, as well as indicators to show the current slide. To
add the navigation controls, include the following code within the carousel container:
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>

17
IFETCE R-2019A ACADEMIC YEAR:2023-2024

</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
4. Customizing the Carousel: Bootstrap provides various classes and options to customize
the appearance and behavior of your carousel. You can add classes like carousel-fade to
enable a fading transition between slides, carousel-caption to add captions to the slides,
or carousel-pause to control the interval at which slides change.
5. JavaScript Initialization: Finally, you need to initialize the carousel using JavaScript.
Include the Bootstrap JavaScript file and add the following script:
<script src="bootstrap.js"></script>
<script>
var myCarousel = new bootstrap.Carousel(document.getElementById('myCarousel'));
</script>
This initializes the carousel and provides programmatic control over its functionality.
You can use methods like next() and prev() to manually navigate the carousel or
customize the carousel behavior using the available options and events. Remember to
refer to the Bootstrap documentation for more details on additional options, events, and
customization possibilities for the Carousel component.
 Tooltip: The Tooltip component enables you to add interactive tooltips to elements on
your page. Tooltips are small information boxes that appear when users hover over or
interact with an element. They provide additional context or descriptions for elements.
With Bootstrap's Tooltip component, you can easily add tooltips to buttons, links, icons,
or any other HTML element. Tooltips can be customized in terms of appearance,
placement, and triggering behavior. Bootstrap's Tooltip component allows you to add
interactive tooltips to elements in your UI. Tooltips are small information boxes that
appear when users hover over or interact with an element, providing additional context or
descriptions. Here's an overview of how to use the Tooltip component in your UI:
1. HTML Structure: Start by adding the element to which you want to attach the tooltip.
This can be a button, link, icon, or any other HTML element. For example:
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-
placement="top" title="Tooltip text">
Hover over me
</button>
2. Tooltip Initialization: Include the Bootstrap JavaScript file and initialize the tooltip
using JavaScript. Bootstrap's Tooltip component utilizes the data-bs-toggle and data-bs-
placement attributes to specify the tooltip's behavior and position. Here's an example:
<script src="bootstrap.js"></script>
<script>

18
IFETCE R-2019A ACADEMIC YEAR:2023-2024

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-

toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
3. Customizing the Tooltip: Bootstrap provides various options and attributes to customize
the appearance and behavior of your tooltips. You can modify the tooltip's position using
the data-bs-placement attribute (e.g., top, bottom, left, right). Additionally, you can apply
custom CSS classes, modify the tooltip's visibility duration, or trigger the tooltip
manually using JavaScript.
4. Programmatic Control: You can also control the tooltip programmatically using
JavaScript. Bootstrap's Tooltip component offers methods to show, hide, enable, or
disable tooltips. For example, to show a tooltip programmatically, you can use the
following code:
var tooltip = new bootstrap.Tooltip(document.getElementById('myElement'));
tooltip.show();
Remember to replace 'myElement' with the appropriate element ID.
 Image Gallery: While Bootstrap doesn't provide a specific Image Gallery component,
you can easily create an image gallery using the combination of Bootstrap's Grid system,
Modal component, and Carousel component. By organizing your images in a grid layout
and using modals or carousels to display the full-size images, you can create an image
gallery with a responsive and interactive design. You can also add additional features like
captions, thumbnails, or navigation controls to enhance the gallery experience. Bootstrap
doesn't provide a specific Image Gallery component out-of-the-box, but you can create an
image gallery using the combination of Bootstrap's Grid system, Modal component, and
Carousel component. Here's an approach to building an image gallery in UI using
Bootstrap:
1. HTML Structure: Start by organizing your images within a grid layout using
Bootstrap's Grid system. Here's an example of a basic grid structure:
<div class="row">
<div class="col-md-4">
<img src="image1.jpg" alt="Image 1" class="gallery-image">
</div>
<div class="col-md-4">
<img src="image2.jpg" alt="Image 2" class="gallery-image">
</div>
<div class="col-md-4">
<img src="image3.jpg" alt="Image 3" class="gallery-image">
</div>
<!-- Add more images as needed -->
</div>
2. Modal with Carousel: To display the full-size images in an interactive manner, you can
utilize the combination of the Modal and Carousel components. Wrap each image within
a clickable element (e.g., <a>) and link it to a modal that contains the Carousel
component. Here's an example:

19
IFETCE R-2019A ACADEMIC YEAR:2023-2024

<div class="row">
<div class="col-md-4">
<a href="#modal1" data-bs-toggle="modal">
<img src="image1.jpg" alt="Image 1" class="gallery-image">
</a>
</div>
<div class="col-md-4">
<a href="#modal2" data-bs-toggle="modal">
<img src="image2.jpg" alt="Image 2" class="gallery-image">
</a>
</div>
3. Navigation Controls: To display the full-size images in an interactive manner, you can
utilize the combination of the Modal and Carousel components. Wrap each image within
a clickable element (e.g., <a>) and link it to a modal that contains the Carousel
component. Here's an example:
<div id="modal1" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<div id="carousel1" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" alt="Image 1">
</div>
<!-- Add more carousel slides as needed -->
</div>
</div>
</div>
</div>
</div>
</div>
4. JavaScript Initialization: Include the Bootstrap JavaScript file and initialize the
Carousel component for each modal. Here's an example:
<script src="bootstrap.js"></script>
<script>
var carouselList = [].slice.call(document.querySelectorAll('[data-bs-ride="carousel"]'));
carouselList.forEach(function (carousel) {
new bootstrap.Carousel(carousel);
});
</script>
5. Customization: Customize the appearance, transitions, and additional features of the
Carousel component and modals by applying relevant Bootstrap classes and attributes.
These components provide a solid foundation for creating interactive and visually
appealing UI elements. By utilizing Bootstrap's Modal, Carousel, Tooltip, and combining
them with other Bootstrap components, you can create engaging user interfaces with
advanced functionality.

20
IFETCE R-2019A ACADEMIC YEAR:2023-2024

3.8 BOOTSTRAP CUSTOMIZATION

Bootstrap provides various customization options that allow you to tailor its appearance
and behavior to suit your UI requirements. Here are some ways you can customize Bootstrap in
your UI:
 Color Scheme: Bootstrap allows you to customize the color scheme by overriding its
default color variables. You can define your own color variables in a separate CSS file or
use Bootstrap's built-in customization tool, such as the SASS variables _custom.scss file.
By modifying the color variables, you can create a unique color palette for your UI.
 Typography: Bootstrap provides default typography styles, but you can further
customize them to match your design. You can modify font styles, sizes, weights, and
other typography-related properties by targeting the appropriate CSS classes or by
defining your own custom styles.
 Component Overrides: Each Bootstrap component comes with its own set of CSS
classes and styles. You can override these styles by targeting the specific component
classes or by adding custom CSS rules. This allows you to change the appearance and
layout of individual components to align with your UI design.
 Layout Customization: Bootstrap's Grid system allows you to create responsive layouts,
but you can customize it to fit your specific needs. You can adjust the number of
columns, gutter spacing, and breakpoints to create a layout that suits your UI design.
 SASS Customization: If you're using Bootstrap's SASS version, you have even more
flexibility in customizing Bootstrap. SASS provides variables, mixins, and functions that
allow you to override default styles, define custom styles, and extend Bootstrap's
functionality. You can modify SASS files directly or create your own SASS files that
import Bootstrap's core files and override styles as needed.
 Customizing Components: Bootstrap also provides options for customizing individual
components. For example, you can add custom CSS classes or modify component-
specific properties to achieve the desired look and behavior. Refer to the Bootstrap
documentation for each component to understand the available customization options.
 Third-party Themes: There are also third-party themes available for Bootstrap that
provide pre-built customizations and additional styles. These themes often come with
their own set of CSS files and customization options, allowing you to quickly apply a
different look and feel to your UI.
 Custom CSS: You can create a custom CSS file and override the default Bootstrap
styles. By targeting specific Bootstrap classes or elements, you can modify colors, fonts,
spacing, and more. To ensure your custom styles override the default ones, include your
custom CSS file after the Bootstrap CSS file in your HTML.
There various reasons to customize Bootstrap. You may want to:
 Change the existing Bootstrap styles such as colors, fonts, or borders
 Change the Bootstrap grid layout such as breakpoints or gutter widths
 Extend Bootstrap classes with new custom classes (ie: btn-custom)
Remember to carefully manage your customizations to ensure they don't interfere with
Bootstrap's core functionality or cause compatibility issues. It's also recommended to document
your customizations and keep them separate from the Bootstrap core files to facilitate future
updates and maintenance. Overall, Bootstrap provides a solid foundation for building UIs, and its
customization options allow you to create unique and visually appealing designs while
leveraging its powerful features and components.

21
IFETCE R-2019A ACADEMIC YEAR:2023-2024

3.9 BOOTSTRAP'S SASS FILES, OPTIMIZATION

Bootstrap provides Sass (Syntactically Awesome Style Sheets) files that allow for more
advanced customization and optimization of the framework. Sass is a CSS preprocessor that adds
additional features and functionality to CSS. Here's an overview of Bootstrap's Sass files and
optimization in UI:
 Sass Files: Bootstrap's Sass files are located in the scss directory of the Bootstrap source
code. These files contain the core styles, variables, mixins, and utility classes used by
Bootstrap. The main Sass file is bootstrap.scss, which imports all the necessary Sass
partials.
 Customization with Sass: By utilizing Bootstrap's Sass files, you can easily customize
the framework's styles. You can override default variable values, modify mixins, or
include/exclude specific components based on your needs. This allows for a more fine-
grained control over the styling and behavior of Bootstrap components. To customize
Bootstrap with Sass, you need to compile the Sass files into CSS.
 Sass Compilation: To compile Bootstrap's Sass files, you have a few options:
 Using a Sass Compiler: You can use a standalone Sass compiler like Dart Sass
(https://sass-lang.com/dart-sass) or LibSass (https://sass-lang.com/libsass) to compile the
Sass files into CSS. These compilers can be integrated into your development workflow
to automatically compile the Sass files as you make changes.
 Build Tools: Build tools like Webpack, Gulp, or Grunt can also be configured to compile
the Sass files as part of your build process. These tools provide additional features like
minification, autoprefixing, and concatenation to optimize your CSS output.
 CSS Preprocessors: If you're already using a CSS preprocessor like Less or Stylus, you
can find third-party ports of Bootstrap's Sass files for those preprocessors. These ports
allow you to leverage Bootstrap's styles and components within your existing
preprocessor setup.
 Optimization: When using Bootstrap's Sass files, you have the flexibility to optimize the
generated CSS to improve performance. Here are a few optimization techniques:
 Customized Imports: Only include the necessary Sass partials or components in your
custom Bootstrap build. This reduces the CSS file size by excluding unused styles.
 Minification: Minify the compiled CSS file to remove unnecessary whitespace and
reduce file size.
 Prefixing: Use a CSS autoprefixer to automatically add vendor prefixes to ensure cross-
browser compatibility.
 Tree Shaking: Some build tools support tree shaking, which removes unused CSS rules
during the build process, further reducing file size.
 Critical CSS: For performance optimization, consider using techniques like generating
and inlining critical CSS for the initial page load to improve perceived performance.
 Cache Control: Set appropriate cache control headers for your CSS files to leverage
browser caching and reduce server requests.
These optimization techniques help streamline the CSS output and enhance the performance of
your Bootstrap-based UI. By leveraging Bootstrap's Sass files and optimizing the generated
CSS, you can create a more customized and efficient UI using the Bootstrap framework.
Remember to keep your customizations organized and maintain a clear build process to ensure
seamless updates and upgrades to future versions of Bootstrap.

22
IFETCE R-2019A ACADEMIC YEAR:2023-2024

3.10 EXTENDING BOOTSTRAP WITH THIRD-PARTY PLUGINS

Bootstrap provides a solid foundation for building UIs, but you may want to extend its
functionality by incorporating third-party plugins. These plugins offer additional features,
components, and enhancements that complement Bootstrap's core capabilities. Here's an
overview of how you can extend Bootstrap with third-party plugins in your UI:
 Research and Choose Plugins: Start by identifying the specific functionality or
components you need for your UI. Explore popular plugin repositories and websites, such
as GitHub, npm, or the Bootstrap website, to find plugins that match your requirements.
Look for plugins that are compatible with the version of Bootstrap you are using.
 Include Plugin Dependencies: Once you've chosen the plugins you want to integrate,
check their documentation for any dependencies they might have. Some plugins may
require additional CSS or JavaScript files to work correctly. Include these dependencies
in your project by either downloading the files and linking them in your HTML or using
package managers like npm or Yarn to install and import the dependencies.
 Load Plugin Scripts: After including the required dependencies, load the plugin scripts
in your HTML file. Add the script tags for each plugin's JavaScript file, ensuring that
they are placed after the Bootstrap JavaScript file. This ensures that the plugins can
access the Bootstrap library and components.
 Add Plugin Scripts and Stylesheets: Include the plugin's JavaScript file(s) and CSS
file(s) in your HTML. These files can be included directly from your local assets or
loaded from a CDN. Place the script tags for JavaScript files before the closing </body>
tag to ensure they load after the HTML content, and include the CSS files in the <head>
section of your HTML.
 Initialize Plugins: Some plugins may require initialization or configuration options to
work properly. Read the documentation provided with each plugin to understand how to
initialize them. Typically, you will need to write JavaScript code to initialize the plugins
on the appropriate elements in your UI. This initialization code should be placed after the
plugin scripts are loaded.
 Customize and Style: Depending on the plugin, you may need to apply custom CSS
classes or styles to achieve the desired appearance and integration with Bootstrap. Refer
to the plugin documentation for guidance on customizing and styling the plugin
components. You can use your own CSS or create custom stylesheets that override the
default plugin styles.
 Test and Debug: After integrating the plugins, thoroughly test your UI to ensure that
everything works as expected. Check for any conflicts or errors that may arise due to
incompatible versions or conflicting scripts. Use browser developer tools to debug and
troubleshoot any issues that arise during testing.
When extending Bootstrap with third-party plugins, it's important to keep track of updates and
compatibility issues. Make sure to follow the plugin documentation and stay informed about any
changes in Bootstrap or the plugins themselves. By following these steps, you can extend
Bootstrap's capabilities by incorporating third-party plugins into your UI. These plugins can
enhance your UI with additional features, interactivity, and customization options, allowing you
to create a more robust and tailored user experience. By incorporating well-designed and
maintained third-party plugins, you can enhance the functionality and user experience of your UI
built with Bootstrap.

23
IFETCE R-2019A ACADEMIC YEAR:2023-2024

3.11 SETTING UP A DEVELOPMENT ENVIRONMENT WITH BOOTSTRAP.

Setting up a development environment with Bootstrap involves a few key steps to ensure
you have the necessary tools and resources to work with the framework effectively. Here's a
guide to help you get started:
1. Text Editor or Integrated Development Environment (IDE): Choose a text editor or
IDE that suits your preferences and supports web development. Some popular options
include Visual Studio Code, Sublime Text, Atom, or JetBrains WebStorm. Install and set
up your chosen editor according to its documentation.
2. HTML File: Create a new HTML file to serve as the starting point for your project. You
can either create a blank file or use a template provided by your IDE.
3. Bootstrap Files: Download the Bootstrap framework from the official website
(https://getbootstrap.com) or use a package manager like npm or Yarn to install it in your
project. The downloaded package will include CSS and JavaScript files, as well as font
and image assets.
4. Link Bootstrap CSS: In your HTML file, link the Bootstrap CSS file by adding the
following line within the <head> section:
<link rel="stylesheet" href="path/to/bootstrap.min.css">
Replace "path/to/bootstrap.min.css" with the actual file path relative to your HTML file.
5. Link Bootstrap JavaScript: Link the Bootstrap JavaScript file(s) by adding the
following lines just before the closing </body> tag:
<script src="path/to/bootstrap.bundle.min.js"></script>
Again, replace "path/to/bootstrap.bundle.min.js" with the actual file path relative to your
HTML file. The bootstrap.bundle.min.js file includes both the Bootstrap JavaScript and
its dependencies (like jQuery).
6. Basic HTML Structure: Set up a basic HTML structure in your file to start building
your UI components. Include the necessary <html>, <head>, and <body> tags.
7. Add Bootstrap Components: Begin incorporating Bootstrap components into your
HTML file. Refer to the Bootstrap documentation for a list of available components, their
markup, and usage examples. You can copy and paste the necessary code snippets from
the documentation into your HTML file.
8. Customize and Extend: Customize the Bootstrap components and styles as needed. You
can override Bootstrap's default styles by adding custom CSS rules after the Bootstrap
CSS link. Add your own classes or modify existing classes to achieve the desired design.
9. Preview and Test: Open your HTML file in a web browser to preview your UI. Ensure
that all Bootstrap components and customizations are displayed correctly and function as
expected. Test your UI on different screen sizes and devices to ensure responsiveness.
10. Iterate and Refine: Continue developing and refining your UI by adding more Bootstrap
components, custom CSS, and interactivity using Bootstrap's JavaScript components or
third-party plugins.
By following these steps, you can set up a development environment with Bootstrap and begin
building your UI components using the framework's features and resources.

24