HTML редактор

<!doctype html>
<html lang="ru">
<head>
    <title>Bootstrap 4 - Таймлайн</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link href="/examples/vendors/bootstrap-4/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* CSS */
        /* Добавление отступов к элементу с классом timeline */
        .timeline {
            padding-top: 1rem;
            padding-bottom: 1rem;
            position: relative;
        }

/* Создание вертикальной линии с помощью псевдоэлеметна */
        .timeline::before {
            content: "";
            position: absolute;
            width: .125rem;
            height: 100%;
            background-color: #dee2e6;
            left: 1.0625rem;
            top: 0;
        }

/* добавление нижнего отступа и левого поля для элементов с классом timeline-wrapper */
        .timeline-wrapper {
            margin-bottom: 1rem;
            padding-left: 4rem;
        }

/* убирание у последнего элемента .timeline-wrapper нижнего отступа */
        .timeline-wrapper:last-child {
            margin-bottom: 0;
        }

/* стили для элементов таймлайна */
        .timeline-item {
            position: relative;
            background-color: #118c4e;
            color: #fff;
            padding: .825rem;
            border-radius: .25rem;
        }

/* добавление контрольных точек на вертикальную линию */
        .timeline-item::before {
            content: "";
            position: absolute;
            width: .75rem;
            height: .75rem;
            background-color: #118c4e;
            border-radius: .4rem;
            left: -2.3125rem;
            top: 50%;
            transform: translateY(-50%);
        }

/* добавление стрелочек к элементам таймлайна */
        .timeline-item::after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-top: 1rem solid transparent;
            border-bottom: 1rem solid transparent;
            border-right: 1rem solid #118c4e;
            left: -1rem;
            top: 50%;
            transform: translateY(-50%);
        }

/* стили для блока, в котором будет отображаться название статьи */
        .timeline-item-header {
            display: block;
            font-weight: bold;
            font-size: 1.125rem;
        }

/* оформление блока, содержащего название раздела */
        .timeline-item-section {
            position: absolute;
            top: 0;
            right: 0;
            background-color: rgba(255, 255, 255, .4);
            padding: .3rem;
            font-size: .875rem;
            border-top-right-radius: .25rem;
        }

/* оформление блока, содержащего дату */
        .timeline-item-date {
            display: block;
            font-size: .75rem;
            line-height: 2;
            color: rgba(255, 255, 255, .8);
        }

/* стили для блока, в который будет выводиться описание статьи */
        .timeline-item-description {
            display: block;
            font-size: .875rem;
            color: rgba(255, 255, 255, .8);
            line-height: 1.7;
        }

/* стили для блока, содержащего ссылку "Перейти" */
        .timeline-item-link {
            display: block;
            font-size: .875rem;
            line-height: 1.7;
            text-align: right;
        }

/* стили для ссылки "Перейти" */
        .timeline-item-link a {
            text-decoration: none;
            color: rgba(255, 255, 255, 1);
            border-bottom: 1px dashed rgba(255, 255, 255, 1);
        }

/* стили для ссылки "Перейти" при поднесении к ней курсора или когда она находится в состоянии фокуса */
        .timeline-item-link a:hover, .timeline-item-link a:focus {
            color: rgba(255, 255, 255, .8);
            border-bottom: 1px dashed rgba(255, 255, 255, .8);
        }
    </style>
</head>
<body>

<div class="container">
    <h1 class="h4 text-center my-4">Bootstrap 4 - Таймлайн</h1>
</div>

<div class="row">
                    
                    <div class="col-12 timeline-wrapper">
                        <div class="timeline-item">
                            <span class="timeline-item-section">РАЗДЕЛ</span>
                            <span class="timeline-item-date">07.05.2018</span>
                            <span class="timeline-item-header">НАЗВАНИЕ СТАТЬИ</span>
                            <span class="timeline-item-description">Детальное описание статьи</span>
                            <span class="timeline-item-link">
                                <a href="#">Перейти</a>
                            </span>
                        </div>
                    </div>
                    
                    <div class="col-12 timeline-wrapper">
                        <div class="timeline-item">
                            <span class="timeline-item-section">РАЗДЕЛ</span>
                            <span class="timeline-item-date">25.04.2018</span>
                            <span class="timeline-item-header">НАЗВАНИЕ СТАТЬИ</span>
                            <span class="timeline-item-description">Детальное описание статьи</span>
                            <span class="timeline-item-link">
                                <a href="#">Перейти</a>
                            </span>
                        </div>
                    </div>
                    
                    <div class="col-12 timeline-wrapper">
                        <div class="timeline-item">
                            <span class="timeline-item-section">РАЗДЕЛ</span>
                            <span class="timeline-item-date">20.04.2018</span>
                            <span class="timeline-item-header">НАЗВАНИЕ СТАТЬИ</span>
                            <span class="timeline-item-description">Детальное описание статьи</span>
                            <span class="timeline-item-link">
                                <a href="#">Перейти</a>
                            </span>
                        </div>
                    </div>
                    
                    <div class="col-12 timeline-wrapper">
                        <div class="timeline-item">
                            <span class="timeline-item-section">РАЗДЕЛ</span>
                            <span class="timeline-item-date">17.04.2018</span>
                            <span class="timeline-item-header">НАЗВАНИЕ СТАТЬИ</span>
                            <span class="timeline-item-description">Детальное описание статьи</span>
                            <span class="timeline-item-link">
                                <a href="#">Перейти</a>
                            </span>
                        </div>
                    </div>
                    
                    <div class="col-12 timeline-wrapper">
                        <div class="timeline-item">
                            <span class="timeline-item-section">РАЗДЕЛ</span>
                            <span class="timeline-item-date">12.04.2018</span>
                            <span class="timeline-item-header">НАЗВАНИЕ СТАТЬИ</span>
                            <span class="timeline-item-description">Детальное описание статьи</span>
                            <span class="timeline-item-link">
                                <a href="#">Перейти</a>
                            </span>
                        </div>
                    </div>
                </div>

</div>
        </div>
    </section>
</div>

</body>
</html>