Bootstrap
Introduction
What is Twitter Bootstrap?
•Bootstrap is a sleek, intuitive, and powerful,
mobile first front-end framework for faster and
easier web development. It uses HTML, CSS and
Javascript.
•Bootstrap was developed by Mark
Otto and Jacob Thornton at Twitter. It was
released as an open source product in August
2011 on GitHub.
Bootstrap
• Bootstrap is an Open-Source front-end Frame-work.
• Bootstrap, from v1 through v5.
• Bootstrap 5.0.0 is the current version of bootstrap
5.1.0 Highlights
• Added experimental, opt-in CSS Grid support
• Added support for responsive offcanvas components in navbars
• Added new placeholders component for skeleton loading screens
• Added support for horizontal collapsing in the collapse component
• Added new stack and vertical rule helpers
• Added tons of new CSS variables for body styles, colors, RGB colors, and more
• Updated .bg-* and .text-* utilities to use CSS variables and new RGB CSS variables
for real-time customization
• Added four new component examples for dropdowns, footers, list groups, and
modals
• Updated modal and offcanvas backdrops to make them unique to each
component
• Reverted ability for .col-* classes to override .row-cols-* classes for now until we
can fix some critical bugs
What is Twitter Boostrap?
✔ Twitter Bootstrap is Front End Frame work for Uis and themes
•Bootstrap is the most popular HTML, CSS and JavaScript
framework for developing a responsive and mobile friendly
website.
•It is absolutely free to download and use.
•It includes HTML and CSS based design templates for
typography, forms, buttons, tables, navigation, modals, image
carousels and many others.
•It can also use JavaScript plug-ins.
•It facilitates you to create responsive designs.
Applications of Bootstrap
• Scaffolding − Bootstrap provides a basic structure with Grid System, link
styles, and background. This is covered in detail in the section Bootstrap
Basic Structure
• CSS − Bootstrap comes with the feature of global CSS settings, fundamental
HTML elements styled and enhanced with extensible classes, and an
advanced grid system. This is covered in detail in the section Bootstrap with
CSS.
• Components − Bootstrap contains over a dozen reusable components built
to provide iconography, dropdowns, navigation, alerts, pop-overs, and
much more. This is covered in detail in the section Layout Components.
• JavaScript Plugins − Bootstrap contains over a dozen custom jQuery
plugins. You can easily include them all, or one by one. This is covered in
details in the section Bootstrap Plugins.
• Customize − You can customize Bootstrap's components, LESS variables,
and jQuery plugins to get your very own version.
Why Use Bootstrap?
• 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, mobile-first styles are part of the
core framework
• Browser compatibility: Bootstrap 5 is compatible with all modern
browsers (Chrome, Firefox, Edge, Safari, and Opera). Note that if you
need support for IE11 and down, you must use either BS4 or BS3.
Basic Difference between HTML,CSS,BOOTSTRAP
I AM HTML,CSSJAVASCRIPT
I AM HTML I AM HTML (BOOTSTRAP)
AND CSS
Purpose of Bootstrap
•Decrease cost of website
•Save time
•Excellent look and feel
•Decrease code of line
•Maximum use of code
•It is easy andnot complex code (it is understood non
programmer)
•It consume low space which help to execute fast in server
Install Methods
• There are two ways…
• Manually Download Soruce
• CDN
• To download bootstrap5 use this link:
• https://mdbootstrap.com/docs/standard/bootstrap-5/
Installation
• There are two main options to add Bootstrap to your web project.
You can link to publicly available sources, or download the framework
directly.
• Download/Install
• You can download and install the Bootstrap source files with Bower,
Composer, Meteor, or npm.
• This allows greater control and the option to include or exclude
modules as needed.
Where to Get Bootstrap
• There are two ways to start using Bootstrap on your own web site.
• Download Bootstrap from getbootstrap.com
• If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow
the instructions there.
• Include Bootstrap from a CDN
• If you don't want to download and host Bootstrap yourself, you can include it from a CDN
(Content Delivery Network).
• MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include
jQuery.
Bootstrap CDN
• You must include the following Bootstrap’s CSS, JavaScript, and jQuery from MaxCDN into your web page.
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- latest jQuery library -->
<script src="https://code.jquery.com/jquery-latest.js"></script>
• Advantage of using the Bootstrap CDN:
• Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be
loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure
that once a user requests a file from it, it will be served from the server closest to them, which also leads to
faster loading time.
Bootstrap 5 CDN
• If you don't want to download and host Bootstrap 5 yourself, you can include it from
a CDN (Content Delivery Network).
• jsDelivr provides CDN support for Bootstrap's CSS and JavaScript:
• MaxCDN:
• <!-- Latest compiled and minified CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
></script>
Create Web Page with Bootstrap
• Add the HTML5 doctype
• Bootstrap uses HTML elements and CSS properties that require the HTML5
doctype.
• Always include the HTML5 doctype at the beginning of the page, along with
the lang attribute and the correct character set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
Create Web Page with Bootstrap (2)
• Bootstrap is mobile-first
• Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles
are part of the core framework.
• To ensure proper rendering and touch zooming, add the following <meta> tag
inside the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
• The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
• The initial-scale=1 part sets the initial zoom level when the page is first loaded
by the browser.
What Is Responsive Web Design?
• As the name suggests, Responsive Web Design is the technique for
developing websites and web portals in a more interactive way with
the robust CX/UX (customer/user experience) optimal view solutions
on a web page with the best browser compatibility that can run and
operate in various types of devices.
• Responsive layouts automatically accommodate and adjust to any
device's screen size, using a desktop, a laptop, a tablet, or a mobile
phone.
Creating Responsive Layout With Bootstrap
• Bootstrap is responsive and mobile-friendly from the beginning. Its six-tier
grid classes deliver more reasonable control over the layout as well as
decide how it will be rendered on various types of devices such as
desktops, laptops, tablets, mobile phones, etc.
• The below example will build a responsive UI design layout that is furnished
with:
• 4 column layout in extra-large devices (viewport ≥ 1200px), and
• 3 column layout in large devices (992px ≤ viewport < 1200px), whereas
• 2 column layout in medium devices (768px ≤ viewport < 992px), and
• 1 column layout in small and extra-small devices (viewport < 768px).
