/* Important things:
1). Include bootstrap.css (without bootstrap it will not work)
2). Below all copy to external css page
3). Add active to item div */
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/x-icon" href="images1/fevicon.png">
<title>Timeline</title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<style type="text/css">
/* Important things:
1). Include bootstrap.css (without bootstrap it will not work)
2). Below all copy to external css page */
.card-bg{ border: solid 1px #555; }
.h-timeline p{ font-size: 11px }
.h-timeline .item { width: 20%; text-align: center;}
.h-timeline > .item{ position: relative; }
.h-timeline > .item > .dot:before{ content: ""; width: 15px; height: 15px; background-color: #962b2b; border-radius: 30px; border-color: red; margin-top: 4px; position: absolute; border: 0px;
left: 42%; top: -22px; z-index: 9999; cursor: pointer;}
.h-timeline > .item > .dot:after { content: ""; position: absolute; width:100%;background-color:red;border: solid 2px red;left:-56%; top: -13px;}
.h-timeline > .item.item1 > .dot:after{ display: none; }
.h-timeline > .item.active > .dot:after { background-color: green; border: solid 2px green;}
.h-timeline > .item.active > .dot:before { background-color: green;}
@media(max-width: 767px){
.h-timeline > .item > .dot:after {left: -37px;}
}
</style>
<!-- horizantal timeline with acctive progress -->
<div class="col-md-8 p-0 mx-auto mt-5 ">
<div class="card card-bg ">
<div class="col-md-12 pt-0 p-2">
<h5>Section</h5>
<div class="h-timeline d-flex pt-4">
<div class="item item1 active"><div class="dot"></div><p>Step 1</p></div>
<div class="item item2 active"><div class="dot"></div><p>Step 2</p></div>
<div class="item item3"><div class="dot"></div><p>Step 3</p></div>
<div class="item item4"><div class="dot"></div><p>Step 4</p></div>
<div class="item item5"><div class="dot"></div><p>Step 5</p></div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
No comments:
Post a Comment