0% found this document useful (0 votes)

53 views

Boostrap 3

The document discusses various pagination and labeling features in Bootstrap including: - Pagination is used to organize content across multiple pages by dividing it. Bootstrap uses the .pagination class for pagination. - Additional pagination classes like .disabled, .active customize the pagination for different states. - Pager is similar to pagination but intended for previous/next links. It uses classes like .previous and .next. - Labels are created using the .label class to add contextual notes to text. Label classes like .label-default style the labels.

Uploaded by

vino emilio

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

53 views

Boostrap 3

Uploaded by

vino emilio

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 56

Creating Pagination

 Pagination is the process of organizing content by dividing it into separate

pages.
 Pagination is used quite often in webpages, it is used by search engines to
display limited number of results on search results pages, or to show
limited number of posts for each page on a blog or forum.
 In the code, we use the class .pagination in the <ul> element.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Pagination</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="pagination">
 <li><a href="#">«</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">»</a></li>
 </ul>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Pagination with Disable and Active States

 We can customize pagination for different circumstances like user

approaches to an end or start, or to indicate current page number to the
user.
 In the code, we have used the class .disabled for making the links disabled
and .active to indicate the current page.
 The .disabled class displays links as disabled and does not remove the click
function. To do this we need to change active or disabled anchors with
spans.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Pagination with Disabled and Active States</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="pagination">
 <li class="disabled"><a href="#">«</a></li>
 <li class="active"><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">»</a></li>
 </ul>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Changing the Sizes of Pagination

 We can change the sizes of pagination to increase or decrease the clickable

area.
 In the code, we have added the relative sizing classes like .pagination-lg
or .pagination-sm to the .pagination base class for creating larger or
smaller pagination.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Pagination Sizes</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>
 <div>
 <ul class="pagination pagination-lg">
 <li><a href="#">«</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">»</a></li>
 </ul>
 </div>
 <div>
 <ul class="pagination">
 <li><a href="#">«</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">»</a></li>
 </ul>
 </div>
 <div>
 <ul class="pagination pagination-sm">
 <li><a href="#">«</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">»</a></li>
 </ul>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Pager</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="pager">
 <li><a href="#">Previous</a></li>
 <li><a href="#">Next</a></li>
 </ul>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Alignment of Pager

Pager is aligned horizontally and centered by default, but we can align

Previous link to left and Next link to right using the class .previous and .next
respectively.
<!DOCTYPE html>

<html>

<head>

<title>Example of Bootstrap 3 Pager Side Aligned</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>

<li class="previous"><a href="#">← Previous</a></li>

<li class="next"><a href="#">Next →</a></li>

</ul>

</body>

</html>

Alignment of Pager

Pager is aligned horizontally and centered by default, but we can align

Previous link to left and Next link to right using the class .previous and .next
respectively.
<!DOCTYPE html>

<html>

<head>

<title>Example of Bootstrap 3 Pager Side Aligned</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>

<li class="previous"><a href="#">← Previous</a></li>

<li class="next"><a href="#">Next →</a></li>

</ul>

</body>

</html>

pagination classes .disabled and .active to the pager

 We can also apply the same pagination classes .disabled and .active to the
pager.
 In this code, we have applied the class .disabled to Previous and so it is
disabled.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Pager with Disabled State</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="pager">
 <li class="previous disabled"><a href="#">← Previous</a></li>
 <li class="next"><a href="#">Next →</a></li>
 </ul>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Creating Inline Labels

 Inline labels are used to show some valuable information on the web pages
such as important notes, warning messages, etc.
 In this code, we have applied the class .label in <span> element to create
inline labels.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Inline Labels</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>
 <h1>Bootstrap heading <span class="label label-default">New</span></h1>
 <h2>Bootstrap heading <span class="label label-default">New</span></h2>
 <h3>Bootstrap heading <span class="label label-default">New</span></h3>
 <h4>Bootstrap heading <span class="label label-default">New</span></h4>
 <h5>Bootstrap heading <span class="label label-default">New</span></h5>
 <h6>Bootstrap heading <span class="label label-default">New</span></h6>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

contextual classes

We can use contextual classes like Default, Primary, Success, Info, warning,
danger to emphasize the inline labels.
<!DOCTYPE html>

<html>

<title>Example of Bootstrap 3 Inline Labels</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>

<p>This is a <span class="label label-default">Default</span> label.</p>

<p>This is a <span class="label label-primary">Primary</span> label.</p>

<p>This is a <span class="label label-success">Success</span> label.</p>

<p>This is an <span class="label label-info">Info</span> label.</p>

<p>This is an <span class="label label-warning">Warning</span> label.</p>

<p>This is an <span class="label label-danger">Danger</span> label.</p>

</body>

</html>

Creating Inline Badges

 We can create inline badges to provide the user important notifications like
number of unread messages, number of friend requests etc. in email clients
and social networking websites.
 In this code, we have used the class .badge in <span> element to create
inline badges.
 <!DOCTYPE html>
 <html>

 <head>
 <title>Basic Bootstrap Template</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>


 <script src="js/jquery-2.2.0.min.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </HTML>

Creating Progress Bar

 As the title suggests, progress bars are used for showing the progress of a
task or action to the users.
 In the code, we have used the class .progress-bar in <div> element and also
provided the style, i.e, the width, to create the progress bar.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Progress Bar</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>
 <div class="progress">
 <div class="progress-bar" style="width: 60%;">
 <span class="sr-only">60% Complete</span>
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>
Creating Progress Bar with Label

