Boostrap 1

My First Code
Introduction
 We download and use compiled Bootstrap for more portability as it contains

mini version of CSS, JavaScript files and icons used for web development.
 We start our first code by opening a new file in a favourite code editor like
Notepad++ and write the code in the empty window.
 We should write the viewport <meta> tag inside the <head> section of html
document to enable touch zooming on mobile devices.
 We include the X-UA-Compatible meta tag with edge mode to tell the
browser to open the highest mode for displaying the web page.
 We can change the HTML file to a Bootstrap template by including
apropriate Bootstrap CSS and JavaScript files inside the <body> tag to
improve the performance of our web page.
 We save this file with extension .html and it will open in the browser by
double clikcing it.
 If we don't want to host the Bootstrap by downloading it, we can use
Bootstrap CSS and JavaScript files using CDN(Content Delivery Network)
links for a better perfornmance by reducing the loading time, because CDN
will be loaded the previous searched sites from he browser's cache or
history to prevent the re-downloading of sites.
 If a visitor to our site has already visited another site and downloaded the
Bootstrap files from the CDN that we have used in our site, then the files will
be available in the browser's cache and will be used, thereby reducing the
loading time.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Horizontal Definition Lists</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
 
 <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
 </head>

 <body>

 <h2>Horizontal Definition Lists</h2>
 <dl class="dl-horizontal">
 <dt>User Agent</dt>
 <dd>An HTML user agent is any device that interprets HTML documents.</dd>
 <dt>Client-side Scripting</dt>
 <dd>Client-side scripting generally refers to the category of computer programs on the web
that are executed client-side i.e. by the user's web browser.</dd>
 <dt>Document Tree</dt>
 <dd>The tree of elements encoded in the source document.</dd>
 </dl>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>
Creating List Groups
To display a list of elements in a beautiful and appealing way, we use list

groups. The most basic list group is created as an unordered list <ul> with the
class .list-group, where each list items have the class .list-group-item.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example of Bootstrap 3 List Groups</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
</head>
<body>
<ul class="list-group">
<li class="list-group-item">Pictures</li>
<li class="list-group-item">Documents</li>
<li class="list-group-item">Music</li>
<li class="list-group-item">Videos</li>
</ul>
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
List Groups with Linked Items
We can link list group items by using the hyperlink tag <a> of HTML. In this
code we replace the <li> tag with <a> and instead of <ul> we use the <div> as
parent. Using this code we can add badges and icons, where the badges will
appear on the right. <ul> with the class .list-group, where each list items have
the class .list-group-item.
<!DOCTYPE html>
<html>
<head>
<title>Example of Bootstrap 3 Linked List Groups</title>
</head>
<body>
<div class="list-group">
<a href="#" class="list-group-item active">

<span class="glyphicon glyphicon-camera"></span> Pictures <span class="badge">25</span>
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-file"></span> Documents <span class="badge">145</span>
</a>
<span class="glyphicon glyphicon-music"></span> Music <span class="badge">50</span>
</a>
<span class="glyphicon glyphicon-film"></span> Videos <span class="badge">8</span>
</a>
</div>
</body>
</html>
Headings and Paragraph in Group
We can add HTML elements like headings and paragraph within the list groups.
In this code, we use <p> paragraph and <h> heading elements.
<!DOCTYPE html>
<html>
<head>
<title>Example of Bootstrap 3 Linked List Groups</title>

</head>
<body>
<div class="list-group">
<h4 class="list-group-item-heading">What is HTML?</h4>
<p class="list-group-item-text">HTML stands for HyperText Markup Language. HTML is the main
markup language for describing the structure of Web pages.</p>
</a>
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">What is Bootstrap?</h4>
<p class="list-group-item-text">Bootstrap is a powerful front-end framework for faster and easier

web development. It is a collection of HTML and CSS based design template.</p>
</a>
<h4 class="list-group-item-heading">What is CSS?</h4>
<p class="list-group-item-text">CSS stands for Cascading Style Sheet. CSS allows you to specify
various style properties for a given HTML element such as colors, backgrounds, fonts etc.</p>
</a>
</div>
</body>
</html>
Active List Groups
 To specify the active list group item, we can use the class .active
 In this code, this is achieved by using the <div> parent element and
