SlideShare a Scribd company logo
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
Department of Computer Science
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
Department of Computer Science
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
Department of Computer Science
Basic Git commands
git config git init git status git add
git
commit
git log –
oneline
git remote git push
5
Department of Computer Science
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
Department of Computer Science
Node
• Node.js is an open source server
environment
• Node.js can generate dynamic
page content
7
Department of Computer Science
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
Department of Computer Science
Boot-strap
• History of Bootstrap
• Why Bootstrap?
• What is Bootstrap?
• Where to get bootstrap?
• Grid Layout
• Components of Bootstrap
9
Department of Computer Science
History Of Bootstrap
10
Department of Computer Science
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
Department of Computer Science
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
Department of Computer Science
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
Department of Computer Science
What is container ?
• Container is used to set the content's margins dealing with the responsive behaviors of your layout.
14
Department of Computer Science
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
Department of Computer Science
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
Department of Computer Science
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
Department of Computer Science
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​
Department of Computer Science 19
Forms
• Bootstrap provides two types of
form layouts:
• Stacked (full-width) form
• Inline form
Department of Computer Science 20
• Classes
• form-control
• form-group
• form-inline
Custom Forms
• Custom Checkbox
• Switch
• Radio buttons
• Select Menu
• Range
• File Upload
Department of Computer Science 21
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
Department of Computer Science 22
<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
Department of Computer Science
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
Department of Computer Science
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
Department of Computer Science
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
Department of Computer Science
Example
27
Department of Computer Science
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
Department of Computer Science 28
Example
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-
dismiss="modal">&times;</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
Department of Computer Science
Tooltips
• The Tooltip component is small pop-up box that appears when the user moves the mouse pointer
over an element
Department of Computer Science 30
CSS
Preprocessors
• CSS
• Less
• Sass
31
Department of Computer Science
Typical CSS
Preprocessors
Features
Department of Computer Science 32
• 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)
Department of Computer Science 33
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)
Department of Computer Science 34
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;
}
Department of Computer Science 35
Project Demo
localhost:3000(local host)
Project Link
Department of Computer Science 36
Thank You
Department of Computer Science 37

More Related Content

What's hot

Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
Jeanie Arnoco
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
Ishtdeep Hora
 
Bootstrap - Basics
Bootstrap - BasicsBootstrap - Basics
Bootstrap - Basics
FirosK2
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
Nidhi mishra
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
McSoftsis
 
Bootstrap
BootstrapBootstrap
Bootstrap
Jadson Santos
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
Ron Reiter
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
Mind IT Systems
 
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
NexThoughts Technologies
 
Bootstrap 4 ppt
Bootstrap 4 pptBootstrap 4 ppt
Bootstrap 4 ppt
EPAM Systems
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
IT Geeks
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap Creative
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
Walid Ashraf
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
jeroenvdmeer
 
HTML5
HTML5HTML5
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
Axel Chalon
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
Zunair Sagitarioux
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
 

What's hot (20)

Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
Bootstrap - Basics
Bootstrap - BasicsBootstrap - Basics
Bootstrap - Basics
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
 
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
 
Bootstrap 4 ppt
Bootstrap 4 pptBootstrap 4 ppt
Bootstrap 4 ppt
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
 
Html
HtmlHtml
Html
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
HTML5
HTML5HTML5
HTML5
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Dom
DomDom
Dom
 

Similar to Bootstrap

Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
Yaowaluck Promdee
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
Rachel Andrew
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
Ghanshyam Patel
 
HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : Bootstrap
Jean Michel
 
LvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemLvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design System
Vlad Fedosov
 
Session on scalability - by isaka traore - 19 may 2016 - rockstart
Session on scalability - by isaka traore - 19 may 2016 - rockstartSession on scalability - by isaka traore - 19 may 2016 - rockstart
Session on scalability - by isaka traore - 19 may 2016 - rockstart
Isaka Traore
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
Mike Wilcox
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
Denise Jacobs
 
EoinWoods_WhereDidMyArchitectureGoPreservingSoftwareArchitectureInItsImplemen...
EoinWoods_WhereDidMyArchitectureGoPreservingSoftwareArchitectureInItsImplemen...EoinWoods_WhereDidMyArchitectureGoPreservingSoftwareArchitectureInItsImplemen...
EoinWoods_WhereDidMyArchitectureGoPreservingSoftwareArchitectureInItsImplemen...Kostas Mavridis
 
