<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-4"> Welcome to ALISON Publisher </div> <div class="col-md-6"> <div class="btn-group"> <btn class="btn btn-default">ALISON Home</btn> <btn class="btn btn-default">My Profile</btn> <btn class="btn btn-default">User Guide</btn> </div> </div> <div class="col-md-2"> Google Advert Headline </div> </div> <div class="row top-buffer"> <div class="col-md-4"> <btn class="btn btn-default">Launch myPublishing Course</btn> <div class="myCourses"> <div class="col-md-8 courseList"> <ul> <li>Course 1 Title Trimmed</li> <li>Course 2 Title Trimmed</li> <li>Course 3 Title Trimmed</li> <li>Course 4 Title Trimmed</li> </ul> </div> <div class="col-md-4 actionList"> <ul class="actions"> <li><btn class="btn btn-default">Open</btn></li> <li><btn class="btn btn-default">Open</btn></li> <li><btn class="btn btn-default">Open</btn></li> </ul> </div> </div> </div> </div> <div class="row top-buffer"> <div class="btn-group"> <btn class="btn btn-default pull-left">View myPublisher courses by others</btn> <btn class="btn btn-default pull-left">View ALISON courses</btn> </div> </div> </div>

ul {list-style-type:none;} .Courses {padding-top:30px; border: 2px solid #000000;}

$(document).ready(function(){ $("p").click(function(){ $('.anim').animate({left:'250px'}); }); });