Sir M.

Visvesvaraya Institute of Technology

Bengaluru- 562157

Department of Computer Science Engineering

(18CS84)
Technical Seminar
On

“BOOTSTRAP”

Submitted by: Under the Guidance of

ARJUN A Ms. Dhivya V
1MV19CS022 Asst Professor
Dept. of CSE
 CONTENTS

 Introduction

 History

 Literature Survey(History)

 Role of technology

 Architecture

 Methodology(Algorithm)

 Advantages and Disadvantages

 Conclusion

 References
 INTRODUCTION

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web
development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons,
navigation, and other interface components.

These components are designed to be responsive, meaning they adapt to different screen sizes and devices,
ensuring that your website looks good and works well on desktops, tablets, and mobile devices
 HISTORY

 Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as
an open source product in August 2011 on GitHub.
 Advantages of Bootstrap:
 Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap
 Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
 Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
 Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome,
Firefox, Internet Explorer, Safari, and Opera)
 LITERATURE SURVEY
Title Authors Year of Description
Publication
A Literature Review of the Huang and Wu 2015 This paper focuses on the use of the
Bootstrap Method in bootstrap method in nonlinear regression,
Nonlinear Regression summarizing the most recent research and
providing recommendations for future
work.

Bootstrap-based Approaches Cameron and Miller 2015 This paper reviews recent developments in
for Inference in Regression bootstrap-based inference for regression
Models with Clustered models with clustered errors, a common
Errors problem in econometrics.

A Review of Bootstrap Imbens and Kolesár 2015 This paper reviews the use of bootstrap
Confidence Intervals for methods to estimate confidence intervals
Causal Effects for causal effects, a common task in
empirical economics and social science
research.
 LITERATURE SURVEY
Title Authors Year of Description
Publication
A front-end framework for Mark Otto and Jacob 2011 This paper reviews recent developments in
developing responsive web Thornton bootstrap-based inference for regression
projects models with clustered errors, a common
problem in econometrics. This seminal paper
introduces the bootstrap method as a way of
estimating the sampling distribution of a
statistic, and compares it to the jackknife
method.

Bootstrap Methods: Another Efron 1979 This seminal paper introduces the bootstrap
Look at the Jackknife method as a way of estimating the sampling
distribution of a statistic, and compares it to
the jackknife method.
 ROLE OF TECHNOLOGY

 Bootstrap has greatly simplified web development by providing a standardized

approach to building websites that work well on desktops, tablets, and mobile devices.
 By using Bootstrap, developers can save time and effort by not having to write all of the
CSS and JavaScript from scratch, and can instead focus on customizing the pre-built
components to fit their specific design needs.
 Bootstrap has also helped to promote best practices in web development, such as
responsive design and accessibility. By providing responsive components and a
powerful grid system, Bootstrap makes it easy to create websites that adapt to different
screen sizes and devices.
 Additionally, Bootstrap includes accessibility features such as keyboard navigation and
ARIA (Accessible Rich Internet Applications) roles, which help ensure that websites are
accessible to all users, including those with disabilities.
 INTEGRATION

A basic understanding of HTML is required to start learning Bootstrap. Some familiarity with how CSS works
(CSS Selectors and Visual Rules) would be helpful,

1. Download Bootstrap from getbootstrap.com

2. Include Bootstrap from a CDN
ARCHITECTURE
 TYPOGRAPHY

• Bootstrap provides a native font stack that selects the best font-family for each
operating system and device, ensuring that text is easy to read and looks good on all
devices.
• Bootstrap assumes the browser default root font-size (typically 16px) to ensure a more
inclusive and accessible type scale. Visitors can customize their browser defaults as
needed.
• The $font-family-base, $font-size-base, and $line-height-base attributes are used as the
typographic base applied to the <body> tag.
• The global link color can be set via $link-color, and link underlines should only appear
on hover.
• The $body-bg variable can be used to set a background color on the <body> tag, with
the default color being #fff.
 BOOTSTRAP GRID
The Bootstrap grid system has four classes: xs (<576px wide) sm ( >576px wide) md (for >768px wide) lg
( >992px wide) xl ( >1200px wide) XXl (For >1400px wide)
 VIEWPORT
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 BOOTSTRAP IMAGES

 Rounded Corners
 The .img-rounded class adds rounded corners to an image (IE8 does not support rounded
corners):
 Circle
 The .img-circle class shapes the image to a circle (IE8 does not support rounded corners):
 Thumbnail
 The .img-thumbnail class shapes the image to a thumbnail:
 Responsive Images
 Images comes in all sizes. So do screens. Responsive images automatically adjust to fit the
size of the screen.
 Create responsive images by adding an .img-responsive class to the <img> tag. The image
will then scale nicely to the parent element.
 The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to
the image:
 BOOTSTRAP BUTTON

 Button Styles
 Bootstrap provides seven styles of buttons with the following classes:
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
 BOOTSTRAP BUTTON

 Bootstrap provides four button sizes with the following classes:

.btn-lg
.btn-md
.btn-sm
.btn-xs
COMPONENTS
• Accordion • Modal
• Alerts • Navs & tabs
• Badge • Navbar
• Breadcrumb • Offcanvas
• Buttons • Pagination
• Button group • Popovers
• Card • Progress
• Carousel • Scrollspy
• Close button • Spinners
• Collapse • Toasts
• Dropdowns • Tooltips
• List group
COMPONENTS
Many more reusable components built to provide iconography, dropdowns, input groups, navigation, alerts,
and much more.

Accordion
COMPONENTS
Alerts
ADVANTAGES

1. Fewer Cross browser bugs

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

1. Heavy file size

2. Limited Flexibility
3. Over-reliance on JavaScript
4. Learning curve
5. Browser compatibility
CONCLUSION

 Bootstrap allows for rapid, responsive development that is consistent and well
supported by the development and design community .As the framework continues to
develop, the reasons to use Bootstrap keep mounting. If you’ve overlooked this
framework, it’s probably time to give it a try. As you can see, there are several benefits
to using Bootstrap. The framework allows for rapid, responsive development that is
consistent and well supported by the development and design community.
REFERENCES
 [1] Efron, B., and R. J. Tibshirani (1993). An Introduction to the Bootstrap, New York, Chapman
and Hall.
 [2] Efron, B. (1982). The Jackknife, the Bootstrap and Other Resampling Plans, Philadelphia,
Society for Industrial and Applied Mathematics.
 [3] Gonc¸alves, S., and L. Kilian (2004). “Bootstrapping autoregressions with heteroskedasticity
of unknown form,” Journal of Econometrics, 123, 89–120.
 [4] C. Beem, W. Peelaers, and L. Rastelli, Deformation quantization and superconformal
symmetry in three dimensions (2016).
 [5] Gonc¸alves, S., and H. White (2005). “Bootstrap standard error estimates for linear
regression” Journal of the American Statistical Association, 120, 970–979. [6]
https://www.w3schools.com/bootstrap/default. asp
 [7] https://www.tutorialspoint.com/bootstrap/index .html
 [8] 8..https://www.think247.com/vertical?s_pt=sou
rce2&s_it=content&type=content&s_chn=1&s _gl=US&q=bootstrap%20modal%20tutorial.
 [9] https://getbootstrap.com/docs/5.3/getting-started/introduction/
THANK YOU!