Scribd
Upload
26 views28 pages

Bootstrap

Uploaded by

Sharmila Mulla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views28 pages

Bootstrap

Uploaded by

Sharmila Mulla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 28

Bootstra

INTRODUCTION
 Bootstrap is a free and open-source CSS and JavaScript / jQuery
code library used to create dynamic website layouts and apps.
Bootstrap is a famous front-end framework with a decent variety of
pre-defined CSS codes.
 Bootstrap 5 is the most recent and stable version of the Bootstrap
framework. Bootstrap is responsive by default, and it takes a
mobile-first approach. Bootstrap 5 is compatible with the most
recent, stable releases of all major browsers and systems.
 To create responsive web pages, Bootstrap employs a variety of
classes. After months of redefining its features, Bootstrap 5 was
officially published on June 16, 2020.
 Bootstrap 5 is the most recent version of the most popular HTML,
CSS, and JavaScript framework for constructing responsive,
mobile-first websites, Bootstrap.
 Responsive web design is the process of building websites that
automatically change to look excellent on all platforms, from little
phones to giant desktop computers.

 Versions of Bootstrap 5
 Bootstrap 5 (published in 2021) is the most recent version of
Bootstrap (launched in 2013); it includes new components, a
quicker style sheet, and improved responsiveness. Bootstrap 5
changes its logo with new version.
 Bootstrap 5 is compatible with Google Chrome, Firefox, Safari,
Internet Explorer 10, etc.

 What Can We Do with Bootstrap5?


 There's a lot more we can do with Bootstrap.
 Responsive websites are simple to develop.
 With pre-defined classes, we can rapidly design multi-column
layouts.
 We can rapidly construct a variety of form layouts.
 We can quickly construct several variations of the navigation bar.
 Components such as accordions, modals, and others can be simply
created without writing any JS code.
 To manage a big content volume, we can easily construct dynamic
tabs.
 To display hint text, easily construct tooltips and popovers.
 We may quickly construct a carousel or image slider to highlight
our content.
 We can instantly construct a variety of alert boxes.

 Example
1. Create a new index.html file in your project root. Include the
<meta name="viewport"> tag as well for proper responsive
behaviour in mobile devices.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initialscale=1"
>
<title>Bootstrap demo</title
</head>
<body>
<h1>Hello, world! </h1>
</body>
</html>

2. Include Bootstrap’s CSS and JS. Place the <link> tag in the
<head> for our CSS, and the <script> tag for our JavaScript
bundle (including Popper for positioning dropdowns, poppers, and
tooltips) before the closing </body>. Learn more about our CDN
links.
https://getbootstrap.com/docs/5.3/gettingstarted/introduction/#cdn-links

 JS components
 Curious which components explicitly require our JavaScript and
Popper? If you’re at all unsure about the general page structure,
keep reading for an example page template.
 Alerts for dismissing
 Buttons for toggling states and checkbox/radio functionality
 Carousel for all slide behaviours, controls, and indicators
 Collapse for toggling visibility of content
 Dropdowns for displaying and positioning (also requires Popper)
 Modals for displaying, positioning, and scroll behaviour
 Navbar for extending our Collapse and Offcanvas plugins to
implement responsive behaviors
 Navs with the Tab plugin for toggling content panes
 Offcanvases for displaying, positioning, and scroll behaviour
 Scrollspy for scroll behavior and navigation updates
 Toasts for displaying and dismissing
 Tooltips and popovers for displaying and positioning (also requires
Popper)
 For more information click on below link:
https://getbootstrap.com/docs/5.3/getting-started/introduction/

DOWNLOAD RESOURCES
 Use this link to download the bootstrap files:
https://getbootstrap.com/docs/5.3/getting-started/download/
CONTENTS
 For more information click on this link:
https://getbootstrap.com/docs/5.3/getting-started/
contents/
BROWSERS AND DEVICES
 For more information click on below link:
https://getbootstrap.com/docs/5.3/getting-started/browsers-devices/
EXTRA CONCEPTS
JavaScript
https://getbootstrap.com/docs/5.3/getting-started/javascript/

Webpack
https://getbootstrap.com/docs/5.3/getting-started/webpack/

Parcel
https://getbootstrap.com/docs/5.3/getting-started/parcel/

vite
https://getbootstrap.com/docs/5.3/getting-started/vite/

Accessibility
https://getbootstrap.com/docs/5.3/getting-started/accessibility/

RFS (Responsive Font Size)


https://getbootstrap.com/docs/5.3/getting-started/rfs/

RTL (Right to Left)


https://getbootstrap.com/docs/5.3/getting-started/rtl/

Contribute
https://getbootstrap.com/docs/5.3/getting-started/contribute/
Overview
https://getbootstrap.com/docs/5.3/customize/overview/

Sass
https://getbootstrap.com/docs/5.3/customize/sass/

Options
https://getbootstrap.com/docs/5.3/customize/options/

Color
https://getbootstrap.com/docs/5.3/customize/color/

Color modes
https://getbootstrap.com/docs/5.3/customize/color-modes/

Components
https://getbootstrap.com/docs/5.3/customize/components/

CSS Variables
https://getbootstrap.com/docs/5.3/customize/components/

Optimize
https://getbootstrap.com/docs/5.3/customize/optimize/
Breakpoints

Containers

Grid

Columns
Gutter
Utilities
Z-index
CSS Grid
Reboot
Typography
Images
Tables
Figures
Overview
Form control
Select
Checks & radios
Range
Input group
Floating labels
Layout
Validation
Componen
ts

Accordion
Alerts
Badge
Breadcrumb
Button group
Card
Carousel
Close button
Collapse
Dropdown
List Group
Model
Navbar
Navs & tabs
Offcanvas
Pagination
Placeholders
Popovers
Progress
Scrollspy
Spinners
Toasts
Tooltips

Helpers
Utilities
Extend
Download cdn files:

Responsive website
Old websites:
Mobile devices arrived:

Separate website for two different devices:


CSS media Queries

You might also like