Scribd
Upload
16 views49 pages

Module 3

Uploaded by

lafiffqhatif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views49 pages

Module 3

Uploaded by

lafiffqhatif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 49

Module 3

Introduction to Bootstrap
• Bootstrap is the most popular HTML, CSS and JavaScript
framework for developing a responsive and mobile
friendly website.
• It facilitates users to develop a responsive website.
• It is compatible on most of browsers like Chrome,
Firefox, Internet Explorer, Safari and Opera etc.
• website is called responsive website which can
automatically adjust itself to look good on all devices,
from smart phones to desktops etc.
Get starting with bootstrap
• Mobile-first styles are part of the core framework of
Bootstrap.
• You have to add the following <meta> tag inside the
<head> element for proper rendering and touch zooming:
1.<meta name="viewport" content="width=device-
width, initial-scale=1">
• The "width=device-width" part is used to set the width of
the page to follow the screen-width of the device (vary
according to the devices).
• The initial-scale=1 part is used to set the initial zoom level
when the page is first loaded by the browser.
• Containers: container is used to wrap the site contents.
There are two container classes.
• 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.
• Hence, if you want your page to be of fixed width in the middle of the
screen irrespective of the width of the browser window, then use
container class.
• On the other hand, if you want that your page always consumes the full
screen, you need to use container-fluid class instead
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is a Bootstrap example</title>

<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1> First Bootstrap web page</h1>
<p>Write your text here..</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></
script>
</body>
</html>
• Understanding the basics Across all the packaged classes and styles Bootstrap
uses four different markers for controlling and mentioning element and device
sizes.
Bootstrap Elements
Bootstrap Images
• There are a few utility classes for styling your image.
• For example, if you want your image to be rendered with soft rounded corners
you use the class .img-rounded.
• It does nothing but add a 6px border radius to the image:
<img src="abc.jpg" class="img-
rounded" alt="abc" width="300" height="250">

.img-rounded
{
border-radius: 6px;
}
• The class .img-circle is used to shape the image to a circle

<img src="abc.jpg" class="img-


circle" alt="abc" width="300" height="250">
• The class .img-thumbnail is used to shape an image to a
thumbnail.
• if you want a small outline border for your image, use the class .imgthumbnail.
Thus, to create a rounded responsive image you use both the classes .img-
rounded and .img-responsive:
<img src="img/p1.png" class="img-thumbnail" alt="Product 1"
title="Product 1">
<img src="img/rose.png" class="img-rounded img-responsive" alt=""
title="">
The grid system
• Bootstrap offers very strong framework of grid system with extensive
use of div elements which is dynamically compatible with all the
devices and screens currently available in the market.
• Basic architecture of the grid system of Bootstrap is that the screen is
horizontally divided into maximum 12 columns (logically).
• And Bootstrap has provided classes to create each combination of
columns – for each device sizes.
• The following matrix illustrates this
• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)
• One of the most important points here is that the total size of the columns
must always be 12 – if it is less than 12, some space will be left unused, if it is
more than 12, the last placeholder will be wrapped in the next line.

<div class="container">
<h1>Grid Example</h1>
<div class="row">
<div class="col-md-3"style="background-color:lavender;">Rahul</div>
<div class="col-md-6"style="background-color:lavenderblush;">Vijay</div>
<div class="col-md-2"style="background-color:lavender;">Kartik</div>
<div class="col-md-1"style="background-color:lavenderblush;">Ajeet</div>
</div>

