Bootstrap html snippet. event blocks

HTML code

Clean, semantic HTML that powers this Bootstrap 3.3.4 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<div class="container">
<div class="row">
    <div class="col-md-6">
      <!-- START widget-->
      <div class="panel widget">
         <div class="row row-table row-flush">
            <div class="col-xs-5">
               <picture class="lateral-picture">
                  <img src="https://www.bootdey.com/image/400x400/FFB6C1/000000" alt="">
               </picture>
            </div>
            <div class="col-xs-7 align-middle p-lg">
               <div class="pull-right"><a href="#" class="btn btn-primary btn-sm">Register</a>
               </div>
               <p>
                  <span class="text-lg">16</span>Aug</p>
               <p>
                  <strong>EVENT INVITATION</strong>
               </p>
               <p>Donec posuere neque in elit luctus tempor consequat enim egestas. Nulla dictum egestas leo at lobortis.</p>
            </div>
         </div>
      </div>
      <!-- END widget-->
    </div>
    <div class="col-md-6">
      <!-- START widget-->
      <div class="panel widget">
         <div class="row row-table row-flush">
            <div class="col-xs-5">
               <picture class="lateral-picture">
                  <img src="https://www.bootdey.com/image/400x400/87CEFA/000000" alt="">
               </picture>
            </div>
            <div class="col-xs-7 align-middle p-lg">
               <div class="pull-right"><a href="#" class="btn btn-primary btn-sm">Register</a>
               </div>
               <p>
                  <span class="text-lg">16</span>Aug</p>
               <p>
                  <strong>EVENT INVITATION</strong>
               </p>
               <p>Donec posuere neque in elit luctus tempor consequat enim egestas. Nulla dictum egestas leo at lobortis.</p>
            </div>
         </div>
      </div>
      <!-- END widget-->
    </div>
</div>
</div>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 3.3.4 to keep the design, spacing, and responsiveness consistent.

body {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 1.52857143;
  color: #515253;
  background-color: #f5f7fa;
  margin-top:20px;
}

.widget .panel, .widget.panel {
  overflow: hidden;
}

.widget {
  margin-bottom: 20px;
  border: 0;
}

.row-table {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
  margin: 0;
}

.row-flush>[class*=col-] {
  padding-left: 0;
  padding-right: 0;
}

.row-table>[class*=col-] {
  display: table-cell;
  float: none;
  table-layout: fixed;
  vertical-align: middle;
}

.widget .lateral-picture {
  position: relative;
  display: block;
  height: 240px;
  width: auto;
  overflow: hidden;
}

.widget .lateral-picture>img {
  position: absolute;
  top: 0;
  left: 0;
  max-height: 100%;
  width: auto;
}

.align-middle {
  vertical-align: middle;
}

.p-lg {
  padding: 15px!important;
}

.btn {
  border-radius: 3px;
  font-size: 13px;
  border-color: transparent;
  -webkit-appearance: none;
  outline: 0!important;
  -webkit-transition: all .1s;
  -o-transition: all .1s;
  transition: all .1s;
}