Bread crumbs in bootstrap
Current page visible
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bread Crumbs</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Bread Crumbs</h3>
<ul>
<li><a href="#">menu-1</a></li>
<li><a href="#">menu-2</a></li>
<li><a href="#">menu3</a></li>
<li class="active">menu-4</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Pager in bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pager</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Pager</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam molestias quia quo fugiat exercitationem voluptate id vero deserunt, sunt ipsum voluptates tempora tempore culpa. Commodi quas, unde voluptatem nesciunt, architecto officiis impedit sunt maxime atque tempora quisquam nihil. Inventore est cumque facere ducimus quisquam animi iste nesciunt doloremque consequuntur, quae nulla totam dignissimos iure! Tempore totam quibusdam soluta, consequuntur voluptatibus sequi quisquam iusto laudantium qui placeat natus dolores labore, inventore deserunt hic harum atque eligendi nulla optio aspernatur praesentium quasi ut? Magni excepturi esse nostrum incidunt recusandae animi quo! Ea eum dolores distinctio expedita esse excepturi tempore cumque laudantium hic tenetur assumenda, placeat, amet cupiditate tempora ab vel, veniam adipisci sed iste accusantium beatae repellat quo soluta. Inventore, obcaecati repudiandae. Et eius numquam laborum quam ullam, excepturi dolore similique. Autem esse eos aliquid ut at earum, minus illo suscipit tenetur atque quibusdam vel quis assumenda recusandae dolor consequuntur saepe! Iure dicta, esse dolorem doloribus sapiente at illo id illum tempore consectetur eveniet nisi? Atque ut reprehenderit vel quod saepe ullam eius, a itaque consectetur cumque eaque, soluta laudantium, totam ad? Alias dolores quidem nobis. Sequi at natus quis amet quae. Quaerat rem veritatis porro cumque illo dignissimos velit fuga nostrum!</p>
<ul class="pager">
<li><a href="#">previous</a></li>
<li><a href="#">next</a></li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Pager alignment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pager</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Pager</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam molestias quia quo fugiat exercitationem voluptate id vero deserunt, sunt ipsum voluptates tempora tempore culpa. Commodi quas, unde voluptatem nesciunt, architecto officiis impedit sunt maxime atque tempora quisquam nihil. Inventore est cumque facere ducimus quisquam animi iste nesciunt doloremque consequuntur, quae nulla totam dignissimos iure! Tempore totam quibusdam soluta, consequuntur voluptatibus sequi quisquam iusto laudantium qui placeat natus dolores labore, inventore deserunt hic harum atque eligendi nulla optio aspernatur praesentium quasi ut? Magni excepturi esse nostrum incidunt recusandae animi quo! Ea eum dolores distinctio expedita esse excepturi tempore cumque laudantium hic tenetur assumenda, placeat, amet cupiditate tempora ab vel, veniam adipisci sed iste accusantium beatae repellat quo soluta. Inventore, obcaecati repudiandae. Et eius numquam laborum quam ullam, excepturi dolore similique. Autem esse eos aliquid ut at earum, minus illo suscipit tenetur atque quibusdam vel quis assumenda recusandae dolor consequuntur saepe! Iure dicta, esse dolorem doloribus sapiente at illo id illum tempore consectetur eveniet nisi? Atque ut reprehenderit vel quod saepe ullam eius, a itaque consectetur cumque eaque, soluta laudantium, totam ad? Alias dolores quidem nobis. Sequi at natus quis amet quae. Quaerat rem veritatis porro cumque illo dignissimos velit fuga nostrum!</p>
<ul class="pager">
<li class="previous"><a href="#">previous</a></li>
<li class="next"><a href="#">next</a></li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
List group bootstrap
Side navigation bar designing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List group</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>List group</h3>
<ul class="list-group">
<li class="list-group-item">Item-1</li>
<li class="list-group-item">Item-2</li>
<li class="list-group-item">Item-3</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
List group badges
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List group badges</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>List group badges</h3>
<ul class="list-group">
<li class="list-group-item">Inbox<span class="badge">10</span></li>
<li class="list-group-item">Sent<span class="badge">5</span></li>
<li class="list-group-item">Outbox<span class="badge">0</span></li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Anchor List group -> Active&Disable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List group badges</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>List group badges</h3>
<hr>
<div class="list-group">
<a href="#" class="list-group-item">Item-1</a>
<a href="#" class="list-group-item">Item-2</a>
<a href="#" class="list-group-item active">Item-3</a>
<a href="#" class="list-group-item">Item-4</a>
<a href="#" class="list-group-item disabled">Item-5</a>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
No comments:
Post a Comment