<nav class="navbar navbar-inverse navbar-fixed-top">
  
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-chevron-down"></span></a>
    </div>
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<section class="timeline">
  <div class="container">

    <div class="row">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="arrow"></div>
          <div class="panel-body">
            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed
            diam eget risus varius blandit.
          </div>
          <div class="panel-footer dropdown">
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Fave"><span aria-hidden="true" class="glyphicon glyphicon-heart-empty"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Link"><span aria-hidden="true" class="glyphicon glyphicon-link"></span></a>

            <a href="#" class="btn btn-link dropdown-toggle" role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <span aria-hidden="true" class="glyphicon glyphicon-option-vertical">
            </a>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>

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

    <div class="row">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="arrow"></div>
          <div class="panel-body">
            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed
            diam eget risus varius blandit.
          </div>
          <div class="panel-footer">
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Fave"><span aria-hidden="true" class="glyphicon glyphicon-heart-empty"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Link"><span aria-hidden="true" class="glyphicon glyphicon-link"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Options"><span aria-hidden="true" class="glyphicon glyphicon-option-vertical"></span></a>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="arrow"></div>
          <div class="panel-body">
            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed
            diam eget risus varius blandit.
          </div>
          <div class="panel-footer">
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Fave"><span aria-hidden="true" class="glyphicon glyphicon-heart-empty"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Link"><span aria-hidden="true" class="glyphicon glyphicon-link"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Options"><span aria-hidden="true" class="glyphicon glyphicon-option-vertical"></span></a>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="arrow"></div>
          <div class="panel-body">
            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed
            diam eget risus varius blandit.
          </div>
          <div class="panel-footer">
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Fave"><span aria-hidden="true" class="glyphicon glyphicon-heart-empty"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Link"><span aria-hidden="true" class="glyphicon glyphicon-link"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Options"><span aria-hidden="true" class="glyphicon glyphicon-option-vertical"></span></a>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="arrow"></div>
          <div class="panel-body">
            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed
            diam eget risus varius blandit.
          </div>
          <div class="panel-footer dropdown">
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Fave"><span aria-hidden="true" class="glyphicon glyphicon-heart-empty"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Link"><span aria-hidden="true" class="glyphicon glyphicon-link"></span></a>

            <a href="#" class="btn btn-link dropdown-toggle" role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <span aria-hidden="true" class="glyphicon glyphicon-option-vertical">
            </a>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>

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

    <div class="row">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="arrow"></div>
          <div class="panel-body">
            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed
            diam eget risus varius blandit.
          </div>
          <div class="panel-footer">
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Fave"><span aria-hidden="true" class="glyphicon glyphicon-heart-empty"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Link"><span aria-hidden="true" class="glyphicon glyphicon-link"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Options"><span aria-hidden="true" class="glyphicon glyphicon-option-vertical"></span></a>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="arrow"></div>
          <div class="panel-body">
            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed
            diam eget risus varius blandit.
          </div>
          <div class="panel-footer">
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Fave"><span aria-hidden="true" class="glyphicon glyphicon-heart-empty"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Link"><span aria-hidden="true" class="glyphicon glyphicon-link"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Options"><span aria-hidden="true" class="glyphicon glyphicon-option-vertical"></span></a>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="arrow"></div>
          <div class="panel-body">
            Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed
            diam eget risus varius blandit.
          </div>
          <div class="panel-footer">
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Fave"><span aria-hidden="true" class="glyphicon glyphicon-heart-empty"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Link"><span aria-hidden="true" class="glyphicon glyphicon-link"></span></a>
            <a href="#" class="btn btn-link" role="button" data-toggle="tooltip" data-placement="bottom" title="Options"><span aria-hidden="true" class="glyphicon glyphicon-option-vertical"></span></a>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

body { padding-top: 50px; }
.navbar {
  margin-bottom: 0;
  
  .btn {
    margin-left: 15px;
    margin-right: 15px;
  }
}

.timeline {
  position: relative;
  padding: 30px 0;
  
  &:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    height: 100%;
    width: 4px;
    margin-left: -3px;
    background: #aaa;
    content: '';
  }
}

.row > div {
  &:after {
    display: block;
    position: absolute;
    height: 14px;
    width: 14px;
    background: #444;
    border: 2px solid #fff;
    content: '';
    top: 19px;
    left: 4px;
    border-radius: 50%;
    z-index: 10;
  }
}

.row > div .panel {
  margin-left: 15px;
  margin-right: 0;
  border-radius: 2px;
  
  .panel-footer {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: right;
    
    .btn {
      font-size: 16px;
      line-height: 1;
      padding: 2px 3px;
      color: #999;
    }
  }
}

@media screen and (min-width: 768px) {
  
  .navbar-brand {
    display: inline-block;
    padding: 0;
    margin: 0;
    position: absolute;
    height: 60px;
    width: 60px;
    left: 50%;
    top: 10px;
    margin-left: -30px !important;
    text-align: center;
    text-indent: 2px;
    font-size: 36px;
    line-height: 60px;
    border-radius: 50%;
    background: #555;
    color: #bbb !important;
    
    span {
      top: 7px;
      line-height: 1;
    }
  }
  
  .timeline {
    position: relative;
    padding: 40px 0;

    &:after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      height: 100%;
      width: 6px;
      margin-left: -3px;
      background: #999;
      content: '';
    }
  }
  
  .row > div .panel {
    margin-left: 0;
    margin-right: 15px;
  }

  .row > div {
    &:after {
      height: 24px;
      width: 24px;
      border: 4px solid #fff;
      top: 14px;
      right: -12px;
      left: auto;
    }
  }
  
  .row:nth-child(odd) > div {
    margin-left: 50%;
    
    &:after {
      height: 24px;
      width: 24px;
      border: 4px solid #fff;
      top: 14px;
      right: auto;
      left: -12px;
    }

    .panel {
      margin-left: 15px;
    }
  }
}


.panel > .arrow, .panel > .arrow::after {
    border-color: transparent;
    border-style: solid;
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}
.panel > .arrow {
    border-width: 11px;
}
.panel > .arrow::after {
    border-width: 10px;
    content: "";
}

.panel > .arrow {
  border-left-width: 0;
  border-right-color: rgba(0, 0, 0, 0.25);
  left: 20px;
  margin-top: 15px;
  top: 0;
}
.panel > .arrow::after {
  border-left-width: 0;
  border-right-color: #fff;
  bottom: -10px;
  content: " ";
  left: 1px;
}

@media screen and (min-width: 768px) {
  .panel > .arrow {
    border-left-width: 0;
    border-right-color: rgba(0, 0, 0, 0.25);
    left: 20px;
    margin-top: 15px;
    top: 0;
  }
  .panel > .arrow::after {
    border-left-width: 0;
    border-right-color: #fff;
    bottom: -10px;
    content: " ";
    left: 1px;
  }
  
  .row:nth-child(even) {
    /*.panel > .arrow {
      border-right-width: 0;
      border-left-color: rgba(0, 0, 0, 0.25);
      left: 20px;
      margin-top: 15px;
      top: 0;
    }
    .panel > .arrow::after {
      border-right-width: 0;
      border-left-color: #fff;
      bottom: -10px;
      content: " ";
      left: 1px;
    }*/
    .panel > .arrow {
      border-left-width: 0;
      border-right-color: rgba(0, 0, 0, 0.25);
      right: 20px;
      left: auto;
      margin-top: 15px;
      top: 0;
      -webkit-transform:rotate(180deg);
      -moz-transform:rotate(180deg);
      -ms-transform:rotate(180deg);
      transform:rotate(180deg);
    }
  }
}

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})