Bootstrap Tutorial Examples
Bootstrap change the size of input groups examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 50px 50px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Twitterhandle">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Twitterhandle">
</div>
<br>
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class = "form-control" placeholder="Twitterhandle">
</div>
</form>
</body>
</html>
Output
Bootstrap set large modal examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Examination</h2>
<button type="button" class="btn btn-lg" data-toggle="modal" data-target="#new">Result</button>
<div class="modal fade" id="new" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Warning</h4>
</div>
<div class="modal-body">
<p>If JavaScript isn't enabled in your web browser.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap vertically stack pills examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Database</h2>
<p>The following are the database technologies:</p>
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active"><a href="#">DB2</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">CouchDB</a></li>
</ul>
</div>
</body>
</html>
Output
Bootstrap center tabs examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Web Development</h2>
<p>The following are the web dev technologies:</p>
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="active"><a href="#">HTML5</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">Bootstrap</a></li>
</ul>
</div>
</body>
</html>
Output
Bootstrap alert box that indicates a dangerous action examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="alert alert-danger">
<p>Dangerous!</p>
<p>Add dangerous action here...</p>
</div>
</div>
</body>
</html>
Output
Bootstrap set large modal examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Examination</h2>
<button type="button" class="btn btn-lg" data-toggle="modal" data-target="#new">Result</button>
<div class="modal fade" id="new" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Warning</h4>
</div>
<div class="modal-body">
<p>If JavaScript isn't enabled in your web browser.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap progress bar examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Progress Bars</h2>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
<span class="sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
<span class="sr-only">30% Complete (info)</span>
</div>
</div>
</body>
</html>
Output
Add a gray background color to the active link examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Articles</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Demo</h3>
<p>This is Demo text.</p>
</div>
</body>
</html>
Output
Bootstrap add a background color to the active list examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Features of Java</h2>
<div class="list-group">
<a href="#" class="list-group-item active">Simple</a>
<a href="#" class="list-group-item">Object-Oriented</a>
<a href="#" class="list-group-item">Portable</a>
<a href="#" class="list-group-item">Platform independent</a>
<a href="#" class="list-group-item">Secured</a>
</div>
</div>
</body>
</html>
Output
Bootstrap add a shadow to an element examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Learning</h1>
<div class="shadow-lg p-4 mb-4 bg-light">Try programming examples</div>
<div class="shadow-sm p-4 mb-4 bg-light">Try programming examples</div>
<div class="shadow-none p-4 mb-4 bg-light">Try Demo programming examples</div>
</div>
</body>
</html>
Output
Bootstrap disable a dropdown item examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tutorials</h2>
<p>The following are the Tutorials available in Website:</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li class="disabled"><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</div>
</div>
</body>
</html>
Output
Bootstrap header of the modal examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>All Examination</h2>
<button type="button" class="btn btn-lg" data-toggle="modal" data-target="#new">Result</button>
<div class="modal fade" id="new" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class= "modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Warning</h4>
</div>
<div class="modal-body">
<p>Welcome to Tutuorialsroot.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap footer of the modal examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>All Examination</h2>
<button type="button" class="btn btn-lg" data-toggle="modal" data-target="#new">Result</button>
<div class="modal fade" id="new" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Warning</h4>
</div>
<div class="modal-body">
<p>Welcome to the Tutorialsroot</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap width and margin of the modal examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Web Browser</h2>
<button type="button" class="btn btn-lg" data-toggle="modal" data-target="#new">More</button>
<div class="modal fade" id="new" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Warning</h4>
</div>
<div class="modal-body">
<p>Welcome to Tutorialsroot</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap modal style examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Website Information</h2>
<button type="button" class="btn btn-lg" data-toggle="modal" data-target="#new">Info</button>
<div class="modal fade" id="new" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Warning</h4>
</div>
<div class="modal-body">
<p>Welcome to Tutorialsroot</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap tooltip plugins examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">
It is a <a href="#" class="tooltip-show" data-toggle="tooltip"
title="show">Tooltip on method show</a>.
It is a <a href="#" class="tooltip-hide" data-toggle="tooltip"
data-placement="left" title="hide">Tooltip on method hide</a>.
It is a <a href="#" class ="tooltip-destroy" data-toggle="tooltip"
data-placement="top" title="destroy">Tooltip on method destroy</a>.
It is a <a href="#" class="tooltip-toggle" data-toggle="tooltip"
data-placement="bottom" title="toggle">Tooltip on method toggle</a>.
<br><br><br><br><br><br>
<p class="tooltip-options" >
It is a <a href="#" data-toggle="tooltip" title="<h2>'am Header2
</h2>">Tooltip on method options</a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });});
</script>
</div>
</body>
</html>
Output
Bootstrap tab plugins examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
Home
</a>
</li>
<li><a href="#Article" data-toggle="tab">article</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
Tutorials
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li>
<li><a href="#CSS" tabindex="-1" data-toggle="tab">CSS</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>This is home page.</p>
</div>
<div class="tab-pane fade" id = "article">
<p>The following are the article:</p>
</div>
<div class="tab-pane fade" id="JavaScript">
<p>JavaScript is the programming language of HTML and the Web.</p>
</div>
<div class="tab-pane fade" id="CSS">
<p>CSS is a language that describes the style of an HTML document.</p>
</div>
</div>
</body>
</html>
Output
Bootstrap style for the body of the modal examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Website Information Tutorialsroot</h2>
<button type="button" class="btn btn-lg" data-toggle="modal" data-target="#new">Info</button>
<div class="modal fade" id="new" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Warning</h4>
</div>
<div class="modal-body">
<p>If JavaScript isn't enabled in your web browser.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap collapsible in examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tutorials Example</h2>
<p>Click below to toggle the button content.</p>
<button type="button" class="btn btn-info"
data-toggle="collapse" data-target="#test">More Example</button>
<div id="test" class="collapse in">
We have Example on HTML, PHP, HTML5, CSS, ASP.net, etc.
</div>
</div>
</body>
</html>
Output
Bootstrap media object examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Tutorial</h2>
<div class="media">
<div class="media-left">
<img src="http://tutorialsroot.com/bootstrap/src/carousel.jpg" class="media-object"
style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Introduction</h4>
<p>Bootstrap is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript
framework for developing responsive, mobile-first websites.</p>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap align media objects examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Tutorial</h2>
<div class="media">
<div class="media-left">
<img src="http://tutorialsroot.com/bootstrap/src/carousel.jpg" class="media-object"
style="width:60px; height:100px">
</div>
<div class="media-body">
<h4 class="media-heading">Introduction</h4>
<p>Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and
JavaScript framework for developing responsive, mobile-first websites</p>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap nested media lists examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container">
<h2>Tutorials</h2>
<p>The following are the tutorials:</p>
<hr>
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="bootstrap.jpg">
<img src="css3.jpg" class="media-object" style="width:100px">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Tutorials</h4>
<p>We have text tutorials in HTML, HTML5, CSS, CSS3, javascript, PHP, Sql, etc.</p>
<div class="media">
<div class="media-left">
<a href="bootstrap.jpg">
<img src="css3.jpg" class="media-object" style = "width:100px">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Examples Tutorials</h4>We have video tutorials
for HTML, HTML5, CSS, CSS3, javascript, PHP, Sql, etc.
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Output
Bootstrap remove default list-style examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Technologies</h2>
<ul class="list-inline">
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery Mobile</a></li>
</ul>
</div>
<div class="container">
<h2>Technologies (Unstyled)</h2>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery Mobile</a></li>
</ul>
</div>
</body>
</html>
Output
Bootstrap create a small button examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>Click below if you want to know the warning message:</p>
<button type="button" class="btn btn-warning">Warning</button>
<p>Click below if you want to know the result:</p>
<button type="button" class="btn btn-primary btn-sm">Result</button>
</body>
</html>
Output
Bootstrap set all list items on single line examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Technologies</h2>
<ul class="list-inline">
<li><a href="#">Home</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery Mobile</a></li>
</ul>
</div>
</body>
</html>
Output
Bootstrap Set important information for a list item in a list group
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Java8</h1>
<ul class="list-group">
<li class="list-group-item">
<p class="list-group-item-text">Interfaces</p>
</li>
<li class="list-group-item">
<p class="list-group-item-text list-group-item-info">Multi-threading</p>
</li>
<li class="list-group-item">
<p class="list-group-item-text">Packages</p>
</li>
</ul>
</div>
</body>
</html>
Output
Bootstrap collapse plugins examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Click me to expand. Click me again to collapse.Section
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap large input field examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Candidate Profile</h2>
<form>
<div class="form-group">
<label for="sel2">What is your job profile?</label>
<select class="form-control input-lg" id="sel2">
<option>Programmer</option>
<option>Web Developer</option>
<option>COMPUTER PROGRAMMING</option>
<option>DBA</option>
</select>
</div>
<div class="form-group">
<label for="sel3">Educational Qualifcation</label>
<select class="form-control input-sm" id="sel3">
<option>Undergraduate</option>
<option>Graduate</option>
<option>Post-Graduate</option>
</select>
</div>
</form>
</div>
</body>
</html>
Output
Bootstrap button plugins examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h4>Button Example</h4>
<div id="myButtons2" class="bs-example">
<button type="button" class="btn btn-primary" data-loading-text="Loading...">
Primary
</button>
</div>
<script type="text/javascript">
$(function () {
$("#myButtons1 .btn").click(function(){
$(this).button('toggle');
});
});
</script>
</body>
</html>
Output
Bootstrap extra small button group examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>The following are the top car brands:</p>
<div class="btn-group-justified btn-group-lg">
<button type="button" class="btn btn-default">Land Rover</button>
<button type="button" class="btn btn-default">Porsche</button>
<button type="button" class="btn btn-default">Toyota</button>
<button type="button" class="btn btn-default">Rolls-Royce</button>
<button type="button" class="btn btn-default">Mercedes-Benz</button>
</div>
<p>The following are FMCG:</p>
<div class="btn-group-justified btn-group-sm">
<button type="button" class="btn btn-default">ITC Limited</button>
<button type="button" class="btn btn-default">Colgate-Palmolive</button>
<button type="button" class="btn btn-default">Nestle</button>
<button type="button" class="btn btn-default">Britannia Industries Limited</button>
</div>
</body>
</html>
Output
Bootstrap progress-bar class examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
<span class="sr-only">50% Complete</span>
</div>
</div>
</body>
</html>
Output
Bootstrap set danger action for a list item examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Demo</h1>
<ul class="list-group">
<li class="list-group-item">
<p class="list-group-item-text list-group-item-danger">A</p>
</li>
<li class="list-group-item">
<p class="list-group-item-text">B</p>
</li>
<li class="list-group-item">
<p class="list-group-item-text">C</p>
</li>
<li class="list-group-item">
<p class="list-group-item-text">D</p>
</li>
</ul>
</div>
</body>
</html>
Output
Bootstrap item text inside the list group examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Cars Brand</h1>
<ul class="list-group">
<li class="list-group-item">
<h3 class="list-group-item-heading">Hyundai</h3>
<p class="list-group-item-text">Hyundai Creta</p>
<p class="list-group-item-text">Hyundai Elite i20</p>
</li>
<li class = "list-group-item">
<h3 class="list-group-item-heading">Volkswagen</h3>
<p class="list-group-item-text">Vento</p>
<p class="list-group-item-text">Polo</p>
</li>
</ul>
</div>
</body>
</html>
Output
Bootstrap list-group-item-heading examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Countries</h1>
<ul class="list-group">
<li class="list-group-item">
<h3 class="list-group-item-heading">Asia</h3>
<p class="list-group-item-text">India</p>
<p class="list-group-item-text">Bangladesh</p>
<p class="list-group-item-text">Sri lanka</p>
<p class="list-group-item-text">Nepal</p>
</li>
<li class="list-group-item">
<h3 class="list-group-item-heading">Europe</h3>
<p class="list-group-item-text">Germany</p>
<p class="list-group-item-text">Italy</p>
<p class="list-group-item-text">Spain</p>
<p class="list-group-item-text">Paris</p>
</li>
</ul>
</div>
</body>
</html>
Output
Bootstrap striped progress bar examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h2>Striped Progress Bars</h2>
<h3>Warning Progress Bar</h3>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%;">
<span class="sr-only">35%Complete (warning)</span>
</div>
</div>
<h3>Danger Progress Bar</h3>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
<span class="sr-only">70% Complete (danger)</span>
</div>
</div>
</body>
</html>
Output
Bootstrap make an element invisible examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cricket Boards</h2>
<p>The <abbr title = "International Cricket Council">ICC</abbr> governs cricket boards.</p>
<p class="invisible">BCCI is also governed by ICC</p>
</div>
</body>
</html>
Output
Bootstrap padded grey box with rounded corners examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 50px 50px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Twitterhandle">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Twitterhandle">
</div>
<br>
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class = "form-control" placeholder="Twitterhandle">
</div>
</form>
</body>
</html>
Output
Bootstrap small input group examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Search</h1>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Search here...">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit">
</button>
</div>
</div>
</form>
</div>
</body>
</html>
Output
Bootstrap add red label examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css" rel = "stylesheet">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p>If you find any issues, click below</p>
<span class="label label-danger">Danger</span>
</div>
</body>
</html>
Output
Bootstrap glyphicon user icon examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<span class="glyphicon glyphicon-user"></span>
</body>
</html>
Output
Bootstrap bordered list group examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Top Countries</h3>
<ul class="list-group">
<li class="list-group-item">US</li>
<li class="list-group-item">India</li>
<li class="list-group-item">Australia</li>
<li class="list-group-item">Sweden</li>
<li class="list-group-item">Japan</li>
</ul>
</div>
</body>
</html>
Output
Bootstrap yellow label examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p>Warning Label</p>
<span class="label label-warning">Warning</span>
</div>
</body>
</html>
Output
Bootstrap increase the font Size of a paragraph examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Football</h2>
<h3>Circket</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="lead">Lorem Ipsum is simply dummy text of the printing
and typesetting industry</p>
</div>
</body>
</html>
Output
Bootstrap label-success class examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p>Success label</p>
<span class="label label-success">Success</span>
</div>
</body>
</html>
Output
Bootstrap dropdown plugins examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsRoot</a>
</div>
<div id="myexample">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Article</a></li>
<li><a href="#">QA</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Tutorials <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="action-1" href="#">C</a></li>
<li><a href="#">C</a></li>
<li><a href="#">Sql</a></li>
<li class="divider"></li>
<li><a href="#">PHP</a></li>
<li class="divider"></li>
<li><a href="#">Angular js</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script>
$(function(){
$(".dropdown-toggle").dropdown('toggle');
});
</script>
</body>
</html>
Output
Bootstrap grid stacked to horizontal grid examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Grid</h1>
<div class="row">
<div class="col-sm-6" style="background-color:blue; color: red">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
<div class = "col-sm-6" style="background-color:red; color: blue">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap grid stacked examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Grid</h1>
<div class="row">
<div class="col-sm-6" style="background-color:blue; color: red">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
<div class="col-sm-6" style="background-color:red; color: blue">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
</div>
</div>
</body>
</html>
Output
Bootstrap text inside an <abbr> element examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cricket</h2>
<p>The <abbr title="International Cricket Council">ICC</abbr> governs cricket boards.</p>
<p>The <abbr title="International Cricket Council" class="initialism">ICC</abbr> was founded as the Imperial Cricket Conference in 1909</p>
<p>Above the ICC abbreviation text is displayed with a smaller font.</p>
</div>
</body>
</html>
Output
Bootstrap table row examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Rank of Cricketers</h2>
<p>Top ICC Player Rankings:</p>
<table class="table">
<thead>
<tr>
<th>Cricketer</th>
<th>Rank</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>S.P.D. Smith</td>
<td>1</td>
</tr>
<tr>
<td>V. Kohli</td>
<td>2</td>
</tr>
<tr>
<td>J.E. Root</td>
<td>3</td>
</tr>
<tr>
<td>K.S. Williamson</td>
<td>4</td>
</tr>
<tr>
<td>D.A. Warner</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output
Bootstrap well-lg class examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="well well-lg">Lorem Ipsum is simply dummy text
of the printing and typesetting industry</div>
<div class="well well-sm">Lorem Ipsum is simply dummy text
of the printing and typesetting industry</div>
</body>
</html>
Output
Bootstrap fade in tab examples
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css">
<script src="scripts/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tutorials Website</h2>
<p>The following is our Tutorialsroot</p>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#two">About</a></li>
<li><a data-toggle="tab" href="#three">Contact</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane in active">
<h2>Home</h2>
<p>This is demo text!</p>
</div>
<div id="two" class="tab-pane fade">
<h2>About</h2>
<p>This is demo text!</p>
</div>
<div id="three" class="tab-pane fade">
<h2>Contact</h2>
<p>This is demo text!</p>
</div>
</div>
</div>
</body>
</html>
Output