We can show the progress status as a percentage label from within the
progress bar by removing the <span> element with .sr-only class.
<!DOCTYPE html>

<html>

<head>

<title>Example of Bootstrap 3 Progress Bar with Label</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>

<div class="progress-bar" style="width: 60%;">

60%

</div>

</body>

</html>

Progress Bar with Label and Min-width

 When showing percentage label, it should be ensured that the label text
remains readable for very low percentages.
 In this code, we have add a min-width to the progress bar class to ensure
that.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Progress Bar with Label and Min-width</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>
 <div class="progress">
 <div class="progress-bar" style="min-width: 20px;">
 0%
 </div>
 </div>
 <div class="progress">
 <div class="progress-bar" style="min-width: 20px; width: 2%;">
 2%
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Creating Stripped Progress Bar

We can create the stripped progress bar by addding an extra class .progress-
striped to the .progress base class.
<!DOCTYPE html>

<html>

<head>

<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>

<div class="progress progress-striped">

<div class="progress-bar" style="width: 60%;">

<span class="sr-only">60% Complete</span>

</div>

</body>

</html>

The .active class animates

 We can animate the progress bar by adding the .active class to .progress-
stripped.
 The .active class animates the stripes from right to left.
 <!DOCTYPE html>
 <html>

 <head>
 <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>
 <div class="progress progress-striped active">
 <div class="progress-bar" style="width: 60%;">
 <span class="sr-only">60% Complete</span>
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Creating Stacked Progress Bar

 We can place multiple bars into the same progress bar to display it stacked.
 In this code, we have used classes like progress-bar-success, progress-bar-
warning, progress-bar-danger to display different status stacks.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Progress Bar</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>
 <div class="progress">
 <div class="progress-bar progress-bar-success" style="width: 40%">
 <span class="sr-only">Program Files (40%)</span>
 </div>
 <div class="progress-bar progress-bar-warning" style="width: 25%">
 <span class="sr-only">Residual Files (25%)</span>
 </div>
 <div class="progress-bar progress-bar-danger" style="width: 15%">
 <span class="sr-only">Junk Files (15%)</span>
 </div>
 </div>
 <hr>
 <div class="progress">
 <div class="progress-bar progress-bar-success" style="width: 40%">
 Program Files (40%)
 </div>
 <div class="progress-bar progress-bar-warning" style="width: 25%">
 Residual Files (25%)
 </div>
 <div class="progress-bar progress-bar-danger" style="width: 15%">
 Junk Files (15%)
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Progress Bars with Emphasis Classes

 We can use emphasis utility classes for progress bars to convey meaning
through color.
 In this code, we have used emphasis utility classes for info, succes, warning
danger and provide the width for each emphasis classes.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Progress Bar</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>
 <div class="progress">
 <div class="progress-bar progress-bar-info" style="width: 20%">
 <span class="sr-only">20% Used</span>
 </div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-success" style="width: 40%">
 <span class="sr-only">40% Used</span>
 </div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-warning" style="width: 80%">
 <span class="sr-only">80% Used</span>
 </div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-danger" style="width: 90%">
 <span class="sr-only">90% Used</span>
 </div>
 </div>
 <hr>
 <div class="progress">
 <div class="progress-bar progress-bar-info" style="width: 20%">
 Disk Space: 80% free
 </div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-success" style="width: 40%">
 Enough Disk Space: 60% free
 </div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-warning" style="width: 80%">
 Low Disk Space: 80% full
 </div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-danger" style="width: 90%">
 Not Enough Disk Space: 90% full
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Striped Progress Bars with Emphasis Classes

 We can use emphasis utility classes for progress bars to convey meaning
through color.
 In this code, we have used emphasis utility classes for info, success,
warning, danger and provide the width for each emphasis classes.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Progress Bar</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>
 <div class="progress progress-striped">
 <div class="progress-bar progress-bar-info" style="width: 20%">
 <span class="sr-only">20% Used</span>
 </div>
 </div>
 <div class="progress progress-striped">
 <div class="progress-bar progress-bar-success" style="width: 40%">
 <span class="sr-only">40% Used</span>
 </div>
 </div>
 <div class="progress progress-striped">
 <div class="progress-bar progress-bar-warning" style="width: 80%">
 <span class="sr-only">80% Used</span>
 </div>
 </div>
 <div class="progress progress-striped">
 <div class="progress-bar progress-bar-danger" style="width: 90%">
 <span class="sr-only">90% Used</span>
 </div>
 </div>
 <hr>
 <div class="progress progress-striped">
 <div class="progress-bar progress-bar-info" style="width: 20%">
 Disk Space: 80% free
 </div>
 </div>
 <div class="progress progress-striped">
 <div class="progress-bar progress-bar-success" style="width: 40%">
 Enough Disk Space: 60% free
 </div>
 </div>
 <div class="progress progress-striped">
 <div class="progress-bar progress-bar-warning" style="width: 80%">
 Low Disk Space: 80% full
 </div>
 </div>
 <div class="progress progress-striped">
 <div class="progress-bar progress-bar-danger" style="width: 90%">
 Not Enough Disk Space: 90% full
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Showing Contents with Jumbotron

 The Bootstrap jumbotron component is used to showcase the key content

or important information on a web page.
 In this code, we have wrapped content like heading, descriptions in a div
element and applied the class .jumbotron on it.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Jumbotron</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>
 <div class="container">
 <div class="row">
 <div class="col-xs-12">
 <div class="jumbotron">
 <h1>Learn to Create Websites</h1>
 <p>In today's world internet is the most popular way of connecting with the people. At <a
