Bootstrap

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Table of Content
● What is Bootstrap
● History
● Versions
● Including Bootstrap
● Adding Files
● Container
● Buttons
● Typography
● Utilities
● Badges
● Grid System

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
What is Bootstrap

● Most popular frontend framework.

● Used for creating User Interfaces.
● Prewritten code written in HTML, CSS and Javascript
● Application ranges from web development, mobile development etc
● Easy, simple and very responsive

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
History

● Developed: Mark Otto and Jacob Thornton at Twitter

● Released: Open source product in August 2011 on GitHub
● 2014: Number one project on GitHub

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Versions

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Including Bootstrap

● Download and link

○ download the file and add bootstrap.css to your project's html.

● Link to a CDN
○ Easier and Simpler
○ Copy paste the url
○ Less faster
○ CDN- it is the hoisted version.
○ add its link in your html

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Adding files:

Bootstrap
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-
TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

JavaScript
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Container
● Contain
● Pad
● Center the content

How to include it?

<p class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod </p>

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Typography
● Headings
● Body Text
● Lists

How to include it?

● <h1>Heading</h1>
● <p class="h1">Heading</p>
● <h1 class="display-1">Heading</h1>

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Utilities

● Border
● Color
● Display
● Position
● Size
● Spacing
● Text

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Border

How to include it?

● <span class="border"></span>
● <span class="border-top"></span>
● <span class="border border-primary"></span>
● <img src="..." alt="..." class="rounded">

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Color

How to include it?

● <p class="text-primary">.text-primary</p>
● <p class="text-secondary">.text-secondary</p>

● <p><a href="#" class="text-primary">Primary link</a></p>

● <p><a href="#" class="text-secondary">Secondary link</a></p

● <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>

● <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Badges

How to include it?

● <button type="button" class="btn btn-primary">

Notifications <span class="badge badge-light">4</span>
</button>
● <button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Buttons
● Actions in forms
● Dialogs etc

How to include it?

● <button type="button" class="btn btn-primary">Primary</button>

● <button type="button" class="btn btn-outline-primary">Primary</button>
● <button type="button" class="btn btn-primary btn-lg">Large
button</button>

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Grid System
Primary feature of bootstrap
Every container in bootstrap can be divided into 12 columns and then elements can
take out of 12 columns
Grid must always be inside container
■ then div of class="row" where there are 12 columns to pick from
■ every column will have class="col-size-no", if no class is assigned then it will
occupy entire 12 col
■ there are 4 variations of size: xs, sm, md, lg

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Grid System

<div class="container">
<div class="row">
<div class="col-md-6">hello</div>
<div class="col-md-6">world</div>
</div>

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
 Thank You

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited