Bootstrap snippet: Blog title widget

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: blog



<div class="row bootstrap snippets"> <div class="col-md-6 col-xs-12"> <div class="widget"> <div class="widget-header cover overlay"> <img class="cover-image" src="http://getbootstrapadmin.com/remark/global/photos/view-10-960x640.jpg" alt="..."> <div class="overlay-panel overlay-background text-center vertical-align"> <div class="vertical-align-middle"> <div class="widget-time widget-divider"> <span>July 28, 2015</span> </div> <h3 class="widget-title margin-bottom-20">Iudicem fieri maximeque aliud vacuitate.</h3> <button type="button" class="btn btn-outline btn-inverse">READ MORE</button> </div> </div> </div> </div> </div> <div class="col-md-6 col-xs-12"> <div class="widget"> <div class="widget-header cover overlay"> <img class="cover-image" src="http://getbootstrapadmin.com/remark/global/photos/view-10-960x640.jpg" alt="..."> <div class="overlay-panel overlay-background text-center vertical-align"> <div class="vertical-align-middle"> <div class="widget-time widget-divider"> <span>July 28, 2015</span> </div> <h3 class="widget-title margin-bottom-20">Iudicem fieri maximeque aliud vacuitate.</h3> <button type="button" class="btn btn-outline btn-inverse">READ MORE</button> </div> </div> </div> </div> </div> </div>
.widget { background-color: #fff; margin-bottom: 30px; position: relative -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3); } .widget .cover { width: 100% } [class*=blocks-]>li>.widget { margin-bottom: 0 } .widget-shadow { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05) } .widget { border-radius: 3px } .widget .widget-header { border-radius: 3px 3px 0 0 } .widget .widget-header:last-child { border-radius: inherit } .widget .widget-body:last-child { border-radius: 0 0 3px 3px } .cover-image{ max-height:400px !important; width:100% !important; } .widget .widget-body:last-child .widget-body-footer { border-radius: 0 0 3px 3px } .widget .widget-footer { border-radius: 0 0 3px 3px } .widget .widget-footer:first-child { border-radiu: inherit } .widget-body { position: relative; padding: 30px 25px } .widget-body-footer { margin-top: 30px } .widget-body-footer:after, .widget-body-footer:before { content: " "; display: table } .widget-body-footer:after { clear: both } .widget-content ul { margin: 0; padding: 0 } .widget-content li { list-style: none } .widget-title { margin-top: 0; color: #37474f; text-transform: capitalize } div.widget-title { font-size: 22px } .overlay-panel .widget-title { color: #fff } .widget>.widget-title { padding: 12px 20px } .widget-metas { color: #a3afb7; font-size: 12px } .widget-metas.type-link>a { position: relative; display: inline-block; padding: 3px 5px; color: #a3afb7 } .widget-metas.type-link>a:first-child { padding-left: 0 } .widget-metas.type-link>a:hover { color: #ccd5db } .widget-metas.type-link>a+a:before { position: absolute; top: 10px; left: -2px; content: ''; width: 3px; height: 3px; background-color: #a3afb7; border-radius: 50% } .overlay-background .widget-time { opacity: .8; color: #fff } .widget-category { font-size: 16px } .widget-actions { margin-top: 10px; text-align: right } .widget-actions a { display: inline-block; margin-right: 10px; vertical-align: middle; color: #a3afb7 } .widget-actions a .icon, .widget-actions a.icon { text-decoration: none } .widget-actions a .icon+span, .widget-actions a.icon+span { margin-left: 2px } .widget-actions a.active, .widget-actions a:focus, .widget-actions a:hover { text-decoration: none; color: #ccd5db } .widget-actions a:last-child { margin-right: 0 } .widget-actions-sidebar { width: 60px; position: absolute; top: 20px; left: 20px } .widget-actions-sidebar a { display: inline-block; width: 100%; height: 60px; text-align: center; border-right: 1px solid #e4eaec; margin-right: 0 } .widget-actions-sidebar a:before { display: inline-block; content: ''; height: 100%; vertical-align: middle } .widget-actions-sidebar a+a { border-top: 1px solid #e4eaec } .widget-actions-sidebar+.widget-content { margin-left: 80px } .widget-watermark { position: absolute; opacity: .1; right: 0; bottom: 0; line-height: 1 } .widget-watermark.darker { color: #000 } .widget-watermark.lighter { color: #fff } .widget-divider:after { width: 20px; height: 2px; content: ""; display: block; margin: 15px auto; background-color: #fff } .widget-left { position: absolute; width: 40%; height: 100%; top: 0; left: 0 } .widget-left+.widget-body { margin-left: 40%; width: 60% } @media (max-width:767px) { .widget-left { position: relative; width: 100%; height: 320px } .widget-left+.widget-body { margin-left: 0; width: 100% } } .overlay { position: relative; display: inline-block; width: 100%; max-width: 100%; margin: 0; overflow: hidden; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); } .cover { overflow: hidden; } .overlay-background { background: rgba(0,0,0,.5); } .overlay-panel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 20px; color: #fff; } .overlay-panel>:last-child { margin-bottom: 0; } .vertical-align-middle { vertical-align: middle; } .vertical-align-bottom, .vertical-align-middle { display: inline-block; max-width: 100%; font-size: 14px; } .vertical-align:before { display: inline-block; height: 100%; vertical-align: middle; content: ""; } .btn-outline.btn-inverse { color: #76838f; background-color: transparent; border-color: #fff; } .btn-outline.btn-inverse:hover { color: #76838f; background-color: #fff; border-color: #fff; }
Dey-Dey

Blog title widget

Dey-Dey
  Apr 3rd, 20:07
80 Views