In this presentation you can learn what is bootstrap,how to install bootstrap,working with bootstrap and creating bootstrap website

1. Creating Responsive Website Using Bootstrap
GAVASKAR S
MVP at Alibaba Cloud
gavaskar@dingtalk.com
1Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com
Date:08-08-2020
Host:St.Xavier’s Catholic College
of Engineering

2. Agenta
• Introduction to BootStrap
• Prerequisites
– HTML
– CSS
– JavaScript
• Installing Bootstrap
• Working with Bootstrap
• Bootstrap - Demo
2Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

3. Introduction to Bootstrap
• Bootstrap is the popular HTML, CSS and
JavaScript framework for developing a
responsive and mobile friendly website.
• It is absolutely free to download and use.
• It is a front-end framework used for easier and
faster web development.
• It includes HTML and CSS based design
templates,which we can use for our project.
3Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

4. What is a responsive page?
• A website is called responsive website which
can automatically adjust itself to look good on
all devices, from smart phones to desktops etc.
4Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

5. History of Bootstrap
• 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.
• GitHub link is
– https://github.com/twbs/bootstrap
5Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

6. Advantage of Bootstrap
• 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.
6Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

7. Installing Bootstrap
• Two ways to work with Bootstrap is
– Custom Bootstrap file creating
– Directly using from internet
7Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

8. Custom Bootstrap file creating
• Download all the CSS and Javascript file needed to
create bootstrap website from
– https://getbootstrap.com/docs/4.3/getting-
started/download/
• Download “jquery.min.js”
– https://jquery.com/download/
8Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

9. Directly using from internet
• Various links used are
– https://maxcdn.bootstrapcdn.com/boo
tstrap/3.3.6/css/bootstrap.min.css
– https://ajax.googleapis.com/ajax/libs/j
query/1.12.0/jquery.min.js
– https://maxcdn.bootstrapcdn.com/boo
tstrap/3.3.6/js/bootstrap.min.js
9Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

10. Bootstrap Grids
• Bootstrap's grid system allows up to 12 columns across
the page.
• If you do not want to use all 12 columns individually,
you can group the columns together to create wider
columns:
10Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

11. Bootstrap Table
• Various CSS Class use are
– table
– table-striped
– table-bordered
– table-hover
– table-responsive
11Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

12. Bootstrap Table-Contextual Classes
• used to color table rows (<tr>) or table cells (<td>):
– active-Applies the hover color to the table row or
table cell
– success-Indicates a successful or positive action
– info-Indicates a neutral informative change or
action
– warning-Indicates a warning that might need
attention
– danger-Indicates a dangerous or potentially
negative action
12Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

13. Bootstrap Images
• Various CSS Class use are
– img-rounded
– img-circle
– img-thumbnail
– img-responsive
13Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

14. Bootstrap Buttons
• Various CSS Class use are
– btn
– btn-default
– btn-primary
– btn-success
– btn-info
– btn-warning
– btn-danger
– btn-link
14Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

15. Bootstrap Forms-Demo
15Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

16. Bootstrap Pagination-Demo
16Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com

17. Thank you!!
17Gavaskar S,MVP at Alibaba Cloud|gavaskar@dingtalk.com
"Anyone who stops learning is old, whether
at twenty or eighty. Anyone who keeps
learning stays young“-Hendry Ford