Bootstrap
Bootstrap Bootstrap
Bootstrap
PumoTechnovation
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing Company
Marcos Labad
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
Wahyu Putra
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
Raj Lal
 
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
Katherine McCurdy-Lapierre, R.G.D.
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationCharlie Moad
 
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages ApplicationsIBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
beglee
 
سکوهای ابری و مدل های برنامه نویسی در ابر
سکوهای ابری و مدل های برنامه نویسی در ابرسکوهای ابری و مدل های برنامه نویسی در ابر
سکوهای ابری و مدل های برنامه نویسی در ابر
datastack
 
Software Development: Beyond Training wheels
Software Development: Beyond Training wheelsSoftware Development: Beyond Training wheels
Software Development: Beyond Training wheels
Naveenkumar Muguda
 
Building Rich Internet Applications with Ext JS
Building Rich Internet Applications  with Ext JSBuilding Rich Internet Applications  with Ext JS
Building Rich Internet Applications with Ext JS
Mats Bryntse
 
Micro frontend: The microservices puzzle extended to frontend
Micro frontend: The microservices puzzle  extended to frontendMicro frontend: The microservices puzzle  extended to frontend
Micro frontend: The microservices puzzle extended to frontend
Audrey Neveu
 

Similar to Bootstrap (20)

Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
 
HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : Bootstrap
 
LvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemLvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design System
 
Session on scalability - by isaka traore - 19 may 2016 - rockstart
Session on scalability - by isaka traore - 19 may 2016 - rockstartSession on scalability - by isaka traore - 19 may 2016 - rockstart
Session on scalability - by isaka traore - 19 may 2016 - rockstart
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
 
EoinWoods_WhereDidMyArchitectureGoPreservingSoftwareArchitectureInItsImplemen...
EoinWoods_WhereDidMyArchitectureGoPreservingSoftwareArchitectureInItsImplemen...EoinWoods_WhereDidMyArchitectureGoPreservingSoftwareArchitectureInItsImplemen...
EoinWoods_WhereDidMyArchitectureGoPreservingSoftwareArchitectureInItsImplemen...
 
Bootstrap
Bootstrap Bootstrap
Bootstrap
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing Company
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
 
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages ApplicationsIBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
 
سکوهای ابری و مدل های برنامه نویسی در ابر
سکوهای ابری و مدل های برنامه نویسی در ابرسکوهای ابری و مدل های برنامه نویسی در ابر
سکوهای ابری و مدل های برنامه نویسی در ابر
 
Software Development: Beyond Training wheels
Software Development: Beyond Training wheelsSoftware Development: Beyond Training wheels
Software Development: Beyond Training wheels
 
Building Rich Internet Applications with Ext JS
Building Rich Internet Applications  with Ext JSBuilding Rich Internet Applications  with Ext JS
Building Rich Internet Applications with Ext JS
 
Micro frontend: The microservices puzzle extended to frontend
Micro frontend: The microservices puzzle  extended to frontendMicro frontend: The microservices puzzle  extended to frontend
Micro frontend: The microservices puzzle extended to frontend
 

Recently uploaded

Standard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - NeometrixStandard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - Neometrix
Neometrix_Engineering_Pvt_Ltd
 
ASME IX(9) 2007 Full Version .pdf
ASME IX(9)  2007 Full Version       .pdfASME IX(9)  2007 Full Version       .pdf
ASME IX(9) 2007 Full Version .pdf
AhmedHussein950959
 
Design and Analysis of Algorithms-DP,Backtracking,Graphs,B&B
Design and Analysis of Algorithms-DP,Backtracking,Graphs,B&BDesign and Analysis of Algorithms-DP,Backtracking,Graphs,B&B
Design and Analysis of Algorithms-DP,Backtracking,Graphs,B&B
Sreedhar Chowdam
 
