Introduction to Bootstrap 4.
6 & Responsive
Web Design
What is Bootstrap?
➢ Bootstrap is a free ,open source and is the most popular
HTML,CSS and JavaScript framework developed by Twitter for
creating responsive web design.
➢ It was developed by Mark Otto and Jacob Thornton at Twitter. It
was released as an open source product in August 2011 on
GitHub .
Advantages of using Bootstrap
▪ Supports Responsive Design and Mobile First Approach
▪ Saves lot of Development Time
▪ Customizable
▪ Browser Support
▪ Easy to use
Getting Started with Bootstrap
▪ There are two ways to start using Bootstrap on your own web
▪ site.
▪ Download Bootstrap from [Link]
▪ Include Bootstrap from a CDN
▪ <!‐‐ CSS ‐‐>
▪ <link rel="stylesheet"
href="[Link]
[Link]" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGg
FAW/dAiS6JXm" crossorigin="anonymous">
Getting Started with Bootstrap
➢ <!‐‐ JS library ‐‐>
➢ <script src="[Link]
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5K
kN" crossorigin="anonymous"></script>
➢ <script
src="[Link]
integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q
" crossorigin="anonymous"></script>
➢ <script
src="[Link]
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
➢ NOTE : jQuery must come first, then [Link], and then our JavaScript plugins.
Create First Web Page With Bootstrap
▪ Add the HTML5 doctype
▪ Bootstrap requires the use of the HTML5 doctype. Without it,
you’ll see some funky incomplete styling, but including it shouldn’t
cause any considerable hiccups.
▪ <html lang="en">
▪ The HTML lang attribute is used to identify the language of text
content on the web. This information helps search engines return
language specific results, and it is also used by screen readers that
switch language profiles to provide the correct accent and
pronunciation.
Create First Web Page With Bootstrap
➢ Bootstrap Versions
▪ We follows Bootstrap 4, which was released in 2018, as an
upgrade to Bootstrap 3, with new components, faster
stylesheets, more responsiveness, etc.
▪ Bootstrap 5 (released 2021) is the newest version of Bootstrap;
It supports the latest, stable releases of all major browsers and
platforms. However, Internet Explorer 11 and down is not
supported.
▪ The main differences between Bootstrap 5 and Bootstrap 3 & 4,
is that Bootstrap 5 has switched to JavaScript instead of jQuery.
Create First Web Page With Bootstrap
▪<meta name="viewport" content="width=device-width, initial-
scale=1">
▪width=device-width : sets the width of the page to
follow the screen-width of the device.
▪initial-scale=1 part sets the initial zoom level
when the page is first loaded by the browser.
✓ Containers
▪Bootstrap also requires a containing element to
wrap site contents.
▪There are two container classes to choose from:
[Link] .container class provides a responsive fixed
width container
[Link] .container-fluid class provides a full width
container
Text Colors
➢The classes for text colors are:
▪.text-muted
▪.text-primary
▪ .text-success
▪.text-info
▪.text-warning
▪.text-danger
▪.text-secondary
▪.text-white
▪.text-dark
▪.text-light
▪.text-body (default body color/often black)
Text Align,Text Colors and Backgrounds
The classes for text alignment are:
.text-left, .text-center
.text-right, .text-justify
.text-lowercase, .text-uppercase
.text-capitalize
The classes for background colors are:
.bg-primary .bg-secondary
.bg-success .bg-danger
.bg-warning .bg-info
.bg-light .bg-dark
.bg-white .bg-transparent
Bootstrap Alerts
➢ Provide contextual feedback messages for typical user actions
with the handful of available and flexible alert messages.
▪ .alert-primary .alert-secondary .alert-success
▪ .alert-danger . alert-warning . alert-info
▪ .alert-light . alert-dark
➢ Link color : Use the .alert-link utility class to quickly provide
matching colored links within any alert.
Bootstrap Alerts
▪ Add a dismiss button and the .alert-dismissible class, which adds
extra padding to the right of the alert and positions the .close
button.
▪ On the dismiss button, add the data-dismiss="alert" attribute,
which triggers the JavaScript functionality. Be sure to use the
<button> element with it for proper behavior across all devices.
▪ To animate alerts when dismissing them, be sure to add the .fade
and .show classes.
➢ Example:
<div class="alert alert-success fade show">
<button type="button" class="close" data-dismiss="alert">
× </button>
<strong>Success!</strong> Indicates a successful action.
</div>
Bootstrap Buttons
▪ For button styles Bootstrap has the following classes:
▪ .btn .btn-primary .btn-success .btn-info
▪ .btn-warning .btn-danger .btn-link .btn-secondry
▪ .btn-dark .btn-light
▪ Button classes can be used on an <a>, <button> or <input> element.
▪ Bootstrap 4 provides eight outline/bordered buttons:
▪ .btn-outline-primary .btn-outline-danger
▪ .btn-outline-secondary .btn-outline-dark
▪ .btn-outline-success .btn-outline-light
▪ .btn-outline-info
▪ .btn-outline-warning
Bootstrap Buttons
➢ Sizes : For fancy larger or smaller buttons, add .btn-lg or .btn-sm for
additional sizes.
➢ Add class .btn-block to create a block level button.
Bootstrap Button Group
➢ Bootstrap allows you to group a series of buttons together (on a
single line) in a button group
➢ Example :
<div class="btn-group">
<button type="button" class="btn btn-primary"> Home </button>
<button type="button" class="btn btn-primary">About Us</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown"> Our Services </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">App Development</a>
<a class="dropdown-item" href="#">Web Development</a>
</div>
</div>
</div>
Bootstrap Button Group
▪ More clasess for dropdown are:
.btn-group-lg
.btn-group-vertical
Bootstrap Badges and Spinner
▪ Badges are numerical indicators of how many items are associated
with a link.
▪ Use the .badge class with <span> elements to create badges.
▪ Example :
▪ <a href="#">Likes <span class="badge">5</span></a>
▪ <a href="#">Comments <span class="badge badge-
primary">10</span></a>
▪ <a href="#">Notifications <span class="badge badge-pill
badge-primary">2</span></a>
Bootstrap Badges and Spinner
▪ Spinner : To create a spinner/loader, use the .spinner-border class:
▪ Example :
<div class="spinner-border text-primary"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
Bootstrap Images
➢ Bootstrap provide multiple classes for image shaping :
<img src=“[Link]" class="rounded" >
<img src=“[Link]" class="rounded-circle" >
<img src=“[Link]" class="img-thumbnail" >
➢ Aligning Images :
<img src=" [Link]" class="float-left">
<img src=" [Link]" class="float-right">
➢ Centered Image : Center an image by adding the utility classes .mx-auto
(margin:auto) and .d-block (display:block) to the image:
<img src="[Link]" clss="mx-auto d-block">
➢ Responsive Images : Create responsive images by adding an .img-fluid class to
the <img> tag.
➢ <img class="img-fluid" src="[Link]" alt=“No Image">
Bootstrap Progress Bars
➢ Bootstrap provides several types of progress bars.
➢ Example:
<div class="progress” style="height: 10px;” >
<div class="progress-bar" style="width:70%"> 70% Complete
</div>
</div>
➢ Other classes
.progress-bar-striped ( for striped progress bar )
.progress-bar-animated (for animated progress bar )
Bootstrap Collapse
➢ Collapsible are useful when you want to hide and show some amount of content
➢ Example :
<button class="btn btn-primary" type="button" data-toggle="collapse" data-
target="#collapseExample"> Open/Close </button>
<div id="collapseExample" class="collapse">
Collapisible content goes here<br />
Collapisible content goes here<br />
Collapisible content goes here<br />
</div>
▪ By default, the collapsible content is hidden. However, you can add the .show
class to show the content by default:
Bootstrap Collapse
Accordion :
<div class="accordion" id="accordionExample">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-
target="#one">Button 1</button>
<div id="one" class="collapse" data-parent="#accordionExample">
Collapisible content 1 goes here
</div>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-
target="#two">Button 2</button>
<div id=“two" class="collapse" data-parent="#accordionExample">
Collapisible content 1 goes here
</div>
</div>
</div>
Bootstrap Grid System
➢ Bootstrap Grid System is used for creating page layouts through a series of rows and columns.
➢ The Grid System consists of 12 columns.
1 2 3 4 5 6 7 8 9 10 11 12
➢ Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending
on the screen size.
➢ Bootstrap Grid Classes:
➢ With these grid classes you have complete control over the layout of your website on different
screen sizes.
Grid System Rules
• Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may
be immediate children of rows
• Predefined classes like .row and .col-sm-4 are available for quickly
making grid layouts
• Grid columns are created by specifying the number of 12 available
columns you wish to span. For example, three equal columns
would use three .col-sm-4
Basic Structure of Bootstrap Grid
➢ Grid Classes : The Bootstrap 4 grid system has five classes:
▪ .col- (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- (xlarge devices - screen width equal to or greater than
1200px)
The classes above can be combined to create more dynamic and flexible layouts.
Note : Each class scales up, so if you wish to set the same widths for sm and md,
you only need to specify sm.
Hiding elements
➢ To hide elements simply use the .d-none class or one of the .d-
{sm,md,lg,xl}-none classes for any responsive screen variation.
➢ To show an element only on a given interval of screen sizes you can
combine one .d-*-none class with a .d-*-* class, for example .d-
none .d-md-block .d-xl-none will hide the element for all screen
sizes except on medium and large devices.
Hiding elements
Hiding elements
Bootstrap Tables
Bootstrap provide multiple classes for table :
.table
.table-striped
.table-bordered
.table-hover
.table-responsive (assigned to div which contains table)
It also provide some contextual classes that can be used to color
table rows(<tr>) or table cells(<td>):
.table-primary
. table-success
. table-info
. table-warning
. table-danger
Bootstrap Navbar
➢ A navigation bar is a navigation header that is placed at the top of
the page.
➢ With Bootstrap, a navigation bar can extend or collapse,
depending on the screen size. A standard navigation bar is created
with class .navbar and .navbar-default.
Bootstrap Navbar
➢Example:
➢ <!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
Aligned Navigation Bar
➢Add the .justify-content-center class to center the navigation bar.
<nav class="navbar navbar-expand-sm justify-content-center">
...
</nav>
➢Add the .justify-content-right class to right the navigation bar.
<nav class="navbar navbar-expand-sm justify-content-right">
...
</nav>
➢ Brand / Logo : The .navbar-brand class is used to highlight the
brand/logo/project name of your page.
<nav class="navbar navbar-expand-sm">
<a class="navbar-brand" href="#">Logo</a>
...
</nav>
Navigation Bar
Dropdowns in your navbar :
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
Navigation Bar
Colored Navbar : We use any of the .bg-color classes to change the
background color of the navbar.
Add a white text color to all links in the navbar with the .navbar-dark
class, or use the .navbar-light class to add a black text color.
Collapsing Navigation Bar
➢<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">LOGO</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div> </nav>
Collapsing Navigation Bar
➢The .fixed-top class makes the navigation bar fixed at the
top:
➢Use the .fixed-bottom class to make the navbar stay at
the bottom of the page:
➢the .sticky-top class to make the navbar fixed/stay at the
top of the page when you scroll past it
Carousel
➢A slideshow component for cycling through elements—
images or slides of text—like a carousel.
<div id=“myCarousel" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src=“[Link]" alt="">
</div>
<div class="carousel-item">
<img src=“[Link]" alt="">
</div>
<div class="carousel-item">
<img src=“[Link]" alt="">
</div>
</div>
</div>
Carousel
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel“ data-
slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-
slide="next">
<span class="carousel-control-next-icon"></span>
</a>
Carousel
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ul>
▪ Add .carousel-fade to your carousel to animate slides with a fade
transition instead of a slide.
Carousel
data-interval : The amount of time to delay between automatically
cycling an item. If false, carousel will not automatically cycle.
Example : data-interval=“5000“ (Default Time in milliseconds)
data-touch : Whether the carousel should support left/right swipe
interactions on touchscreen devices.
Example : data-touch=“true“ (Default )
data-pause : If set to 'hover', pauses the cycling of the carousel on
mouseenter and resumes the cycling of the carousel on mouseleave.
If set to false, hovering over the carousel won't pause it.
Example : data-pause="false"
Modal
➢ <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-
toggle="modal" data-target="#exampleModal">Open Modal</button>
➢ <!-- Modal -->
<div class="modal fade" id="exampleModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close">
<span >×</span>
</button>
</div>
Modal
<div class="modal-body">
Model Body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Modal
Static backdrop : When backdrop is set to static, the modal
will not close when clicking outside it.
<div class="modal fade" id="exampleModal" data-backdrop="static">
…
</div>
Scrollable modal :
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Vertically centered modal :
<div class="modal-dialog modal-dialog-centered">
...
</div>
Modal
Optional sizes : Modals have three optional sizes.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Bootstrap Forms and Input
➢ Bootstrap provides two types of form layouts:
▪ Stacked (full-width) form
▪ Inline form
➢ Add a wrapper element with .form-group, around each form
control, to ensure proper margins:
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
Bootstrap Forms and Input
➢ For inline form : Add class .form-inline to the <form>
element.
<form class="form-inline">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
Form Row/Grid
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" name="email">
</div>
<div class="col">
<input type="password" class="form-control" name="pswd">
</div>
</div>
</form>
Form Row/Grid
<div class="form-group">
<label for="recipient-name" class="col-form-label"> UserName
</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control"
id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
Bootstrap Form Validation
<form class="was-validated">
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-
control" id="uname" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this
field.</div>
</div>
</form>