href="http://www.allinworld99.blogspot.com"
target="_blank">allinworld99.blogspot.com</a> you will learn the essential of web
development technologies along with real life practice example, so that you can create your
own website to connect with the people around the world.</p>
 <p><a href="http://www.allinworld99.blogspot.com" target="_blank" class="btn btn-
primary btn-lg">Get started today</a></p>
 </div>
 </div>
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Placing Content inside Wells

 The Bootstrap well component is useful for applying simple inset effect to
an element, which is very helpful to show come content inside a box and
make it different from rest of the contents.
 In this code, we have put the contents within a <div> element and applied
the class .well to it.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Wells</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>
 <div class="well">Look, I'm in a well!</div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Varying Well Sizes

In this code, we have controlled the padding and rounded corners of wells
using the two modifier classes which are optional i.e, .well-lg and .well-sm,
which makes the well large and small respectively.
<!DOCTYPE html>

<title>Example of Bootstrap 3 Wells</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>

<div class="well">Look, I'm in a well!</div>

<div class="well well-lg">Look, I'm in a large well!</div>

<div class="well well-sm">Look, I'm in a small well!</div>

</body>

</html>

Contextual Backgrounds

 Bootstrap provides us some CSS classes for our common usages.

 We can use the contextual background color classes like bg-primary, bg-
sucess, bg-info, bg-warning, bg-danger to set the background-color of an
element to make it more noticeable.
 The contextual background classes only apply the CSS background-color
property to the element, but to change the space between content and
border-box you have to set the CSS padding property.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Contextual Background Classes</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>
 <p class="bg-primary">Important: Please read the instructions carefully before
proceeding.</p>
 <p class="bg-success">Success: Your message has been sent successfully.</p>
 <p class="bg-info">Note: You must agree with the terms and conditions to complete the
sign up process.</p>
 <p class="bg-warning">Warning: There was a problem with your network connection.</p>
 <p class="bg-danger">Error: An error has been occurred while submitting your data.</p>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Close Icon

Bootstrap provides a generic close icon used for dismissing alerts.

<!DOCTYPE html>

<html>

<head>

<title>Example of Bootstrap 3 Close Icon</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>

<div class="alert alert-warning">

<a href="#" class="close" data-dismiss="alert">×</a>

<strong>Warning!</strong> There was a problem with your network connection.

</div>

</body>

</html>

Caret Icon

Bootstrap provides a generic caret icon to indicate the dropdown function. The

direction of the icon automatically reverse in dropdown menus.
<!DOCTYPE html>

<html>

<head>

<title>Example of Bootstrap 3 Caret Icon</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="nav nav-pills">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<a href="#" data-toggle="dropdown" class="dropdown-toggle">Services <span

class="caret"></span></a>

<li><a href="#">Design</a></li>

<li><a href="#">Development</a></li>

</ul>

</li>

</ul>

</body>

</html>

Center Alignment of Content Blocks

 In this code, we have used the Bootstrap class .center-block, which aligns
the content block horizontally center.
 To see the effect of this class, we should set the width of the content block
and should be less than the containing parent element.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Center Alignment</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">
 <style type="text/css">
 .wrapper {
 margin: 20px;
 padding: 10px;
 background: #fffacd;
 border: 1px solid #000;
 }

 .center-block {
 width: 50%;
 padding: 30px;
 background: #e3b740;
 }
 </style>
 </head>

 <body>
 <div class="wrapper">
 <div class="center-block">Center Aligned DIV Box</div>
 <p><strong>Note:</strong> Play with .center-block width property value to understand
how it works.</p>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Quick Floats

 In this code, we have used the .pull-left and .pull-right classes to quickly
float an element to the left or right.
 To avoid specificity issues, these classes include the CSS !important
declaration.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Quick Floats</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">

 <style type="text/css">
 .bs-example {
 margin: 20px;
 }

 .bs-example div {
 margin: 20px;
 padding: 20px;
 background: #f0e68c;
 }
 </style>
 </head>

 <body>
 <div class="bs-example">
 <div class="pull-left">Floated to left.</div>
 <div class="pull-right">Floated to right.</div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Clearfix

 In this code, we have used the .clearfix class to clear the float on any
element.
 This class is mostly used for fixing the collapsing parent issue, where
parent element contains floated boxes.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Clearfix</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">

 <style type="text/css">
 .wrapper {
 margin: 20px;
 padding: 10px;
 background: #fffacd;
 border: 1px solid #000;
 }

 .pull-left,
 .pull-right {
 padding: 20px;
 background: #e3b740;
 }
 </style>
 </head>

 <body>
 <div class="wrapper clearfix">
 <div class="pull-left">Float to left</div>
 <div class="pull-right">Float to right</div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Showing and Hiding Content

 Using the .show and .hidden classes, we can show or hide an element on all
devices.
 In these classes also we include the CSS !important declaration to avoid
specificity conflicts.
 We have used the class .invisible to toggle the visibility of an element, but
the element occupies the space in the layout.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Show Hide Content</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">

 <style type="text/css">
 .bs-example {
 margin: 20px;
 }

 .bs-example div {
 margin: 20px;
 padding: 20px;
 background: #f0e68c;
 }

 div.hint {
 display: none;
 }
 </style>
 </head>

 <body>
 <div class="bs-example">
 <div class="hint show">This is visible to the user.</div>
 <div class="hidden">This is not visible to the user.</div>
 <div class="invisible">This is not visible but affects the layout.</div>
 <p>This is a normal paragraph.</p>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>

Content Specific to Screen Readers

In this code, we have used the special class .sr-only to hide an element to all
devices except screen readers.
<!DOCTYPE html>

