First of all, the button should be inside it’s own row. Right now you just have an orphaned col-xs-12
which violates the Bootstrap standards. So doing that will separate them better. After that you need some margin between them
<div class="row"> <div class="col-md-12"> <h2>test</h2> <div class="headline-date">Tuesday <button type="button" class="btn btn-primary pull-right"> <i class="fa fa-user-plus " aria-hidden="true"></i>Call </button> </div> </div> </div> <div class="row"> <div class="col-md-12 "> <!-- members table --> <div class="col-md-8"> 1 </div> <div class="col-md-4"> 2 </div> </div> </div>
And styling:
.col-md-8 { border: 1px solid red; } .col-md-4 { border: 1px solid blue; } .headline-date { margin-bottom: 30px; }
Example: https://jsfiddle.net/y9mznrna/1/