Web Lecture 13 - Bootstrap
Uploaded by
amirinaweedullah613Web Lecture 13 - Bootstrap
Uploaded by
amirinaweedullah613HTML CSS
Java Script
Web Design and
Development I
Sayed Najmuddin “Sadaat”
• CSS Basics
• Selectors
Agenda
Kabul Univesity Monday, October 13, 2025 2
BOOTSTRAP INTRODUCTION
Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton
at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap,
various libraries were used for interface development, which led to inconsistencies and a high
maintenance burden. According to Otto:
A super small group of developers and I got together to design and build a new internal tool
and saw an opportunity to do something more. Through that process, we saw ourselves build
something much more substantial than another internal tool. Months later, we ended up with an
early version of Bootstrap as a way to document and share common design patterns and assets
within the company.
After a few months of development by a small group, many developers at Twitter began to
contribute to the project as a part of Hack Week, a hackathon-style week for the Twitter
development team. It was renamed from Twitter Blueprint to Bootstrap and released as an
open-source project on August 19, 2011. It has continued to be maintained by Otto, Thornton, a
small group of core developers, and a large community of contributors
BOOTSTRAP 4 GRID SYSTEM
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
span 1
group
span 1
the
span 1
columns
span 1
together
span 1 span 1
to create
span 1 span
1
wider
span 1
columns:
span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12
GRID CLASSES
The Bootstrap 4 grid system has five classes:
.col-xm (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (extra large devices - screen width equal to or greater than 1200px)
BOOTSTRAP 4 GRID SYSTEM
DEMO-1
BOOTSTRAP 4 FORMS
Bootstrap provides two types of form layouts:
◦ Stacked (full-width) form
◦ Inline form
Bootstrap classes for the form and form elements
form-group
form-control
form-check-input
form-inline
BOOTSTRAP 4 FORMS
DEMO-2
BUTTON STYLES
btn-primary
btn-secondary
btn-success
btn-info
btn-warning
btn-danger
btn-dark
btn-light
btn-link
btn-lg
btn-sm
btn-block
BOOTSTRAP 4 FORMS
DEMO-3
BOOTSTRAP 4 IMAGE SHAPES
Rounded Corners
The .rounded class adds rounded corners to an image.
Circle
The .rounded-circle class shapes the image to a circle.
Thumbnail
The .img-thumbnail class shapes the image to a thumbnail (bordered):
Aligning Images
Float an image to the right with the .float-right class or to the left with .float-
left:
BOOTSTRAP 4 IMAGE SHAPES
DEMO-4
Questions?