<html>

<head>

<title>Example of Bootstrap 3 Screen Reader Content</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>
<p>This paragraph is visible to all devices.</p>

<p class="sr-only">This paragraph is only visible to screen readers.</p>

</body>

</html>

Hiding Text Only

 In this code, we have used the class .text-hide to hide the text content of an
element.
 As it uses the color: transparent and font-size: 0px to hide the text, search
engines consider this as spam, so use this class cautiously.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Hiding Text</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>
 <h1 class="text-hide">The text of this heading is not visible</h1>
 <p class="text-hide">The text of this paragraph is not visible.</p>
 <p><strong>Warning:</strong> Think twice before using the <code>text-hide</code> class,
because it uses the <code>color: transparent</code> and <code>font-size: 0px</code> to
hide the text. Search engines consider such techniques as spam that may result in
penalty.</p>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>

 </html>
Creating Modals

 Modal is a dialog box or popup window which is used to provide important

information to the user, also it prompts user to take necessary actions like
warning users in situations like session time out or to do final confirmation
before doing any critical actions like saving or deleting important data.
 Using this code, we have created flexible dialog boxes with the Bootstrap
modal plugin.
 This creates a simple modal with header, message body and the footer
containing action buttons for the user.
 A tip is to place modal HTML in the top position in the document, before
closing the </body> to avoid interference from other elements, otherwise it
may affect modal's appearance.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Modals</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>
 <div id="myModal" class="modal fade">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
 <h4 class="modal-title">Confirmation</h4>
 </div>
 <div class="modal-body">
 <p>Do you want to save changes you made to document before closing?</p>
 <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>

 <script type="text/javascript">
 $(document).ready(function()
 {
 $("#myModal").modal('show');
 });
 </script>

 </body>

 </html>

Activate Modals via Data Attributes

 Using this code, we can activate a Bootstrap modal by clicking on the button
or link through data attributes without writing any JavaScript code.
 For activating Bootstrap modal through data attributes, we need two
components — the controller element like a button or link, and the modal
element itself.
 An unique id (id="myModal") is given to outermost container of every modal
in a document and can be targeted via data-target (for buttons) or href (for
hyperlinks) attribute of the controller element.
 The attribute data-toggle="modal" is needed to add on the controller
element, like a button or an anchor, along with attribute data-
target="#myModal" or href="#myModal" to target a specific modal to toggle.
 We use the .modal-dialog class which sets the width as well as horizontal
and vertical alignment of the modal box and the class .modal-content sets
the styles like text and background color, borders, rounded corners etc.

 The .modal-header element defines the header for the modal that contains a
modal title and a close button, the .modal-body element contains the actual
content like text, images, forms etc. and the .modal-footer element defines
the footer usually contains action buttons for the user.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Modals</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>
 
 <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo
Modal</a>

 
 <div id="myModal" class="modal fade">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
 <h4 class="modal-title">Confirmation</h4>
 </div>
 <div class="modal-body">
 <p>Do you want to save changes you made to document before closing?</p>
 <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>

 <script type="text/javascript">
 $(document).ready(function()
 {
 $("#myModal").modal('show');
 });
 </script>

 </body>

 </html>

Activate Modals via JavaScript

We can also activate a Bootstrap modal window via JavaScript — just call the
modal() Bootstrap method with the modal id or class selector in the JavaScript
code.
<!DOCTYPE html>

<html>

<head>

<title>Example of Bootstrap 3 Modals via javascript</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>

<a href="#" class="btn btn-lg btn-primary">Launch Demo Modal</a>

<div id="myModal" class="modal fade">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-title">Confirmation</h4>

</div>

<p>Do you want to save changes you made to document before closing?</p>

<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>

</div>
<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

$(document).ready(function()

$(".btn").click(function()

$("#myModal").modal('show');

});

</script>

</body>

</html>

Changing the Sizes of Modals

 We can use Bootstrap to further scale a modal up or down.

 We can make modals larger or smaller by adding an extra class .modal-lg or
.modal-sm on .modal-dialog.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Modal Sizes</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>
 
 <button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Large
modal</button>

 <div id="largeModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
 <div class="modal-dialog modal-lg">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
 <h4 class="modal-title">Large Modal</h4>
 </div>
 <div class="modal-body">
 <p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this
large modal.</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
 <button type="button" class="btn btn-primary">OK</button>
 </div>
 </div>
 </div>
 </div>

 
 <button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Small
modal</button>

 <div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
 <div class="modal-dialog modal-sm">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
 <h4 class="modal-title">Small Modal</h4>
 </div>
 <div class="modal-body">
 <p>Add the <code>.modal-sm</code> class on <code>.modal-dialog</code> to create
this small modal.</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
 <button type="button" class="btn btn-primary">OK</button>
 </div>
 </div>
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>

 <script type="text/javascript">
 $(document).ready(function()
 {
 $(".btn").click(function()
 {
 $("#myModal").modal('show');
 });
 });
 </script>

 </body>

 </html>

Changing Modal Content Based on Trigger Button

 We have used the modal events (show.bs.modal) to create slightly different

modal windows on a webpage based on the same modal HTML.
 The title of the modal window changes according to the trigger button's