</div>
Constructing data entry forms
<form>
<div class="container">
<div class="form-group">
<label for="yourName" class=“control-label">Name</label>
<input type="text" class="form-control" id="yourName"
placeholder="Your name please">
</div>
</div>
</form>
<form class="form-horizontal">
<div class="container">
<div class="form-group">
<label for="yourName" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="yourName"
placeholder="Your name please">
</div>
</div>
<div class="form-group">
<label for="yourEmail" class="col-sm-3 control-label">Email address</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-envelope"></span>
<input type="email" class="form-control" id="yourEmail"
placeholder="Your Email Id">
</div>
</div
• The .form-group class is used to encapsulate multiple controls in a
group – just as we have done for labels and corresponding text boxes.
• The .control-label and .form-control classes are used to style the
labels and form elements respectively.
• If you want to create a form with horizontal labels and controls – use
the .form-horizontal class and place the labels and controls as grid
columns.
The .control-group class will act as each row in the form.
• Using the .input-group class you can associate multiple controls in
adjacently.
• You can create inline forms using the .form-inline class, instead of the
form-horizontal class.
•.form-control class added.
• Use .has-success, .has-warning, .has-error classes to reflect various
validation states.
• In order to control the sizes you can use .input-lg, .input-sm classes.
• For controlling the size of a group you can use .form-group-lg
or .form-group-sm classes.
• For showing up any help texts, you can use .help-block class in a
separate label. This will show the texts in a new line.
• We have styled our button with .btn-primary class. Apart from this
the other available classes are .btn-success, .btn-warning, .btn-
info, .btn-danger and .btn-link.
• We have used Glyphicons to beautify the form. This concept is
detailed in later chapters.
Alerts
just create a div element with the .alert class in Bootstrap.
• <div class=“alert alert-info”>You last visited us on ...</div>
• You can use any of these classes to show contextual information—
• alert-info,
• alert-warning,
• alert-success
• alert-danger
• Putting links inside alert would require you to add the .alert-link in the
anchor tag.
• This will ensure that the links will also be displayed in the
corresponding contextual color
<div class="alert alert-info">You last visited us on Thursday, 20th
March 2015. Please <a href="/contact.html" class="alert-link">let us
know</a> in case of any issues or feedback.</div>
Buttons
• <button type="button" class="btn">Basic</button>

• <button type="button" class="btn btn-primary">Primary


</button>

• btn btn-secondary
• btn btn-success
btn btn-info
• btn btn-warning
• btn btn-danger
• btn btn-dark
• btn btn-light
• btn btn-link
Button Outline

<button type="button" class="btn btn-outline-


primary">Primary</button>
btn btn-outline-secondary
btn btn-outline-success
btn btn-outline-info
btn btn-outline-warning
btn btn-outline-danger
btn btn-outline-dark
btn btn-outline-light text-dark
Button Sizes
Use the .btn-lg class for large buttons or .btn-sm class for small buttons:
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

Block Level Buttons


Add class .btn-block to create a block level button that spans the entire
width of the parent element.
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
Active/Disabled Buttons
• the class .active makes a button appear pressed, and
the disabled attribute makes a button unclickable.
• <button type="button" class="btn btn-primary
active">Active Primary</button>

<button type="button" class="btn btn-


primary" disabled>Disabled Primary</button>
button groups
• For grouping a number of buttons together, we would use the
.btn-group class.
• This class creates a group of buttons; however, each of these buttons
must have the .btn class associated.
• For example, use the following code:
<div class="btn-group">
<button type="button" class="btn btn-success">Add</button>
<button type="button" class="btn btn-warning">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
Text Colors
• Bootstrap has some contextual classes that can be used to provide "meaning through
colors".
The classes for text colors are:
• .text-muted,
• .text-primary,
• .text-success,
• .text-info,
• .text-warning,
• .text-danger,
• .text-secondary,
• .text-white
• .text-dark
• .text-body (default body color/often black) and
• .text-light:
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
Background Colors
• The classes for background colors are:
• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-dark
• .bg-light.
<p class="bg-dark text-white">Dark grey background color.</p>
<p class="bg-light text-dark">Light grey background color.</p>
Tables
• The .table class is used to add basic styling to a table.
<table class="table">
<tr><th>Id</th><th>Name</th><th>Age</th></
tr>
<tr><td>101</td><td>Rahul</td><td>23</td></
tr>
<tr><td>102</td><td>Umesh</td><td>22</td></
tr>
<tr><td>103</td><td>Max</td><td>29</td></
tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></
tr>
• The .table-striped class is used to add zebra-stripes to a
table
• The .table-bordered class is used to add borders on all sides
of the table and cells
• The .table-hover class is used to enable a hover state on
table rows
• The .table-condensed class is used to make a table more
compact by cutting cell padding in half
• The .table-responsive class is used to create a responsive
table. You can open the responsible table even on small devices
(under 768px). Then the table will be scrolled horizontally.
Displays larger than 768px wide, there is no difference.
• The .table-dark class is used to add a black background to
the table:
• Combine the .table-dark class and .table-striped class to create
a dark, striped table:
Bootstrap Contextual classes

• Contextual classes are used to color table rows (<tr>)


or table cells (<td>):
Class Description
.active It is used to apply the hover
color to the table row or table
cell
.success It indicates a successful or
positive action

