Bootstrap Timeline Left & Right / Элементы / Сниппеты Bootstrap

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 852

Количество символов:

Посмотрели: 2700 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: http://goo.gl/GXDSrw

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, сниппет, Bootstrap, Timeline, element, Responsive, html, элемент, адаптивные

Поделился: BootstrapТема

Добавлено: 2016-04-04 в 21:54

Метка: 1581263298

⇄ ⇅

.timeline:before {
 top: 0;
 bottom: 0;
 position: absolute;
 content: " ";
 width: 3px;
 background-color: #eeeeee;
 left: 50%;
 margin-left: -1.5px;
}

.timeline > li {
 margin-bottom: 20px;
 position: relative;
}

.timeline > li:before,
.timeline > li:after {
 content: " ";
 display: table;
}

.timeline > li:after {
 clear: both;
}

.timeline > li:before,
.timeline > li:after {
 content: " ";
 display: table;
}

.timeline > li:after {
 clear: both;
}

.timeline > li > .timeline-panel {
 width: 46%;
 float: left;
 border: 1px solid #d4d4d4;
 border-radius: 2px;
 padding: 20px;
 position: relative;
 -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline > li > .timeline-panel:before {
 position: absolute;
 top: 26px;
 right: -15px;
 display: inline-block;
 border-top: 15px solid transparent;
 border-left: 15px solid #ccc;
 border-right: 0 solid #ccc;
 border-bottom: 15px solid transparent;
 content: " ";
}

.timeline > li > .timeline-panel:after {
 position: absolute;
 top: 27px;
 right: -14px;
 display: inline-block;
 border-top: 14px solid transparent;
 border-left: 14px solid #fff;
 border-right: 0 solid #fff;
 border-bottom: 14px solid transparent;
 content: " ";
}

.timeline > li > .timeline-badge {
 color: #fff;
 width: 50px;
 height: 50px;
 line-height: 50px;
 font-size: 1.4em;
 text-align: center;
 position: absolute;
 top: 16px;
 left: 50%;
 margin-left: -25px;
 background-color: #999999;
 z-index: 100;
 border-top-right-radius: 50%;
 border-top-left-radius: 50%;
 border-bottom-right-radius: 50%;
 border-bottom-left-radius: 50%;
}

.timeline > li.timeline-inverted > .timeline-panel {
 float: right;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
 border-left-width: 0;
 border-right-width: 15px;
 left: -15px;
 right: auto;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
 border-left-width: 0;
 border-right-width: 14px;
 left: -14px;
 right: auto;
}

.timeline-badge.primary {
 background-color: #2e6da4 !important;
}

.timeline-badge.success {
 background-color: #3f903f !important;
}

.timeline-badge.warning {
 background-color: #f0ad4e !important;
}

.timeline-badge.danger {
 background-color: #d9534f !important;
}

.timeline-badge.info {
 background-color: #5bc0de !important;
}

.timeline-title {
 margin-top: 0;
 color: inherit;
}

.timeline-body > p,
.timeline-body > ul {
 margin-bottom: 0;
}

.timeline-body > p + p {
 margin-top: 5px;
}
</style>

<ul class="timeline">
 <li>
 <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
 <div class="timeline-panel">
 <div class="timeline-heading">
 <h4 class="timeline-title">Mussum ipsum cacilds</h4>
 <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
 </div>
 <div class="timeline-body">
 <p>Mussum ipsum cacilds, vidis litro abertis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.</p>
 </div>
 </div>
 </li>
 <li class="timeline-inverted">
 <div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div>
 <div class="timeline-panel">
 <div class="timeline-heading">
 <h4 class="timeline-title">Mussum ipsum cacilds</h4>
 </div>
 <div class="timeline-body">
 <p>Mussum ipsum cacilds, vidis litro abertis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.</p>

</div>
 </div>
 </li>
 <li>
 <div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
 <div class="timeline-panel">
 <div class="timeline-heading">
 <h4 class="timeline-title">Mussum ipsum cacilds</h4>
 </div>
 <div class="timeline-body">
 <p>Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.</p>
 </div>
 </div>
 </li>
 <li class="timeline-inverted">
 <div class="timeline-panel">
 <div class="timeline-heading">
 <h4 class="timeline-title">Mussum ipsum cacilds</h4>
 </div>
 <div class="timeline-body">
 <p>Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.</p>
 </div>
 </div>
 </li>
 <li>
 <div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div>
 <div class="timeline-panel">
 <div class="timeline-heading">
 <h4 class="timeline-title">Mussum ipsum cacilds</h4>
 </div>
 <div class="timeline-body">
 <p>Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.</p>
 <hr>
 <div class="btn-group">
 <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
 <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
 </div>
 </div>
 </div>
 </li>
 <li>
 <div class="timeline-panel">
 <div class="timeline-heading">
 <h4 class="timeline-title">Mussum ipsum cacilds</h4>
 </div>
 <div class="timeline-body">
 <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.</p>
 </div>
 </div>
 </li>
 <li class="timeline-inverted">
 <div class="timeline-badge success"><i class="glyphicon glyphicon-thumbs-up"></i></div>
 <div class="timeline-panel">
 <div class="timeline-heading">
 <h4 class="timeline-title">Mussum ipsum cacilds</h4>
 </div>
 <div class="timeline-body">
 <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.</p>
 </div>
 </div>
 </li>
 </ul>

</div>

BootstrapTema

Bootstrap Timeline Left & Right

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0