data-title attribute value.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Modal Events</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>

 
 <button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#myModal" data-title="Feedback">Feedback</button>
 <button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#myModal" data-title="Report Error">Report Error</button>
 <button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#myModal" data-title="Contact Us">Contact Us</button>

 
 <div id="myModal" class="modal fade">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
 <h4 class="modal-title">Modal Window</h4>
 </div>
 <div class="modal-body">
 <form role="form">
 <div class="form-group">
 <label for="recipient-name" class="control-label">Email:</label>
 <input type="text" class="form-control" id="recipient-name">
 </div>
 <div class="form-group">
 <label for="message-text" class="control-label">Message:</label>
 <textarea class="form-control" id="message-text"></textarea>
 </div>
 </form>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
 <button type="button" class="btn btn-primary">Send</button>
 </div>
 </div>
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>

 <script type="text/javascript">
 $(document).ready(function()
 {
 $("#myModal").on('show.bs.modal', function(event)
 {
 var button = $(event.relatedTarget); // Button that triggered the modal
 var titleData = button.data('title'); // Extract value from data-* attributes
 $(this).find('.modal-title').text(titleData + ' Form');
 });
 });
 </script>

 </body>

 </html>

.modal(options)

 There are options which can be passed to modal() Bootstrap method to

customize the functionality of a modal via data attributes or JavaScript.
 For setting the modals options via data attributes, add the option name to
data-, like data-backdrop="static", data-keyboard="false" etc.
 Data attributes provides a way for setting the modal options, but has to do
repetitive work, so JavaScript is preferable.
 This code shows how to activate the content as modal and set the options
for it using JavaScipt.
 The jQuery code in this program prevent the modal window from closing
when user clicks on the backdrop, i.e. black area behind the modal.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Modals Methods</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>
 
 <input type="button" class="btn btn-lg btn-primary launch-modal" value="Launch Demo
Modal">

 
 <div id="myModal" class="modal fade">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
 <h4 class="modal-title">Confirmation</h4>
 </div>
 <div class="modal-body">
 <p>Do you want to save changes you made to document before closing?</p>
 <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
 <p class="text-info"><small><strong>Note:</strong> If you click on the black area outside
of this modal window it will not hide.</small></p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>
 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>

 <script type="text/javascript">
 $(document).ready(function()
 {
 $(".launch-modal").click(function()
 {
 $("#myModal").modal(
 {
 backdrop: 'static'
 });
 });
 });
 </script>


 </body>

 </html>

Keyboard event false

In this program, we have used jQuery code option keyboard: false that will
prevent the modal from closing on press of the escape key.
<!DOCTYPE html>

<title>Example of Bootstrap 3 Modals Methods</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>

<input type="button" class="btn btn-lg btn-primary launch-modal" value="Launch Demo Modal">

<div id="myModal" class="modal fade">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-title">Confirmation</h4>

</div>

<p>Do you want to save changes you made to document before closing?</p>

<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>

<p class="text-info"><small><strong>Note:</strong> Press Tab key on the keyboard to enter

inside the modal window after that press the Esc key. By default keyboard option is true that means
modal hide on the press of escape key.</small></p>

</div>

<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

