bootstrap实现带数字序号左右垂直时间轴时间线效果代码-html代码-BFW代码库

bootstrap实现带数字序号左右垂直时间轴时间线效果代码

代码语言：html

代码描述：bootstrap实现带数字序号左右垂直时间轴时间线效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
        html,body {
	font:100% "Lato",sans-serif;
	font-weight:300;
	height:100%;
	background-color:#4D4545;
}
.blue-bg {
	background-color:#4D4545;
	color:#ED8D8D;
	height:100%;
}
.circle {
	font-weight:bold;
	padding:15px 20px;
	border-radius:50%;
	background-color:#ED8D8D;
	color:#4D4545;
	max-height:50px;
	z-index:2;
}
.how-it-works.row {
	display:flex;
}
.how-it-works.row .col-2 {
	display:inline-flex;
	align-self:stretch;
	align-items:center;
	justify-content:center;
}
.how-it-works.row .col-2::after {
	content:"";
	position:absolute;
	border-left:3px solid #ED8D8D;
	z-index:1;
}
.how-it-works.row .col-2.bottom::after {
	height:50%;
	left:50%;
	top:50%;
}
.how-it-works.row .col-2.full::after {
	height:100%;
	left:calc(50% - 3px);
}
.how-it-works.row .col-2.top::after {
	height:50%;
	left:50%;
	top:0;
}
.timeline div {
	padding:0;
	height:40px;
}
.timeline hr {
	border-top:3px solid #ED8D8D;
	margin:0;
	top:17px;
	position:relative;
}
.timeline .col-2 {
	display:flex;
	overflow:hidden;
}
.timeline .corner {
	border:3px solid #ED8D8D;
	width:100%;
	position:relative;
	border-radius:15px;
}
.timeline .top-right {
	left:50%;
	top:-50%;
}
.timeline .left-bottom {
	left:-50%;
	top:calc(50% - 3px);
}
.timeline .top-left {
	left:-50%;
	top:-50%;
}
.timeline .right-bottom {
	left:50%;
	top:calc(50% - 3px);
}
    </style>
</head>

<body>
    <div class="container-fluid blue-bg">
        <div class="container">
            <h2 class="pb-3 pt-2">Vertical Left-Right Timeline</h2>
            <!--first section-->
            <div class="row align-items-center how-it-works">
                <div class="col-2 text-center bottom">
                    <div class="circle">1</div>
                </div>
                <div class="col-6">
                    <h5>Fully Responsive</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
                </div>
            </div&g.........完整代码请登录后点击上方下载按钮下载查看