J.Yang, ICLR 2024, MLILAB, KAIST AI.pdf
J.Yang,  ICLR 2024, MLILAB, KAIST AI.pdfJ.Yang,  ICLR 2024, MLILAB, KAIST AI.pdf
J.Yang, ICLR 2024, MLILAB, KAIST AI.pdf
MLILAB
 
addressing modes in computer architecture
addressing modes  in computer architectureaddressing modes  in computer architecture
addressing modes in computer architecture
ShahidSultan24
 
Cosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdfCosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdf
Kamal Acharya
 
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdfHybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
fxintegritypublishin
 
The role of big data in decision making.
The role of big data in decision making.The role of big data in decision making.
The role of big data in decision making.
ankuprajapati0525
 
Event Management System Vb Net Project Report.pdf
Event Management System Vb Net  Project Report.pdfEvent Management System Vb Net  Project Report.pdf
Event Management System Vb Net Project Report.pdf
Kamal Acharya
 
block diagram and signal flow graph representation
block diagram and signal flow graph representationblock diagram and signal flow graph representation
block diagram and signal flow graph representation
Divya Somashekar
 
power quality voltage fluctuation UNIT - I.pptx
power quality voltage fluctuation UNIT - I.pptxpower quality voltage fluctuation UNIT - I.pptx
power quality voltage fluctuation UNIT - I.pptx
ViniHema
 
Water Industry Process Automation and Control Monthly - May 2024.pdf
Water Industry Process Automation and Control Monthly - May 2024.pdfWater Industry Process Automation and Control Monthly - May 2024.pdf
Water Industry Process Automation and Control Monthly - May 2024.pdf
Water Industry Process Automation & Control
 
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Dr.Costas Sachpazis
 
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdfAKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
SamSarthak3
 
weather web application report.pdf
weather web application report.pdfweather web application report.pdf
weather web application report.pdf
Pratik Pawar
 
Architectural Portfolio Sean Lockwood
Architectural Portfolio Sean LockwoodArchitectural Portfolio Sean Lockwood
Architectural Portfolio Sean Lockwood
seandesed
 
ethical hacking-mobile hacking methods.ppt
ethical hacking-mobile hacking methods.pptethical hacking-mobile hacking methods.ppt
ethical hacking-mobile hacking methods.ppt
Jayaprasanna4
 
Railway Signalling Principles Edition 3.pdf
Railway Signalling Principles Edition 3.pdfRailway Signalling Principles Edition 3.pdf
Railway Signalling Principles Edition 3.pdf
TeeVichai
 
Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024
Massimo Talia
 
Final project report on grocery store management system..pdf
Final project report on grocery store management system..pdfFinal project report on grocery store management system..pdf
Final project report on grocery store management system..pdf
Kamal Acharya
 

Recently uploaded (20)

Standard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - NeometrixStandard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - Neometrix
 
ASME IX(9) 2007 Full Version .pdf
ASME IX(9)  2007 Full Version       .pdfASME IX(9)  2007 Full Version       .pdf
ASME IX(9) 2007 Full Version .pdf
 
Design and Analysis of Algorithms-DP,Backtracking,Graphs,B&B
Design and Analysis of Algorithms-DP,Backtracking,Graphs,B&BDesign and Analysis of Algorithms-DP,Backtracking,Graphs,B&B
Design and Analysis of Algorithms-DP,Backtracking,Graphs,B&B
 
J.Yang, ICLR 2024, MLILAB, KAIST AI.pdf
J.Yang,  ICLR 2024, MLILAB, KAIST AI.pdfJ.Yang,  ICLR 2024, MLILAB, KAIST AI.pdf
J.Yang, ICLR 2024, MLILAB, KAIST AI.pdf
 
addressing modes in computer architecture
addressing modes  in computer architectureaddressing modes  in computer architecture
addressing modes in computer architecture
 
Cosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdfCosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdf
 
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdfHybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
 
The role of big data in decision making.
The role of big data in decision making.The role of big data in decision making.
The role of big data in decision making.
 
Event Management System Vb Net Project Report.pdf
Event Management System Vb Net  Project Report.pdfEvent Management System Vb Net  Project Report.pdf
Event Management System Vb Net Project Report.pdf
 
block diagram and signal flow graph representation
block diagram and signal flow graph representationblock diagram and signal flow graph representation
block diagram and signal flow graph representation
 