$(document).ready(function()

$(".launch-modal").click(function()

$("#myModal").modal(

keyboard: false

});

</script>

</body>

</html>

.modal('toggle')

In this code, we have used mmodal option toggle by which we can manually
toggle a modal window.
<!DOCTYPE html>

<title>Example of Bootstrap 3 Modals Methods</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">

.bs-example {

margin: 20px;

/* Some custom styles to beautify this example */

.toggle-modal {

width: 200px;

position: absolute;

margin: 0 auto;

z-index: 9999;

bottom: 20px;

right: 0;

left: 0;

</style>

</head>

<body>

<input type="button" class="btn btn-lg btn-primary toggle-modal" value="Toggle Demo Modal">

<div id="myModal" class="modal fade">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-title">Confirmation</h4>

</div>

<p>Do you want to save changes you made to document before closing?</p>

<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

$(document).ready(function()

$('.toggle-modal').click(function()

$('#myModal').modal('toggle');

});
});

</script>

</body>

</html>

.modal('show')

Using this code, we can manually open a modal window by the modal option
'open'.
<!DOCTYPE html>

<html>

<head>

<title>Example of Bootstrap 3 Modals Methods</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">

.bs-example {

margin: 20px;

/* Some custom styles to beautify this example */

.toggle-modal {

width: 200px;

position: absolute;

margin: 0 auto;

z-index: 9999;
bottom: 20px;

right: 0;

left: 0;

</style>

</head>

<body>

<input type="button" class="btn btn-lg btn-primary open-modal" value="Show Demo Modal">

<div id="myModal" class="modal fade">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-title">Confirmation</h4>

</div>

<p>Do you want to save changes you made to document before closing?</p>

<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

</div>
<script src="bootstrap/js/jquery.js"></script>

$(document).ready(function()

$('.open-modal').click(function()

$('#myModal').modal('show');

});

</script>

</body>

</html>

.modal('hide')

Using this code, we can manually hide a modal window by the modal option
'hide'.
<!DOCTYPE html>

<html>

<head>

<title>Example of Bootstrap 3 Modals Methods</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">

/* Some custom styles to beautify this example */

.hide-modal {

width: 200px;

position: absolute;

margin: 0 auto;

right: 0;

left: 0;

bottom: 20px;

z-index: 9999;

</style>

</head>

<body>

<input type="button" class="btn btn-lg btn-primary hide-modal" value="Hide Demo Modal">

<div id="myModal" class="modal fade">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-title">Confirmation</h4>

</div>

<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

$(document).ready(function()

$("#myModal").modal('show');

$('.hide-modal').click(function()

$('#myModal').modal('hide');

});

</script>

</body>

</html>

.modal('handleUpdate')
 If the modal height changes in such a way that it becomes higher than the
viewport height when it is open, the option 'handleUpdate' helps to readjust
the modal's position by avoiding the jerk that is occurring due to the
appearance of the viewport scrollbar.
 The hidden elements inside the modal are shown via JavaScript or loading
content inside modal using Ajax after the activation.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Modals Methods</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>

 <div class="alert alert-info fade in">
 <a href="#" class="close" data-dismiss="alert">×</a>
 <strong>Note!</strong> Also try this example without using the .modal('handleUpdate')
method (simply comment out the line no-13), you will see the modal is jumping to the left
side if viewport scrollbar is appear due to loading of huge amount of content inside the
modal while it is open.
 </div>

 
 <input type="button" data-toggle="modal" data-target="#myModal" class="btn btn-lg btn-
primary" value="Show Adjustable Modal">

 
 <div id="myModal" class="modal fade">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
 <h4 class="modal-title">Re-adjustable Modal</h4>
 </div>
 <div class="modal-body">
 <p><button type="button" class="btn btn-link show-text">Click me to load lots of text in
this modal.</button></p>
 <div class="lots-of-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius
quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.
Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh
non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in
arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at
bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque
porttitor. Integer faucibus ligula.</p>
 <p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget
sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec
ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum.
Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin
imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse
tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam
iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros.
Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet
mauris.</p>
 <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper
eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo,
quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies.
Suspendisse accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, eget
convallis tellus. Suspendisse potenti.</p>
 <p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi
suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis.
Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor
velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue
dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam
tristique, accumsan nunc eu, hendrerit tellus.</p>
 <p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis
lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec
vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium.
Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus
placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum
lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet fermentum sapien
auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Sed eu elementum nibh, quis varius libero.</p>
 <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus
mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus,
volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget ante rutrum
adipiscing. Cras interdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut
enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate
ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer
pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.</p>
 </div>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-primary" data-dismiss="modal">Ok, I got
it</button>
 </div>
 </div>
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>

 <script type="text/javascript">
 $(document).ready(function()
 {
 $(".show-text").click(function()
 {
 $('#myModal').find(".lots-of-text").toggle();
 $('#myModal').modal('handleUpdate');
 });
 });
 </script>

 </body>

 </html>

Modal Events

 Bootstrap's modal class includes few events for modal functionality, like
show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal,
loaded.bs.modal.
 In this Bootstrap code, we have used the hidden.bs.modal, which shows an
alert message to the user when fade out transition of the modal window has
been fully completed.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Modals Methods</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>

 
 <input type="button" class="btn btn-lg btn-primary open-modal" value="Show Demo
Modal">

 
 <div id="myModal" class="modal fade">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
 <h4 class="modal-title">Confirmation</h4>
 </div>
 <div class="modal-body">
 <p>Do you want to save changes you made to document before closing?</p>
 <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>

 <script type="text/javascript">
 $(document).ready(function()
 {
 $('.open-modal').click(function()
 {
 $('#myModal').modal('show');
 });
 $("#myModal").on('hidden.bs.modal', function()
 {
 alert("Modal window has been completely closed.");
 });
 });
 </script>

 </body>

 </html>

Adding Dropdowns via Data Attributes

 We can use the Bootstrap dropdown plugin to add toggle dropdown menus
(open and close on click) to links, buttons or button groups, navbar, tabs
and pills nav etc.
 In this Bootstrap code, we can add the dropdown menu to an element via
data attributes. This code has 2 components; the dropdown trigger element
which can be a hyperlink or button, and the dropdown menu.
 The .dropdown class specifies the dropdown menu.
 The .dropdown-toggle class defines the trigger element, the hyperlink and
the attribute data-toggle="dropdown" is used on the trigger element to
toggle the dropdown menu.
 The .caret element inside the trigger anchor element creates a small down
triangle icon which indicates that the link contains a dropdown menu.
 The dropdown menu that typically contains the related links or actions is
created using the unordered list with the class .dropdown-menu.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Adding Bootstrap 3 Dropdowns via Data Attributes</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>

 <div class="dropdown">
 <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b
class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 </ul>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>

 </body>

 </html>
Remove # from url

 Adding dropdowns via data attributes has a problem that if we click the
dropdown link it will add a # character to the URL while showing the
dropdowns.
 Using this code, we keep the URLs intact using the data-target attribute
instead of href="#".
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Adding Bootstrap 3 Dropdowns via Data Attributes</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>

 <div class="dropdown">
 <a data-target="#" href="page.html" data-toggle="dropdown" class="dropdown-
toggle">Dropdown <b class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 </ul>
 </div>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>


 </body>

 </html>

Dropdowns within a Navbar

 We can add dropdowns to the Navbar by modifying the Adding Dropdowns

via Data Attributes code.
 We have called the dropdown trigger elements and menu in the <div>
element with navbar-static class.
 We can draw a divider line to separate the links inside a dropdown menu by
adding the class .divider to a blank list element.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Dropdowns within a Navbar</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>

 <nav id="myNavbar" class="navbar navbar-default" role="navigation">
 
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-
example-navbar-collapse-1">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Brand</a>
 </div>
 
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <ul class="nav navbar-nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Profile</a></li>
 <li class="dropdown">
 <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b
class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="#">Inbox</a></li>
 <li><a href="#">Drafts</a></li>
 <li><a href="#">Sent Items</a></li>
 <li class="divider"></li>
 <li><a href="#">Trash</a></li>
 </ul>
 </li>
 </ul>
 <ul class="nav navbar-nav navbar-right">
 <li class="dropdown">
 <a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b
class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li class="divider"></li>
 <li><a href="#">Settings</a></li>
 </ul>
 </li>
 </ul>
 </div>
 
 </div>
 </nav>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>


 </body>

 </html>

Dropdowns within Navs

 We can add dropdowns to the pill nav also like the Navbars.
 We have added the dropdown trigger elements and menu in the <ul>
element with nav-pills class.
 Without changes in the code, we can simply convert it to a tab dropdown by
replacing the class .nav-pills with the .nav-tabs.
 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="utf-8">
 <title>Example of Bootstrap 3 Dropdowns within Navs</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="nav nav-pills">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Profile</a></li>
 <li class="dropdown">
 <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b
class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="#">Inbox</a></li>
 <li><a href="#">Drafts</a></li>
 <li><a href="#">Sent Items</a></li>
 <li class="divider"></li>
 <li><a href="#">Trash</a></li>
 </ul>
 </li>
 <li class="dropdown pull-right">
 <a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b
class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li class="divider"></li>
 <li><a href="#">Settings</a></li>
 </ul>
 </li>
 </ul>
 <hr>
 <ul class="nav nav-tabs">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Profile</a></li>
 <li class="dropdown">
 <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b
class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="#">Inbox</a></li>
 <li><a href="#">Drafts</a></li>
 <li><a href="#">Sent Items</a></li>
 <li class="divider"></li>
 <li><a href="#">Trash</a></li>
 </ul>
 </li>
 <li class="dropdown pull-right">
 <a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b
class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li class="divider"></li>
 <li><a href="#">Settings</a></li>
 </ul>
 </li>
 </ul>

 <script src="bootstrap/js/jquery.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>


 </body>

 </html>

Boostraap 150

WWW W3schools Com
No ratings yet
WWW W3schools Com
3 pages
Ultra HTML Reference
From Everand
Ultra HTML Reference
Mike Abelar
2/5 (1)
Bootstrap 4 Cheat Sheet BC PDF
100% (5)
Bootstrap 4 Cheat Sheet BC PDF
12 pages
Bootstrap
No ratings yet
Bootstrap
18 pages
Bootstrap 3 Tutorial: Printed by
No ratings yet
Bootstrap 3 Tutorial: Printed by
33 pages
Bootstrap Tutorial
No ratings yet
Bootstrap Tutorial
46 pages
Clean Code
No ratings yet
Clean Code
22 pages
Learn CSS - The Box Model Cheatsheet - Codecademy
No ratings yet
Learn CSS - The Box Model Cheatsheet - Codecademy
2 pages
Introduction To Selenium RC: Brief History of The Selenium Project
No ratings yet
Introduction To Selenium RC: Brief History of The Selenium Project
6 pages
HTML, Css, Bootstrap and Git
No ratings yet
HTML, Css, Bootstrap and Git
8 pages
Want To INcrease Organic Web Traffic-1
No ratings yet
Want To INcrease Organic Web Traffic-1
8 pages
Bootstrap
No ratings yet
Bootstrap
5 pages
Presentation BDD
No ratings yet
Presentation BDD
43 pages
Getting Started With Beautiful Soup Sample Chapter
No ratings yet
Getting Started With Beautiful Soup Sample Chapter
15 pages
Bootstrap Forms
No ratings yet
Bootstrap Forms
8 pages
Course 1: Building Layouts (Part A)
No ratings yet
Course 1: Building Layouts (Part A)
33 pages
Advanced Web Designing
No ratings yet
Advanced Web Designing
8 pages
Data Structure in Javascript
No ratings yet
Data Structure in Javascript
138 pages
Javascript Note
No ratings yet
Javascript Note
81 pages
Vue JS
No ratings yet
Vue JS
24 pages
Lec 8 - DOM
No ratings yet
Lec 8 - DOM
144 pages
Javascript Exercises
No ratings yet
Javascript Exercises
2 pages
Create A Simple HTML Website With Postgres Databas
No ratings yet
Create A Simple HTML Website With Postgres Databas
8 pages
HTML5 Interview Questions
No ratings yet
HTML5 Interview Questions
19 pages
Understanding Ecmascript 6
No ratings yet
Understanding Ecmascript 6
18 pages
CSS Box Model
No ratings yet
CSS Box Model
2 pages
HTML Css Notes
No ratings yet
HTML Css Notes
7 pages
Beginner Guide
100% (1)
Beginner Guide
24 pages
How To Properly Name Css Classes
No ratings yet
How To Properly Name Css Classes
9 pages
Jquery Visual Cheat Sheet 1.4.2
No ratings yet
Jquery Visual Cheat Sheet 1.4.2
28 pages
Bootstrap Cheatsheet
No ratings yet
Bootstrap Cheatsheet
1 page
Bootstrap
No ratings yet
Bootstrap
1 page
Backend Challenge
No ratings yet
Backend Challenge
7 pages
Angular Material Tutorial
0% (1)
Angular Material Tutorial
17 pages
9 Javascript Exercises
No ratings yet
9 Javascript Exercises
4 pages
Programming Language Workshop For Beginners Infographics by Slidesgo
No ratings yet
Programming Language Workshop For Beginners Infographics by Slidesgo
35 pages
HTML Cheat Sheet
No ratings yet
HTML Cheat Sheet
7 pages
CSS3
No ratings yet
CSS3
54 pages
Bootstrap
No ratings yet
Bootstrap
11 pages
Web Design & UI - UX (PDFDrive)
No ratings yet
Web Design & UI - UX (PDFDrive)
115 pages
HTML5 Elements: Web Technology Assignment - 1947234
100% (2)
HTML5 Elements: Web Technology Assignment - 1947234
58 pages
This SEO Checklist 48.7% More Organic Traffic (Case Study) PDF
100% (1)
This SEO Checklist 48.7% More Organic Traffic (Case Study) PDF
50 pages
Bootstrap and J Query
No ratings yet
Bootstrap and J Query
130 pages
Js Sandeep
100% (1)
Js Sandeep
248 pages
Master Frontend Ebook
No ratings yet
Master Frontend Ebook
733 pages
Basics To Master HTML
No ratings yet
Basics To Master HTML
51 pages
100 JavaScript Questions
No ratings yet
100 JavaScript Questions
52 pages
HTML
100% (1)
HTML
121 pages
Bootstrap Reference Guide Bootstrap 4 and 3 Cheat Sheets Collection Bootstrap 4 Quick Start
No ratings yet
Bootstrap Reference Guide Bootstrap 4 and 3 Cheat Sheets Collection Bootstrap 4 Quick Start
69 pages
Introduction To BOOTSTRAP
0% (1)
Introduction To BOOTSTRAP
48 pages
CSS3 Interview Questions and Answers
No ratings yet
CSS3 Interview Questions and Answers
2 pages
Style Sheet (CSS)
No ratings yet
Style Sheet (CSS)
29 pages
HTML5 Introduction by W3Schools
No ratings yet
HTML5 Introduction by W3Schools
3 pages
Open2Test Test Automation Framework For Selenium Web Driver - Quick Start Guide
No ratings yet
Open2Test Test Automation Framework For Selenium Web Driver - Quick Start Guide
16 pages
The CSS Box Model
100% (1)
The CSS Box Model
4 pages
Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy
No ratings yet
Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy
6 pages
Java servlet Second Edition
From Everand
Java servlet Second Edition
Gerardus Blokdyk
No ratings yet
PHP and MongoDB Web Development Beginner’s Guide
From Everand
PHP and MongoDB Web Development Beginner’s Guide
Rubayeet Islam
No ratings yet
JSF 2.0 Cookbook: LITE
From Everand
JSF 2.0 Cookbook: LITE
Anghel Leonard
No ratings yet
Pagination Bootstrap v50
No ratings yet
Pagination Bootstrap v50
9 pages
CIR v. Fortune
No ratings yet
CIR v. Fortune
2 pages
Statistical Approaches for Epidemiology From Concept to Application Reference Book Download
No ratings yet
Statistical Approaches for Epidemiology From Concept to Application Reference Book Download
17 pages
Adventure Quencher H2.0 Travel Tumbler 40 Oz Stanley - Stanley 1913
No ratings yet
Adventure Quencher H2.0 Travel Tumbler 40 Oz Stanley - Stanley 1913
1 page
Unit 4
No ratings yet
Unit 4
6 pages
Sample: Monash University
No ratings yet
Sample: Monash University
8 pages
Accounting For Non-Profit Organisation - With Solutions
No ratings yet
Accounting For Non-Profit Organisation - With Solutions
58 pages
Difference Between Association
No ratings yet
Difference Between Association
3 pages
Appendix A
No ratings yet
Appendix A
4 pages
Should The Government Provide Health Care Essay
No ratings yet
Should The Government Provide Health Care Essay
6 pages
Class 6 Arts Text Book
No ratings yet
Class 6 Arts Text Book
192 pages
205727
No ratings yet
205727
37 pages
Critical Analysis of Oedipus The King
50% (4)
Critical Analysis of Oedipus The King
1 page
Tutorial Letter 201/1/2018: Media Studies: Policy, Management and Media Representation
No ratings yet
Tutorial Letter 201/1/2018: Media Studies: Policy, Management and Media Representation
43 pages
g12 Fabm2 Week 6
No ratings yet
g12 Fabm2 Week 6
10 pages
Report Writing For Code Inspectors
No ratings yet
Report Writing For Code Inspectors
6 pages
Eg2401a THLee Lecture03 Sem2u
No ratings yet
Eg2401a THLee Lecture03 Sem2u
68 pages
ME 464 Exam Paper Final-Vetted
No ratings yet
ME 464 Exam Paper Final-Vetted
5 pages
Course Curriculum For Italian Language
No ratings yet
Course Curriculum For Italian Language
2 pages
The Importance of A College Education
No ratings yet
The Importance of A College Education
5 pages
Impacts
No ratings yet
Impacts
30 pages
The CDPNE & APNE/VCGNE Programs
No ratings yet
The CDPNE & APNE/VCGNE Programs
24 pages
AV Botnet Detection PDF
No ratings yet
AV Botnet Detection PDF
23 pages
Spml 398 Undertaking Latter
No ratings yet
Spml 398 Undertaking Latter
1 page
Perioperative Nursing: Venus Sofia J. Balatero, RN, USRN
89% (9)
Perioperative Nursing: Venus Sofia J. Balatero, RN, USRN
33 pages
Lebs 108
No ratings yet
Lebs 108
14 pages
Interview Sample Selection Criteria
No ratings yet
Interview Sample Selection Criteria
4 pages
Pensioner's Scheme BRD Phase 1
No ratings yet
Pensioner's Scheme BRD Phase 1
12 pages
Ophthalmic Epidemiology Current Concepts To Digital Strategies Chingyu Cheng pdf download
100% (2)
Ophthalmic Epidemiology Current Concepts To Digital Strategies Chingyu Cheng pdf download
78 pages
Verbs and Prepositions
No ratings yet
Verbs and Prepositions
1 page
Mcq طفيليات
No ratings yet
Mcq طفيليات
9 pages