hyperlink tag <a> to make the active item as a link.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 List Group Contextual Classes</title>
 </head>

 <body>

 <ul class="list-group">
 <li class="list-group-item list-group-item-success">200 OK: The server successfully
processed the request.</li>
 <li class="list-group-item list-group-item-info">100 Continue: The client should continue
with its request.</li>
 <li class="list-group-item list-group-item-warning">503 Service Unavailable: The server is
temporarily unable to handle the request.</li>
 <li class="list-group-item list-group-item-danger">400 Bad Request: The request cannot be
fulfilled due to bad syntax.</li>
 </ul>

 </body>

 </html>
Active List Groups
 To specify the active list group item, we can use the class .active
 In this code, this is achieved by using the <div> parent element and
hyperlink tag <a> to make the active item as a link.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 List Group Contextual Classes</title>
 </head>

 <body>

 <div class="list-group">
 <a href="#" class="list-group-item list-group-item-success">200 OK: The server successfully
processed the request.</a>
 <a href="#" class="list-group-item list-group-item-info active">100 Continue: The client
should continue with its request.</a>
 <a href="#" class="list-group-item list-group-item-warning">503 Service Unavailable: The
server is temporarily unable to handle the request.</a>
 <a href="#" class="list-group-item list-group-item-danger">400 Bad Request: The request
cannot be fulfilled due to bad syntax.</a>
 </div>

 </body>

 </html>
Creating Vertical Form Layout
 HTML forms are an important part of web pages.

 Bootstrap simplifies the styling process and alignment of form controls like
labels, input fields, selectboxes, textareas, buttons, etc. through a defined
set of classes.
 Out of three types of form layouts, the default form layout is Vertical Form.
 In this code, styles are used on the form controls and we use
the <form> element without any base classes on it or any particular changes
in markup.
 We have used textual elements like <input>, <textarea> and <select> with the
class .form-control and are 100% default wide.
 Form controls are are stacked with labels left-aligned on top.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Vertical Form Layout</title>
 </head>

 <body>

 <form>
 <div class="form-group">
 <label for="inputEmail">Email</label>
 <input type="email" class="form-control" id="inputEmail" placeholder="Email">
 </div>
 <label for="inputPassword">Password</label>
 <input type="password" class="form-control" id="inputPassword"
placeholder="Password">
 </div>
 <div class="checkbox">
 <label><input type="checkbox"> Remember me</label>
 </div>
 <button type="submit" class="btn btn-primary">Login</button>
 </form>

 </body>

 </html>
Creating Horizontal Form Layout
 In Horizontal Form layout the labels are right-aligned and appear in the
same line of the form controls, but to make a horizontal form layout we
need to use so many markups.
 In this code, we use class .form-horizontal to the <form> element.
 It contians the labels and form element in the <div> element with the class
.form-group .
 To align labels and form controls, we use predefined grid classes like .col-
xs
 For the <label> element we use the class .control-label
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Horizontal Form Layout</title>

 <style type="text/css">
 .bs-example {
 margin: 20px;
 }
 /* Fix alignment issue of label on extra small devices in Bootstrap 3.2 */

 .form-horizontal .control-label {
 padding-top: 7px;
 }
 </style>

 </head>

 <body>

 <form class="form-horizontal">
 <label for="inputEmail" class="control-label col-xs-2">Email</label>
 <div class="col-xs-10">
 </div>
 </div>
 <label for="inputPassword" class="control-label col-xs-2">Password</label>
 </div>
 </div>
 <div class="col-xs-offset-2 col-xs-10">
 </div>
 </div>
 </div>
 </div>
 </div>
 </form>

 </body>

 </html>
Creating Inline Form Layout
 The Inline Form layout is used to make a compact layout.

 In this code, we acheive this by using the Bootstrap class .form-inline to
the <form> element.
 It contians the labels and form element in the <div> element with the class