.info It indicates a neutral


informative change or action

.warning It specifies a warning that


might need attention

.danger It indicates a dangerous or


potentially negative action
<table class="table">
<tr class="success"><th>Id</th><th>Name</th><th>Age</
th></tr>
<tr class="active"><td>101</td><td>Rahul</td><td>23</
td></tr>
<tr class="danger"><td>102</td><td>Umesh</td><td>22</
td></tr>
<tr class="info"><td>103</td><td>Max</td><td>29</td></
tr>
<tr class="warning"><td>104</td><td>Ajeet</td><td>21</
td></tr>
</table>
Bootstrap Progress Bar
• The class .progress within a <div> element is used to
create a default progress bar in bootstrap.
<div class="container">
<h2>Default Progress Bar</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-
valuenow="70" aria-valuemin="0" aria-
valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
</div>
Bootstrap Custom Forms

• Bootstrap comes with customized form elements, that


are meant to replace browser defaults:

Custom Checkbox
• To create a custom checkbox, wrap a container element, like <div>,
with a class of .custom-control and .custom-checkbox around the
checkbox. Then add the .custom-control-input to the input with
type="checkbox".
<form action="/action_page.php">
<div class="custom-control custom-checkbox>
<input type="checkbox" class="custom-control-input“
id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Custom
checkbox</label>
</div>
<input type="checkbox" id="defaultCheck" name="example2">
<label for="defaultCheck">Default checkbox</label>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
1. Custom Switch : .custom-switch
2. Custom Radio buttons : .custom-radio
3. Inline Custom Form Controls : .custom-control-inline
4. Custom Select Menu : .custom-select class
5. Custom Select Menu Size : Use the .custom-select-
sm class to create a small select menu and
the .custom-select-lg class for a large one
6. Custom Range : .custom-range
7. Custom File Upload : To create a custom file upload,
wrap a container element with a class of .custom-file
around the input with type="file". Then add
the .custom-file-input to it.
Bootstrap utilities
• Bootstrap 4 has a lot of utility/helper classes to quickly
style elements without using any CSS code.

Borders
• Use the border classes to add or remove borders from an element:
<div class="container">
<h2>Borders</h2>
<p>Use the border classes to add or remove borders from an element:</p>
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
</div>
• Border Color
<div class="container">
<h2>Borders</h2>
<p>Use a contextual border color to add a color to the border:</p>
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
</div>
• Border Radius
<div class="container">
<h2>Borders</h2>
<p>Round the corner of an element with the rounded classes:</p>
<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
</div>
• Float and Clearfix
<div class="container">
<h2>Float</h2>
<p>Float an element to the right with the .float-right class or to the
left with .float-left, and clear floats with the .clearfix class.</p>
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>
</div>
Center alignment
• The center alignment shows function in the center position of
the web page. The "mx-auto" class helps to create a function
in the middle position of the application.
Syntax
<div class = "alignment">
<div class = "mx-auto bg-info" style = "width:120px"> Center alignment </div>
</div>
Bootstrap width
• The w-* classes specifies the width of an element. The
bootstrap 5 version provides w-25, w-50, w-75, w-100,
mw-100, and mw-auto classes to set the width size.
<div class = "w-50"> </div>
Example:
<div class = "alignment">
<div class = "mx-auto bg-info w-25"> width-25 </div>
<div class = "mx-auto bg-success w-50"> width-50 </
div>
<div class = "mx-auto bg-warning w-75"> width-75 </
div>
</div>
Bootstrap height

• The h-* classes specify the height of an element. The


bootstrap 5 version provides h-25, w-50, h-75, h-100,
mh-100, and mh-auto classes to set the height size.
<div class = "h-50"> </div>
Example:
<div class = "h-25 bg-primary"> Height 25 </div>
<div class = "h-50 bg-dark"> Height 50 </div>
Bootstrap visibility

• Bootstrap provides a visibility class to show and hide


the element.
• The "visible" class appears as the required element, and
the “invisible" class disappears from the web page.
<div class = "visibility">
<div class = "visible|invisible"> </div>
Bootstrap Spacing

• The margin creates space outside the element using the


"m-*" class. The padding creates space inside the
element using the "p-*" class.
• The following syntax shows a basic margin:
<span class = "m-*"> </span>
• The following syntax shows basic padding.
<span class = "p-*"> </span>

You might also like