Bootstrap

Front-End Web UI
Frameworks and Tools:
Bootstrap 4
Chunduri Avinash
321710306006
1
Department of Computer Science

Contents
• Full Stack
• Git
• npm and NodeJS
• Bootstrap
• Css preprocessors
• Link
2

Full Stack
• A full stack web developer is a person who can develop
both client and server software.
• Popular Stacks
• LAMP stack: Linux - Apache - MySQL - PHP
• MEAN stack: MongoDB - Express - AngularJS - Node.js
• MERN stack : MongoDB-Express-ReactJS-Node.js
• Django stack: JavaScript - Python - Django - MySQL
• Ruby on Rails: JavaScript - Ruby - SQLite - Rails
3

Git
• Git is a free and open source distributed version control
system designed to handle everything from small to very
large projects with speed and efficiency.
• Advantages of Git
• Free and open source
• Fast and small
• Security
4

Basic Git commands
git config git init git status git add
git
commit
git log –
oneline
git remote git push
5

Basic Git commands
• git pull
This command fetches and merges changes on
the remote server to your working directory.
• git clone
This command is used to obtain a repository from an
existing URL.
• git checkout
This command is used to switch from one branch to
another.
• git rm
This command deletes the file from your working
directory and stages the deletion.
6

Node
• Node.js is an open source server
environment
• Node.js can generate dynamic
page content
7

Npm
• npm ( Node Package Manager) is
a package manager for the
JavaScript programming language.
• It is the default package
manager for the JavaScript
runtime environment Node.js.
8

Boot-strap
• History of Bootstrap
• Why Bootstrap?
• What is Bootstrap?
• Where to get bootstrap?
• Grid Layout
• Components of Bootstrap
9

History Of Bootstrap
10

What is
Bootstrap?
• Bootstrap is a free front-end framework for faster and easier web
development
• Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many other,
as well as optional JavaScript plugins
• Bootstrap also gives you the ability to easily create responsive designs
11

Why Bootstrap?
• Easy to use:
Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
• Responsive features:
Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
• Mobile-first approach:
In Bootstrap 3, mobile-first styles are part of the core framework
• Browser compatibility:
Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Edge,
Safari, and Opera)
12

Where to get bootstrap?
• npm i bootstrap
• Download Bootstrap from getbootstrap.com
• Include Bootstrap from a CDN
• If you don't want to download and host Bootstrap yourself, you can include it from a CDN
(Content Delivery Network).
• MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery.
13

What is container ?
• Container is used to set the content's margins dealing with the responsive behaviors of your layout.
14

Grid System • Bootstrap Grid System is mobile-first fluid grid
system which is made up of a series rows and columns to
provide a structure to website and to place it’s content in
the intersected areas easily.
• Bootstrap Grid System allows you to create up to 12
columns and unlimited rows.
15

Grid Classes
Bootstrap grid system has four
types of classes which can be
combined to obtain more
dynamic and flexible layouts.
xs (for the phone). sm(for the tablets).
md(for the desktop). lg(for the large desktop).
16

Class="container-*"
<div
class="#">
</div>
Extra
small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra
large
≥1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-
fluid
100% 100% 100% 100% 100%
17

Navbar
• Navigation bar is a navigation header that is placed at the top of the
page
Department of Computer Science 18

Bread Crumb
• A breadcrumb is a graphical control element frequently used as a navigational aid in user interfaces
and on web pages.
• It allows users to keep track and maintain awareness of their locations within programs, documents,
or websites
Dept of CSE, GITAM School
of Technology

Forms
• Bootstrap provides two types of
form layouts:
• Stacked (full-width) form
• Inline form
• Classes
• form-control
• form-group
• form-inline

Custom Forms
• Custom Checkbox
• Switch
• Radio buttons
• Select Menu
• Range
• File Upload

Carousel
• The Carousel is a slideshow for
cycling through elements.
• Classes
• Carousel slide
• Carousel-inner
• Carousel-item
• Caroursel-control-prev
• Carousel-control-next
• Carousel indicator

<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago">
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Example
23

Collapse
• The collapse JavaScript plugin is used to show and hide content.
• Buttons or anchors are used as triggers that are mapped to specific elements you toggle.
• Collapsing an element will animate the height from its current value to 0.
• Classes
• collapse
• collapsing
• collapse.show
24

Example:
<div class="card">
<div role="tab" class="card-header" id="peterhead">
<h3 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-target="#peter">
Peter Pan <small>Chief Epicurious Officer</small>
</a>
</h3>
<div class="collapse show" id="peter" data-parent="#accordion">
<div class="card-body">
<p class="d-none d-sm-block">pioneering cross-cultural culinary connections</p>
</div>
</div>
</div>
</div>
25

Card
Classes
card-header card-body card-title card-link card-text
A card is a bordered box with some padding around its content.
It includes options for headers, footers, content, colors, etc
26

Example
27

Modal
• The Modal component is a dialog
box/popup window that is displayed
on top of the current page:
• Classes
• modal
• modal-header
• modal-body
• modal-title
• modal-footer
• modal-fade
• modal-dialog-centered
• modal-dialog-*
• * is sm, lg ,xl

Example
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>
<div class="modal-body">
Modal body..
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div> 29

Tooltips
• The Tooltip component is small pop-up box that appears when the user moves the mouse pointer
over an element

CSS
Preprocessors
• CSS
• Less
• Sass
31

Typical CSS
Preprocessors
Features
• Variables
• Nesting selectors
• Mixins
• Functions & Expressions

Less
• Less (Leaner Style Sheets)
• Less is a dynamic preprocessor style sheet language that can be
compiled into Cascading Style Sheets and run on the client side or
server side.
• Variables in Less defined with @
• All are compiled into traditional CSS syntax automatically before use
in a web page
• less styles.less styles.css(command to convert less to css)

Sass
• Sass is a dynamic preprocessor style sheet language that can be
compiled into Cascading Style Sheets and run on the client side or
server side
• Variables in Scss Defined with $
• Sass (Syntactically Awesome Style Sheets)
• Scss (Sassy CSS)
• npm run scss (inorder to convert Scss to css file)

Difference
Less
@lt-gray: #ddd;
@background-dark: #512DA8;
@carousel-item-height: 300px;
.navbar-inverse {
background:@background-dark;
}
.carousel .carousel-item {
height: @carousel-item-height;
}
Scss
$lt-gray: #ddd;
$background-dark: #512DA8;
$carousel-item-height: 300px;
.navbar-inverse {
background:$background-dark;
}
.carousel .item {
height: $carousel-item-height;
}

Project Demo
localhost:3000(local host)
Project Link

Thank You

Bootstrap

More Related Content

What's hot

Similar to Bootstrap

Recently uploaded

Bootstrap