<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-12"> <h4>Bootstrap Profile Grid</h4> </div> </div> <div class="row"> <div class="col-lg-3 col-sm-6"> <div class="companyGrid"> <div class="row"> <div class="col-sm-5"> <center> <img src="https://scontent.fdel12-1.fna.fbcdn.net/v/t1.0-1/p160x160/54434993_637406253350948_6983830832926425088_n.jpg?_nc_cat=105&_nc_ht=scontent.fdel12-1.fna&oh=18bddf03a01eb6ba7fc622a54bcd350f&oe=5D42E011" class="profile_pic"> </center> </div> <div class="col-sm-7"> <a href="#"><p style="text-align:left; font-weight: 600;padding-top: 8px;margin-bottom: 8px !important;font-weight: 600;font-size: 16px;"> Santanu </p></a> <p style="height: 3.2em;width: 100%;overflow: hidden;font-weight: 600;text-align: left;font-size: 13px;color: #333;">Web Developer</p> </div> </div> <div style="padding-left: 8px; padding-right: 8px;"> <div class="row"> <div class="col-sm-4"> <p style="text-align:left;font-size: 13px;margin-bottom:0 !important;color: #333;"> <b style="font-size: 14px;font-weight: 700;color: #333;">$20</b> / hr</p> </div> <div class="col-sm-8"> <p style="text-align:left;font-size: 12px;margin-bottom:0 !important;font-weight: 600;color: #333;"> <span class="lnr lnr-map-marker"></span> Noida, Uttar Pradesh</p> </div> </div> </div> <hr> <div style=""> <div class="row"> <div class="col-sm-12"> <div class="m-xs-bottom m-0-bottom-xs"> <span class="o-tag-skill m-xs-right pull-left m-xs-bottom skill1"> Bootstrap </span> <span class="o-tag-skill m-xs-right pull-left m-xs-bottom skill1"> Asp.Net </span> <span class="o-tag-skill m-xs-right pull-left m-xs-bottom skill1"> C# </span> <span class="o-tag-skill m-xs-right pull-left m-xs-bottom skill1"> Php </span> <span class="o-tag-skill m-xs-right pull-left m-xs-bottom skill1"> Bootstrap </span> </div> </div> </div> </div> <br> <center> <a href="#" class="btn_profile"> View Profile </a> </center> </div> </div> </div> </div>

.companyGrid{ border-radius: 3px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); padding: 25px 5px 24px 4px; text-align: right; display: block; background-color: #fff; border-radius: 8px; } .btn_profile{ color: #2e3e48 !important; border: 1px solid #2e3e48; outline: none; cursor: pointer; display: inline-block; text-decoration: none; border-radius: 3px; line-height: 1 !important; padding: 10px 15px !important; position: relative; top: 2px; text-transform: capitalize; font-weight: 600; font-size: 12px; } .btn_profile:hover{ border: 1px solid; background: #2e3e48; color: #fff !important; } .btn_viewProfile{ color: #444 !important; border: 1px solid #37A000; outline: none; cursor: pointer; display: inline-block; text-decoration: none; font-size: 13px; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; line-height: 1 !important; padding: 10px 15px !important; position: relative; top: 2px; } .btn_viewProfile:hover { color: #fff !important; background-color: #37A000; } .profile_pic{ height: 100px; width: 100px; border-radius: 50px; border: 2px solid #e5e5e5; } .m-xs-right{ margin-bottom: 5px!important; } .m-xs-bottom{ margin-bottom: 5px!important; } .o-tag-skill{ margin: 0 6px 10px 0 } .skill1{ background-color: #e0e0e0!important; color: #222!important; font-size: 12px; cursor: default; padding: 5px 10px; line-height: 1; float: left !important; text-align: left !important; border-radius: 9px; } .view_ai{ background-color: #fff; display: block; padding: 6px 4px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; text-align: center; margin-bottom: 25px; position: relative; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1); color: #999; } .post_requirement{ color: #fff !important; background: #198C19; border: 1px solid #198C19 ; outline: none; cursor: pointer; display: inline-block; text-decoration: none; border-radius: 3px; line-height: 1 !important; padding: 10px 15px !important; position: relative; top: 2px; text-transform: capitalize; font-weight: 600; } .post_requirement:hover{ color: #37A000 !important; background: #fff !important; border: 1px solid #fff; } .get_start_reg{ /*color: #ff1919 ;*/ color: #ff1919 !important; border: 1px solid #ff1919; outline: none; cursor: pointer; display: inline-block; text-decoration: none; border-radius: 3px; line-height: 1 !important; padding: 10px 15px !important; position: relative; top: 2px; text-transform: capitalize; font-weight: 600; } .get_start_reg:hover{ color: #fff !important; background: #ff1919; border: 1px solid #ff1919; } .btn_preview{ color: #2e3e48 !important; border: 1px solid #2e3e48; outline: none; cursor: pointer; display: inline-block; text-decoration: none; border-radius: 3px; line-height: 1 !important; padding: 10px 15px !important; position: relative; top: 2px; text-transform: capitalize; font-weight: 600; } .subcategory{ object-fit: cover; height: 300px; width: 100%; border-radius: 4px; -webkit-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; } .community_group{ color: #fff !important; border: 1px solid #fff; outline: none; cursor: pointer; display: inline-block; text-decoration: none; border-radius: 3px; line-height: 1 !important; padding: 10px 15px !important; position: relative; top: 2px; text-transform: capitalize; font-weight: 600; }