<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="animated fadeIn subject-detail-card"> <div class="row"> <div class="col-sm-2"> <div class="subject-cover-image"> <img src="https://cdn.pixabay.com/photo/2018/05/26/19/30/woman-3432069_960_720.jpg" class="img-responsive" /> </div> </div> <div class="col-sm-8"> <div class="subject-discription"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae tristique nunc. Cras pharetra vel orci nec fringilla. Phasellus suscipit faucibus tristique. Sed bibendum, justo a volutpat convallis, enim felis scelerisque mi, quis facilisis tortor diam ac augue. Mauris et pretium nisi, id bibendum libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris bibendum id diam vel tincidunt.Sed bibendum, justo a volutpat convallis, enim felis scelerisque mi, quis facilisis tortor diam ac augue. Mauris et pretium nisi, id bibendum libero. </p> </div> </div> <div class="text-center col-sm-2"> <button class="btn btn-default orange-circle-button" href="#">10 <br />Lactures<br /><span>Read more</span></button> </div> </div> </div>

.subject-detail-card{border:1px solid #225579; border-radius:10px; padding:20px 10px; margin:50px 50px 30px 50px;} .subject-cover-image{padding:25px;} .subject-discription{font-size:14px; color:#666666; line-height:24px; text-align:justify;} .main-content{margin-top:50px;} .orange-circle-button { border: .5em solid #225579; font-size: 18px; line-height:30px; color: #ffffff; background-color: #225579; margin: auto; border-radius: 50%; height: 7em; width: 7em; position: relative; font-weight:bold; } .orange-circle-button:hover { color:#ffffff; background-color: #2F6687; text-decoration: none; border-color: #498FA9; transition: all 1s ease 0s; outline:none; } .orange-circle-button:visited, .orange-circle-button:focused { color:#ffffff; background-color: #e84d0e; text-decoration: none; outline:none; } .orange-circle-link-greater-than { font-size: 1em; outline:none; }