power quality voltage fluctuation UNIT - I.pptx
power quality voltage fluctuation UNIT - I.pptxpower quality voltage fluctuation UNIT - I.pptx
power quality voltage fluctuation UNIT - I.pptx
 
Water Industry Process Automation and Control Monthly - May 2024.pdf
Water Industry Process Automation and Control Monthly - May 2024.pdfWater Industry Process Automation and Control Monthly - May 2024.pdf
Water Industry Process Automation and Control Monthly - May 2024.pdf
 
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
 
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdfAKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
 
weather web application report.pdf
weather web application report.pdfweather web application report.pdf
weather web application report.pdf
 
Architectural Portfolio Sean Lockwood
Architectural Portfolio Sean LockwoodArchitectural Portfolio Sean Lockwood
Architectural Portfolio Sean Lockwood
 
ethical hacking-mobile hacking methods.ppt
ethical hacking-mobile hacking methods.pptethical hacking-mobile hacking methods.ppt
ethical hacking-mobile hacking methods.ppt
 
Railway Signalling Principles Edition 3.pdf
Railway Signalling Principles Edition 3.pdfRailway Signalling Principles Edition 3.pdf
Railway Signalling Principles Edition 3.pdf
 
Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024
 
Final project report on grocery store management system..pdf
Final project report on grocery store management system..pdfFinal project report on grocery store management system..pdf
Final project report on grocery store management system..pdf
 

Bootstrap

  • 1. Front-End Web UI Frameworks and Tools: Bootstrap 4 Chunduri Avinash 321710306006 1 Department of Computer Science
  • 2. Contents • Full Stack • Git • npm and NodeJS • Bootstrap • Css preprocessors • Link 2 Department of Computer Science
  • 3. 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 Department of Computer Science
  • 4. 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 Department of Computer Science
  • 5. Basic Git commands git config git init git status git add git commit git log – oneline git remote git push 5 Department of Computer Science
  • 6. 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 Department of Computer Science
  • 7. Node • Node.js is an open source server environment • Node.js can generate dynamic page content 7 Department of Computer Science
  • 8. 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 Department of Computer Science
  • 9. Boot-strap • History of Bootstrap • Why Bootstrap? • What is Bootstrap? • Where to get bootstrap? • Grid Layout • Components of Bootstrap 9 Department of Computer Science
  • 10. History Of Bootstrap 10 Department of Computer Science
  • 11. 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 Department of Computer Science
  • 12. 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 Department of Computer Science
  • 13. 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 Department of Computer Science
  • 14. What is container ? • Container is used to set the content's margins dealing with the responsive behaviors of your layout. 14 Department of Computer Science
  • 15. 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 Department of Computer Science
  • 16. 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 Department of Computer Science
  • 17. 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 Department of Computer Science
  • 18. Navbar • Navigation bar is a navigation header that is placed at the top of the page Department of Computer Science 18
  • 19. 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​ Department of Computer Science 19
  • 20. Forms • Bootstrap provides two types of form layouts: • Stacked (full-width) form • Inline form Department of Computer Science 20 • Classes • form-control • form-group • form-inline
  • 21. Custom Forms • Custom Checkbox • Switch • Radio buttons • Select Menu • Range • File Upload Department of Computer Science 21
  • 22. 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 Department of Computer Science 22
  • 23. <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 Department of Computer Science
  • 24. 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 Department of Computer Science
  • 25. 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 Department of Computer Science
  • 26. 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 Department of Computer Science
  • 28. 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 Department of Computer Science 28
  • 29. Example <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data- dismiss="modal">&times;</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 Department of Computer Science
  • 30. Tooltips • The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element Department of Computer Science 30
  • 31. CSS Preprocessors • CSS • Less • Sass 31 Department of Computer Science
  • 32. Typical CSS Preprocessors Features Department of Computer Science 32 • Variables • Nesting selectors • Mixins • Functions & Expressions
  • 33. 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) Department of Computer Science 33
  • 34. 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) Department of Computer Science 34
  • 35. 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; } Department of Computer Science 35
  • 36. Project Demo localhost:3000(local host) Project Link Department of Computer Science 36
  • 37. Thank You Department of Computer Science 37