Creating Responsive Website Using Bootstrap

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

Agenta
• Introduction to BootStrap
• Prerequisites
– HTML
– CSS
– JavaScript
• Installing Bootstrap
• Working with Bootstrap
• Bootstrap - Demo

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.

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.

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

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.

Installing Bootstrap
• Two ways to work with Bootstrap is
– Custom Bootstrap file creating
– Directly using from internet

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/

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

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:

Bootstrap Table
• Various CSS Class use are
– table
– table-striped
– table-bordered
– table-hover
– table-responsive

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

Bootstrap Images
– img-rounded
– img-circle
– img-thumbnail
– img-responsive

Bootstrap Buttons
– btn
– btn-default
– btn-primary
– btn-success
– btn-info
– btn-warning
– btn-danger
– btn-link

Bootstrap Forms-Demo

Bootstrap Pagination-Demo

Thank you!!
"Anyone who stops learning is old, whether
at twenty or eighty. Anyone who keeps
learning stays young“-Hendry Ford

Creating Responsive Website Using Bootstrap

More Related Content

What's hot

Similar to Creating Responsive Website Using Bootstrap

Recently uploaded

Creating Responsive Website Using Bootstrap