WEB TECHNOLOGY
Mallikarjuna Nandi
Assistant Professor
Computer Science & Engineering
RGUKT- Ongole-AP
1
Unit 5- Syllabus
UNIT V
Bootstrap: Introduction to Bootstrap, Responsive Design, Bootstrap Grid system,
Navigation and Navigation Bar, Icon Fonts, User Inputs, Bootstrap CSS Components,
Bootstrap and JavaScript Components, Bootstrap and JQuery, Building and
Deployment, NPM Scripts, Task Runners
2
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an
open source product in August 2011 on GitHub.
3
INTRODUCTION
Bootstrap is the popular HTML, CSS and JavaScript framework for developing a responsive
and mobile friendly website. A website is called responsive (adoptable) website which can
automatically adjust itself to look good on all devices, from smart phones to desktops etc.
It is absolutely free to download and use.
It is a front-end framework used for easier and faster web development.
It includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many others.
It can also use JavaScript plug-ins.
It facilitates you to create responsive designs.
It is a library , where you can find reusable code.
4
INTRODUCTION
Easy to use: Anybody with basic knowledge on HTML,CSS can start using Bootstrap.
Responsive features: Bootstrap responsive CSS can adjust to phone , laptop and tabs
Browser compatibility: Bootstrap is compatible with all modern browsers.
5
Where to get Bootstrap
Two way to start using Bootstrap on your website
1. Download bootstrap from [Link]
2. Include Bootstrap from a CDN
[Link]
6
Bootstrap Grid Layout System
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align
content. It’s built with flexbox and is fully responsive.
Bootstrap Grid System
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 column individually, you can group the columns together to
create wider columns:
7
Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On
a big screen it might look better with the content organized in three columns, but on a small screen it
would be better if the content items were stacked on top of each other.
Grid Classes
The Bootstrap grid system has four classes:
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
The classes above can be combined to create more dynamic and flexible layouts.
8
9
Grid System Rules
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignmen
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
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the
first and last column via negative margin on .rows
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
Column widths are in percentage, so they are always fluid and sized relative to their parent element
10
Basic Structure of a Bootstrap Grid
<div class="container">
<div class="row"> So, to create the layout you want, create a container (<div
<div class="col-*-*"></div>
<div class="col-*-*"></div>
class="container">). Next, create a row (<div class="row">).
</div> Then, add the desired number of columns (tags with
<div class="row"> appropriate .col-*-* classes). Note that numbers in .col-*-*
<div class="col-*-*"></div> should always add up to 12 for each row.
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div> Bootstrap's grid system is responsive, and the columns will re-arrange
</div> automatically depending on the screen size.
11
Bootstrap Grid - Stacked-to-horizontal
The following example shows a simple "stacked-to-horizontal" two-column layout, meaning it
will result in a 50%/50% split on all screens, except for extra small screens, which it will
automatically stack (100%):
<div class="container">
<h1>Hello World!</h1> Tip: The numbers in the .col-sm-* classes
<div class="row"> indicates how many columns the div should span
<div class="col-sm-6" style="background-color:yellow;">
(out of 12). So, .col-sm-1 spans 1 column, .col-
<p>Lorem ipsum...</p>
</div> sm-4 spans 4 columns, .col-sm-6 spans 6 columns,
<div class="col-sm-6" style="background-color:pink;"> etc.
<p>Sed ut perspiciatis...</p>
</div> Note: Make sure that the sum always adds up to
</div> 12!
</div>
12
13
14
Containers
Containers are used to pad the content inside of them, and there are two container classes
available:
The .container class provides a responsive fixed width container
The .container-fluid class provides a full width container, spanning the entire width of the
viewport
15
16
17
18
Container Padding
By default, containers have 15px left and right padding, with no top or bottom padding.
Therefore, we often use spacing utilities, such as extra padding and margins to make them
look even better. For example, .pt-3 means "add a top padding of 16px":
<div class="container pt-3"> (Here you can add borders to container, colour to container etc..)
<h1>My First Bootstrap Page</h1>
<p>This container has a top padding of 16 pixels (.pt-3).</p>
</div>
19
Basic List Groups
The most basic list group is an unordered list with list items:
To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item:
<ol> <ol type="1">
<body>
<li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li>
<div class="container">
<li>Milk</li> <li>Milk</li>
<h2>Basic List Group</h2>
</ol> </ol>
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
</div>
</body>
20
Basic List Groups
<ul> <ul style="list-style-type:circle;">
<li>Coffee</li> <li>Coffee</li>
<li>Tea</li>
<li>Tea</li>
<li>Milk</li>
<li>Milk</li> </ul>
</ul>
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
21
Basic List Groups
Active State
<div class="container">
<h2>Active Item in a List Group</h2>
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
</div>
22
Basic List Groups
List Group With Linked Items
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
23
Navigation and Navigation Bar
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 <nav class="navbar navbar-default">.
The following example shows how to add a navigation bar to the top of the page:
<body>
<ul >
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</body>
24
Navigation and Navigation Bar
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
25
Inverted Navigation Bar
If you don't like the style of the default navigation bar, Bootstrap provides an alternative, black navbar:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
26
Navigation Bar With Dropdown
Navigation bars can also hold dropdown menus.
The following example adds a dropdown menu for the "Page 1" button:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div> 27
</nav>
Font Awesome
Basic Icons
To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:
<link rel="stylesheet" href="[Link]
[Link]">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>
28
Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used
for icons.
The fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes are used to increase the icon sizes relative to their container.
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
29
Icon Fonts
30
31
[Link] .btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none; 32
}
Bootstrap Form Inputs
Form controls automatically receive some global styling with Bootstrap:
All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.
Bootstrap provides three types of form layouts:
Vertical form (this is default)
Horizontal form
Inline form
Standard rules for all three form layouts:
Add class .form-control to all textual <input>, <textarea>, and <select> elements
33
Bootstrap Vertical Form (default)
<div class="container">
<h2>Vertical (basic) form</h2>
<form action="/action_page.php">
<div class="form-group">
<label form="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label form="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body> 34
Bootstrap Inline Form
In an inline form, all of the elements are inline, left-aligned, and the labels are alongside.
Add class .form-inline to the <form> element
<div class="container">
<h2>Inline form</h2>
<p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, </p>
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label form="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label form="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
35
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
36
Bootstrap Horizontal Form
A horizontal form means that the labels are aligned next to the input field (horizontal) on large and medium screens. On
small screens (767px and below), it will transform to a vertical form (labels are placed on top of each input).
Additional rules for a horizontal form:
Add class .form-horizontal to the <form> element
Add class .control-label to all <label> elements
37
Bootstrap CSS Components
Button classes
Class Description Example
.btn Adds basic styling to any button
.btn-default Indicates a default/standard button
.btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
.btn-success Indicates a successful or positive action
.btn-warning Indicates caution should be taken with this action
.btn-danger Indicates a dangerous or potentially negative action
.btn-link Makes a button look like a link (will still have button behavior)
.btn-lg Makes a large button
.btn-sm Makes a small button
38
Form Classes
Class Description
.form-inline Makes a <form> left-aligned with inline-block controls (This only applies to forms within
viewports that are at least 768px wide)
.form- Aligns labels and groups of form controls in a horizontal layout
horizontal
.form-control Used on input, textarea, and select elements to span the entire width of the page and make them
responsive
.form-group Container for form input and label
39
.input-group Container to enhance an input by adding an icon, text or a button in front or behind it as a
"help text"
.input-group-lg Large input group
.input-group-sm Small input group
.input-group-btn Together with the .input-group class, this class attaches a button next to an input. Often used
as a search bar
.input-lg Large input field
.input-sm Small input field
40
Helper Classes
Class Description
.text-muted Text styled with class "text-muted"
.text-primary Text styled with class "text-primary"
.text-success Text styled with class "text-success"
.text-info Text styled with class "text-info"
.text-warning Text styled with class "text-warning"
.text-danger Text styled with class "text-danger"
41
Image Classes
Class Description
.img-rounded Adds rounded corners to an image
.img-circle Shapes the image to a circle
.img-thumbnail Shapes the image to a thumbnail
.img-responsive Makes an image responsive
42
Table Classes
Dropdown classes
Navs
43
44