<div class="row"> <div class="col-xs-12 col-sm-5"> <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%"> </div> <div class="col-xs-12 col-sm-7"> <div class="row"> <div class="col-sm-6"> <h2>{!!$blogPost->title!!}</h2> </div> <div class="col-sm-6"> <h3 class="pull-right"> {{$blogPost->created_at}} </h3> </div> </div> </div> {!! Purifier::clean($blogPost->message) !!} <div class="col-xs-12"> <hr /> </div> </div>
Wrapping the title and created at
date in a new column to compliment the width of the image and setting all the other text outside any column did the trick for me.
A small downside is that the margins don’t line up but I am sure I’ll find a fix for that using some custom CSS.