.form-group .
 Usually we need to place a label next to the inputs for the users to
understand the types of input used.
 We hide these labels in the inline form layout by using .sr-only class
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Inline Form Layout</title>

 .bs-example {
 margin: 20px;
 }

 }
 </style>

 </head>

 <body>

 <form class="form-inline" role="form">
 <label class="sr-only" for="inputEmail">Email</label>
 </div>
 <label class="sr-only" for="inputPassword">Password</label>
 </div>
 </div>
 </form>
 <br>
 <div class="alert alert-info">
 <a href="#" class="close" data-dismiss="alert">×</a>
 <strong>Note:</strong> The inline form layout is rendered as default vertical form layout if
the viewport width is less than 768px. Open the output in a new window and resize the
screen to see how it works.
 </div>

 </body>

 </html>
Static Form Control
 There maybe situations in which we need to place just plain text to a form
label.
 In this code, we have used the horizontal form layout and on a <p> element
we use the .form-control-static class.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Static Form Control</title>

 .bs-example {
 margin: 20px;
 }

 }
 </style>

 </head>

 <body>

 <p class="form-control-static">harrypotter@mail.com</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </form>

 </body>

 </html>
<!DOCTYPE html>
<html>
<head>
<title>Example of Bootstrap 3 Static Form Control</title>
<style type="text/css">
.bs-example {
margin: 20px;
/* Fix alignment issue of label on extra small devices in Bootstrap 3.2 */
.form-horizontal .control-label {
padding-top: 7px;
</style>
</head>
<body>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
<p class="form-control-static">harrypotter@mail.com</p>
</div>
</div>
<label for="inputPassword" class="control-label col-xs-2">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
</body>
</html>
Column Sizing of Inputs, Textareas and Select Boxes
 There will be instances where we want to match the size of our form
controls to the Bootstrap grid column sizes.
 In this code, we wrap form controls (<input>, <textarea>, and <select>) into
grid columns or any custom element by applying the grid classes on it.
<!DOCTYPE html>
<html>
<head>
<title>Grid Sizing of Bootstrap 3 Form Controls</title>
</head>
<body>
<form>
<div class="row">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<br>
<div class="row">
<textarea class="form-control"></textarea>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<select class="form-control">
<option>Select</option>
</select>
</div>
</select>
</div>
</select>
</div>
</div>
</form>
</body>
</html>
Height Sizing of Form Groups
 To control the height of form sizing classes like .form-group-lg or .form-

group-sm to the .form-group.
 This makes the labels as well as form controls larger or smaller
simultaneously in the horizontal form layouts.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Height Sizing of Bootstrap 3 Form Groups</title>

 </head>

 <body>

 <div class="form-group form-group-lg">
 <label class="col-sm-3 control-label" for="inputLarge">Large label</label>
 <div class="col-sm-9">
 <input type="text" class="form-control" id="inputLarge" placeholder="Large input">
 </div>
 </div>
 <label class="col-sm-3 control-label" for="inputDefault">Default label</label>
 <input type="text" class="form-control" id="inputDefault" placeholder="Default input">
 </div>
 </div>
 <div class="form-group form-group-sm">
 <label class="col-sm-3 control-label" for="inputSmall">Small label</label>
 <input type="text" class="form-control" id="inputSmall" placeholder="Small input">
 </div>
 </div>
 </form>

 </body>

 </html>
Creating Disabled Inputs
 Using this code, we can disable text based inputs by adding the
attribute disabled to the <input> element described in the <form> element.
 In the browser, we will see the "not-allowed" cursor when you put the mouse
pointer on the text label.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Disabled Inputs</title>

 </head>

 <body>

 <form>
 <input type="text" class="form-control" placeholder="Disabled input" disabled="disabled">
 </form>

 </body>

 </html>
Creating Readonly Inputs
 Using this code, we can make text based inputs read only by adding the
attribute readonly to the <input> element.
 This prevents the user from inputting anything, i.e., just read only.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Readonly Inputs</title>

 </head>

 <body>

 <form>
 <input type="text" class="form-control" placeholder="Readonly input"
readonly="readonly">
 </form>

 </body>

 </html>
My First Code
Introduction
 We download and use compiled Bootstrap for more portability as it contains

mini version of CSS, JavaScript files and icons used for web development.
 We start our first code by opening a new file in a favourite code editor like
Notepad++ and write the code in the empty window.
 We should write the viewport <meta> tag inside the <head> section of html
document to enable touch zooming on mobile devices.
 We include the X-UA-Compatible meta tag with edge mode to tell the
browser to open the highest mode for displaying the web page.
 We can change the HTML file to a Bootstrap template by including
apropriate Bootstrap CSS and JavaScript files inside the <body> tag to
improve the performance of our web page.
 We save this file with extension .html and it will open in the browser by
double clikcing it.
 If we don't want to host the Bootstrap by downloading it, we can use
Bootstrap CSS and JavaScript files using CDN(Content Delivery Network)
links for a better perfornmance by reducing the loading time, because CDN
will be loaded the previous searched sites from he browser's cache or
history to prevent the re-downloading of sites.
 If a visitor to our site has already visited another site and downloaded the
Bootstrap files from the CDN that we have used in our site, then the files will
be available in the browser's cache and will be used, thereby reducing the
loading time.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Basic Bootstrap Template</title>
 </head>

 <body>


 <script src="js/jquery-2.2.0.min.js"></script>
 </body>

 </HTML>
Creating Disable Fieldsets
 Using this code, we can disable form controls within a fieldset by adding the
attribute disabled to the <fieldset> element.
 This prevents the user from inputting anything in the fieldsets.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Disabled Inputs</title>

 </head>

 <body>

 <form>
 <input type="text" class="form-control" placeholder="Disabled input" disabled="disabled">
 </form>

 </body>

 </html>
Creating Disable Fieldsets
 Using this code, we can disable form controls within a fieldset by adding the
attribute disabled to the <fieldset> element.
 This prevents the user from inputting anything in the fieldsets.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Disabled Fieldsets</title>

 </head>

 <body>

 <fieldset disabled="disabled">
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </fieldset>
 </form>

 </body>

 </html>
Placing Help Text around Form Controls
 To help users enter the correct data in a form, we can place help texts for
the form controls.
 For this purpose, we add the class .help-block to the <span> tag (used for
applying the style to display help text) and displaying it under the bottom of
the control.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Block Help Text</title>

 </head>

 <body>

 <form>
 <input type="text" class="form-control">
 <span class="help-block">A block of help text that breaks onto a new line and may extend
beyond one line.</span>
 </form>

 </body>

 </html>
Form Validation States
 Bootstrap gives us a powerful and effective way to style input control to

present differenet validation states, like error, warning, and success
messages.
 In this code, we have added the appropriate class to the .form-group which
labels the text, its input type and the control.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Forms Validation States</title>

 </head>

 <body>

 <div class="form-group has-success">
 <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
 <input type="text" id="inputSuccess" class="form-control" placeholder="Input with
success">
 <span class="help-block">Username is available</span>
 </div>
 </div>
 <div class="form-group has-warning">
 <label class="col-xs-2 control-label" for="inputWarning">Password</label>
 <input type="password" id="inputWarning" class="form-control" placeholder="Input with
warning">
 <span class="help-block">Password strength: Weak</span>
 </div>
 </div>
 <div class="form-group has-error">
 <label class="col-xs-2 control-label" for="inputError">Email</label>
 <input type="email" id="inputError" class="form-control" placeholder="Input with error">
 <span class="help-block">Please enter a valid email address</span>
 </div>
 </div>
 </form>

 </body>

 </html>
.has-feedback on .form-group and the right glyphicon
We can also add optional feedback icons to our inputs using the class .has-
feedback on .form-group and using the right glyphicon (library of precise
monochromatic icons and symbols) to symbolize the validation states.
<!DOCTYPE html>
<html>
<head>
<title>Example of Bootstrap 3 Forms with Feedback Icons</title>

</head>
<body>
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="col-xs-2 control-label" for="inputSuccess">Username</label>
<input type="text" id="inputSuccess" class="form-control" placeholder="Input with success">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
<span class="help-block">Username is available</span>
</div>
</div>
<div class="form-group has-warning has-feedback">
<label class="col-xs-2 control-label" for="inputWarning">Password</label>
<input type="password" id="inputWarning" class="form-control" placeholder="Input with

warning">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
<span class="help-block">Password strength: Weak</span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label class="col-xs-2 control-label" for="inputError">Email</label>
<input type="email" id="inputError" class="form-control" placeholder="Input with error">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>

<span class="help-block">Please enter a valid email address</span>
</div>
</div>
</form>
</body>
</html>
Supported Form Controls
 Bootstrap gives support for all standard form controls as well as new
HTML5 input types.
 New HTML5 input types are datetime, number, email, url, search, tel, color,
range etc
 In this code, we have used the standard form controls like name, email,
phone number, etc.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Supported Form Controls</title>

 </head>

 <body>

 <h1>Sign Up</h1>
 <label class="control-label col-xs-3" for="inputEmail">Email:</label>
 </div>
 </div>
 <label class="control-label col-xs-3" for="inputPassword">Password:</label>
 </div>
 </div>
 <label class="control-label col-xs-3" for="confirmPassword">Confirm Password:</label>
 <input type="password" class="form-control" id="confirmPassword"
placeholder="Confirm Password">
 </div>
 </div>
 <label class="control-label col-xs-3" for="firstName">First Name:</label>
 <input type="text" class="form-control" id="firstName" placeholder="First Name">
 </div>
 </div>
 <label class="control-label col-xs-3" for="lastName">Last Name:</label>
 <input type="text" class="form-control" id="lastName" placeholder="Last Name">
 </div>
 </div>
 <label class="control-label col-xs-3" for="phoneNumber">Phone:</label>
 <input type="tel" class="form-control" id="phoneNumber" placeholder="Phone
Number">
 </div>
 </div>
 <label class="control-label col-xs-3">Date of Birth:</label>
 <select class="form-control">
 <option>Date</option>
 </select>
 </div>
 <option>Month</option>
 </select>
 </div>
 <option>Year</option>
 </select>
 </div>
 </div>
 <label class="control-label col-xs-3" for="postalAddress">Address:</label>
 <textarea rows="3" class="form-control" id="postalAddress" placeholder="Postal
Address"></textarea>
 </div>
 </div>
 <label class="control-label col-xs-3" for="ZipCode">Zip Code:</label>
 <input type="text" class="form-control" id="ZipCode" placeholder="Zip Code">
 </div>
 </div>
 <label class="control-label col-xs-3">Gender:</label>
 <label class="radio-inline">
 <input type="radio" name="genderRadios" value="male"> Male
 </label>
 </div>
 <label class="radio-inline">
 <input type="radio" name="genderRadios" value="female"> Female
 </label>
 </div>
 </div>
 <label class="checkbox-inline">
 <input type="checkbox" value="news"> Send me latest news and updates.
 </label>
 </div>
 </div>
 <label class="checkbox-inline">
 <input type="checkbox" value="agree"> I agree to the <a href="#">Terms and
Conditions</a>.
 </label>
 </div>
 </div>
 <br>
 <input type="submit" class="btn btn-primary" value="Submit">
 <input type="reset" class="btn btn-default" value="Reset">
 </div>
 </div>
 </form>

 </body>

 </html>
Extending Form Controls
 To create interactive form controls, Bootstrap input component is powerful

and flexible; however, limited to text input only.
 We can extend the text input by placing text or buttons before, after, and
both sides to make the form more attractive.
 In this code, we have created prepended and appended inputs, first by
wrapping the text or icon in the <span> element with the class .input-group-
addon and place before the input element.
 Second method is wrapping both the <span> and text <input> element in
the <div> element and applying the class .input-group to it.
 This feature is only available to text-based inputs and not for <select>
or <textarea elements>
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Prepended and Appended Inputs</title>

 </head>

 <body>

 <form>
 <div class="row">
 <div class="input-group">
 <span class="input-group-addon"><span class="glyphicon glyphicon-
user"></span></span>
 <input type="text" class="form-control" placeholder="Username">
 </div>
 </div>
 <input type="text" class="form-control" placeholder="Amount">
 <span class="input-group-addon">.00</span>
 </div>
 </div>
 <span class="input-group-addon">$</span>
 <input type="text" class="form-control" placeholder="US Dollar">
 </div>
 </div>
 </div>
 </form>
 <hr>
 <form>
 <input type="text" class="form-control" placeholder="Username">
 </div>
 <br>
 <input type="text" class="form-control" placeholder="Amount">
 </div>
 <br>
 <span class="input-group-addon">$</span>
 <input type="text" class="form-control" placeholder="US Dollar">
 </div>
 </form>

 </body>

 </html>
Checkboxes and Radio Buttons Addons
We can also add checkbox or radio button by applying the class input-group-
addon under the <span> element in the <div> element.
<!DOCTYPE html>
<html>
<head>
<title>Example of Bootstrap 3 Prepended and Appended Inputs</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6-distcssootstrap.min.css">
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
</head>
<body>
<form>
<div class="row">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
</div>
</div>
<input type="radio">
</span>
</div>
</div>
</div>
</form>
<hr>
<form>
</span>
</div>
<br>
</span>
</div>
</form>
<script src="bootstrap-3.3.6-dist/js/jquery-2.2.0.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Example of Bootstrap 3 Prepended and Appended Inputs</title>
</head>
<body>
<form>
<div class="row">
</span>
</div>
</div>
</span>
</div>
</div>
</div>
</form>
<hr>
<form>
</span>
</div>
<br>
</span>
</div>
</form>
</body>
</html>
Buttons Addons for Text Inputs
 We can prepend or append butons like we did with text.

 In this code, we have wrapped buttons within the <span> element and
applied the class .input-group-btn instead of the class.input-group-addon
 <!DOCTYPE html>
 <html>

 <head>

 </head>

 <body>

 <form>
 <input type="text" class="form-control" placeholder="Search…">
 <span class="input-group-btn">
 <button type="button" class="btn btn-default">Go</button>
 </span>
 </div>
 </div>
 <button type="button" class="btn btn-default">Action</button>
 <button type="button" class="btn btn-default">Options</button>
 </span>
 <input type="text" class="form-control" placeholder="Type something…">
 </div>
 </div>
 </div>
 </form>
 <hr>
 <form>
 <input type="text" class="form-control" placeholder="Search…">
 <button type="button" class="btn btn-default">Go</button>
 </span>
 </div>
 <br>
 <button type="button" class="btn btn-default">Action</button>
 <button type="button" class="btn btn-default">Options</button>
 </span>
 <input type="text" class="form-control" placeholder="Type something…">
 </div>
 </form>


 </body>

 </html>
Adding Button Dropdowns to Text Inputs
 We can create dropdown buttons for multiple actions.

 In this code, we have applied the class btn-defalult dropdown-toggle in
the <button> element within the <div> element
 <!DOCTYPE html>
 <html>

 <head>
 <link rel="stylesheet" type="text/css" href="bootstrap-3.3.6-distcssootstrap.min.css">
 <link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">

 </head>

 <body>

 <form>
 <div class="input-group-btn">
 <button type="button" class="btn btn-default dropdown-toggle" data-
toggle="dropdown">Action <span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
 </div>
 </div>
 </div>
 <ul class="dropdown-menu pull-right">
 </ul>
 </div>
 </div>
 </div>
 </div>
 </form>
 <hr>
 <form>
 <li><a href="#">Something else here</a></li>
 </ul>
 </div>
 </div>
 <br>
 </ul>
 </div>
 </div>
 </form>


 <script src="bootstrap-3.3.6-dist/js/jquery-2.2.0.min.js"></script>
 <script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
 </body>

 </html>
 <!DOCTYPE html>
 <html>

 <head>

 </head>

 <body>

 <form>
 </ul>
 </div>
 </div>
 </div>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </form>
 <hr>
 <form>
 </ul>
 </div>
 </div>
 <br>
 </ul>
 </div>
 </div>
 </form>


 </body>

 </html>
Adding Segmented Dropdown Button Groups
 Segmented dropdown button group is where the dropdown button is placed

bt the side of other buttons.
 In this code, we have described tabindex for the <button> element and set
index value for tab as -1.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Segmented Dropdown Button Groups</title>

 </head>

 <body>

 <form>
 <button tabindex="-1" class="btn btn-default" type="button">Action</button>
 <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-
toggle" type="button">
 <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>
 </button>
 </ul>
 </div>
 </div>
 </div>
 </button>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </form>
 <hr>
 <form>
 <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle"
type="button">
 </button>
 </ul>
 </div>
 </div>
 <br>
 <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle"
type="button">
 </button>
 </ul>
 </div>
 </div>
 </form>


 </body>

 </html>
Height Sizing of Input Groups
 In this code, we have added relative form sizing classes such as .input-
group-lg or .input-group-sm to the .input-group to make it larger or smaller.
 There is no need for repeating the form control size classes on each element,
as all the contents in the .input-group will resize automatically.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Height Sizing of Bootstrap 3 Input Groups</title>

 </head>

 <body>

 <form>
 <div class="input-group input-group-lg">
 </div>
 </div>
 <span class="input-group-addon">
 <input type="checkbox">
 </span>
 </div>
 </div>
 </button>
 </ul>
 </div>
 </div>
 </div>
 </div>
 <br>
 </div>
 </div>
 </span>
 </div>
 </div>
 </button>
 </ul>
 </div>
 </div>
 </div>
 </div>
 <br>
 <div class="input-group input-group-sm">
 </div>
 </div>
 </span>
 </div>
 </div>
 </button>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </form>


 </body>

 </html>
<!DOCTYPE html>
<html>
<head>
<title>Height Sizing of Bootstrap 3 Input Groups</title>
</head>
<body>
<form>
<div class="row">
<div class="input-group input-group-lg">
<span class="input-group-addon"><span class="glyphicon glyphicon-
</div>
</div>
</span>
</div>
</div>
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-default" type="button">Action</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
<br>
<div class="row">
</div>
</div>
</span>
</div>
</div>
</button>
</ul>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="input-group input-group-sm">
</div>
</div>
</span>
</div>
</div>
</button>
</ul>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Button Styles
 We can style the buttons using different classes available. It can be applied
to any element and is used for indicating differnet states.
 In this code, we have applied the <button> and can be applied for <a>
and <input>
 The different states indicated using the buttons are Default, Primary, Info,
Success, Warning, Danger, and Link.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Buttons</title>

 </head>

 <body>

 <button type="button" class="btn btn-default">Default</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-warning">Warning</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-link">Link</button>
 <hr>
 <input type="button" class="btn btn-default" value="Default">
 <input type="button" class="btn btn-primary" value="Primary">
 <input type="button" class="btn btn-info" value="Info">
 <input type="button" class="btn btn-success" value="Success">
 <input type="button" class="btn btn-warning" value="Warning">
 <input type="button" class="btn btn-danger" value="Danger">
 <input type="button" class="btn btn-link" value="Link">
 <hr>
 <a href="#" class="btn btn-default">Default</a>
 <a href="#" class="btn btn-primary">Primary</a>
 <a href="#" class="btn btn-info">Info</a>
 <a href="#" class="btn btn-success">Success</a>
 <a href="#" class="btn btn-warning">Warning</a>
 <a href="#" class="btn btn-danger">Danger</a>
 <a href="#" class="btn btn-link">Link</a>


 </body>

 </html>
Changing of the Sizes of Buttons
 We can further scale the buttons up or down by using another classess.

 In this code, we have used the .btn-lg, .btn-sm, or .btn-xs for making
butttons large, small or extra large.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Example of Bootstrap 3 Buttons Sizes</title>

 </head>

 <body>

 <button type="button" class="btn btn-default btn-lg">Default</button>
 <button type="button" class="btn btn-primary btn-lg">Primary</button>
 <button type="button" class="btn btn-info btn-lg">Info</button>
 <button type="button" class="btn btn-success btn-lg">Success</button>
 <button type="button" class="btn btn-warning btn-lg">Warning</button>
 <button type="button" class="btn btn-danger btn-lg">Danger</button>
 <hr>
 <button type="button" class="btn btn-default">Default</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-warning">Warning</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <hr>
 <button type="button" class="btn btn-default btn-sm">Default</button>
 <button type="button" class="btn btn-primary btn-sm">Primary</button>
 <button type="button" class="btn btn-info btn-sm">Info</button>
 <button type="button" class="btn btn-success btn-sm">Success</button>
 <button type="button" class="btn btn-warning btn-sm">Warning</button>
 <button type="button" class="btn btn-danger btn-sm">Danger</button>
 <hr>
 <button type="button" class="btn btn-default btn-xs">Default</button>
 <button type="button" class="btn btn-primary btn-xs">Primary</button>
 <button type="button" class="btn btn-info btn-xs">Info</button>
 <button type="button" class="btn btn-success btn-xs">Success</button>
 <button type="button" class="btn btn-warning btn-xs">Warning</button>
 <button type="button" class="btn btn-danger btn-xs">Danger</button>


 </body>

 </html>
Changing of the Sizes of Buttons
In this code, we have used the class .btn-block to create block level buttons
that spans the entire width of the parent element.
<!DOCTYPE html>
<html>
<head>
<title>Example of Bootstrap 3 Block Level Buttons</title>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level
button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level
button</button>
</body>
</html>
Bosstraap 63 lanjut 64

Boostrap 1

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Boostrap 1

Uploaded by

Copyright:

Available Formats

My First Code

 We download and use compiled Bootstrap for more portability as it contains

Creating List Groups

To display a list of elements in a beautiful and appealing way, we use list

<title>Example of Bootstrap 3 List Groups</title>

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

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">

List Groups with Linked Items

<title>Example of Bootstrap 3 Linked List Groups</title>

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

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">

<a href="#" class="list-group-item active">

<a href="#" class="list-group-item">

<span class="glyphicon glyphicon-file"></span> Documents <span class="badge">145</span>

<a href="#" class="list-group-item">

<span class="glyphicon glyphicon-music"></span> Music <span class="badge">50</span>

<a href="#" class="list-group-item">

<span class="glyphicon glyphicon-film"></span> Videos <span class="badge">8</span>

Headings and Paragraph in Group

<title>Example of Bootstrap 3 Linked List Groups</title>

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

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

<a href="#" class="list-group-item">

<h4 class="list-group-item-heading">What is HTML?</h4>

<a href="#" class="list-group-item active">

<h4 class="list-group-item-heading">What is Bootstrap?</h4>

<p class="list-group-item-text">Bootstrap is a powerful front-end framework for faster and easier

<a href="#" class="list-group-item">

<h4 class="list-group-item-heading">What is CSS?</h4>

Active List Groups

Active List Groups

Creating Vertical Form Layout

 HTML forms are an important part of web pages.

Creating Horizontal Form Layout

Creating Inline Form Layout

 The Inline Form layout is used to make a compact layout.

Static Form Control

<title>Example of Bootstrap 3 Static Form Control</title>

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

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">

/* Fix alignment issue of label on extra small devices in Bootstrap 3.2 */

<label for="inputEmail" class="control-label col-xs-2">Email</label>

<label for="inputPassword" class="control-label col-xs-2">Password</label>

<input type="password" class="form-control" id="inputPassword" placeholder="Password">

<div class="col-xs-offset-2 col-xs-10">

<label><input type="checkbox"> Remember me</label>

<div class="col-xs-offset-2 col-xs-10">

<button type="submit" class="btn btn-primary">Login</button>

Column Sizing of Inputs, Textareas and Select Boxes

<title>Grid Sizing of Bootstrap 3 Form Controls</title>

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

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">

<input type="text" class="form-control">

<input type="text" class="form-control">