This document provides an overview of Bootstrap, an open-source CSS framework. It discusses how Bootstrap can be applied with CDN links or by downloading files. It then describes some common Bootstrap components like buttons, typography classes, forms, grids, images, alerts and cards. It also mentions Bootstrap's responsive design capabilities and various grid classes for different screen sizes. Finally, it provides a link to Bootstrap themes on Bootswatch.com.

1. digipodium
digipodium
BOOTSTRAP

2. Introduction
➔ Bootstrap is a free and open-source CSS framework.
➔ It contains CSS and JavaScript based design templates for
typography, forms, buttons, navigation and other interface
components.
➔ It offers many more resources (articles and tutorials, third-party
plugins and extensions, theme builders, and so on) than the other
front-end frameworks combined.
➔ In short, Bootstrap is everywhere.

3. Applying Bootstrap
To use Bootstrap Classes we need to import them.
Bootstrap can be applied in two ways in a html page:
● With Bootstrap CDN links.
● With Download Bootstrap files.

4. Applying Bootstrap
Bootstrap CDN link
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
Bootstrap CDN links should be placed in the head tag of the html page.

5. Button Classes
Bootstrap Class

6. Bootstrap Text Classes
Class Description
.h1 - .h6 headings
.text-muted Faded text
.display-1 - .display-4 Headings 2
.lead Separate paragraph
.blockquote For containing blockquotes
.blockquote-footer For the source of blockquote

7. Table
table table-striped table-bordered table-hover table-condensed

8. Forms
Input Tag Class : form-group
<div class="form-group"> <div>
Input Tag Class : form-control
<input type="password" class="form-
control" id="exampleInputPassword1"
placeholder="Password">

9. Container

10. Non-Responsive Design

11. Responsive Design

12. Bootstrap Grids
Col
1
Col
2
Col
3
Col
4
Col
5
Col
6
Col
7
Col
8
Col
9
Col
10
Col
11
Col
12
Col 1 Col 2 Col 3 Col 4
Col 1 Col 2

13. Bootstrap Grid Classes
Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

14. Bootstrap Grids

15. Images
Non-responsive
Responsive
Image
Classes
● .img-fluid
● .img-thumbnail
● .rounded
● .rounded-circle
img-responsive

16. Alerts
Alerts are available for any length of text, as well as an optional
dismiss button. For proper styling, use one of the eight required
contextual classes (e.g., .alert-success).

17. Cards
A card is a flexible and extensible content container. It includes
options for headers and footers, a wide variety of content, contextual
background colors, and powerful display options.

18. Bootstrap Themes https://bootswatch.com/

19. Thank You
digipodium