return ( <div className="row py-5 px-4"> <div className="mx-auto"> <div className="bg-white shadow rounded overflow-hidden"> <div className="px-4 pt-0 pb-4 bg-dark"> <div className="d-flex align-items-end profile-header" style={{ transform: "translateY(5rem)" }} > <div className="profile me-3"> <img src="https://bootstrapious.com/i/snippets/sn-profile/teacher.jpg" alt="..." width="130" className="rounded mb-2 img-thumbnail d-block" /> <a href="#" className="btn btn-dark btn-sm btn-block"> Edit profile </a> </div> <div className="media-body mb-5 text-white"> <h4 className="mt-0 mb-0">Manuella Tarly</h4> <p className="small mb-4"> <i className="fa fa-map-marker me-2"></i>San Farcisco </p> </div> </div> </div> <div className="bg-light p-4 d-flex justify-content-end text-center"> <ul className="list-inline mb-0"> <li className="list-inline-item"> <h5 className="font-weight-bold mb-0 d-block">241</h5> <span className="text-muted"> {" "} <i className="fa fa-picture-o me-1"></i>Photos </span> </li> <li className="list-inline-item"> <h5 className="font-weight-bold mb-0 d-block">84K</h5> <span className="text-muted"> {" "} <i className="fa fa-user-circle-o me-1"></i>Followers </span> </li> </ul> </div> <div className="py-4 px-4"> <div className="d-flex align-items-center justify-content-between mb-3"> <h5 className="mb-0">Recent photos</h5> <a href="#" className="btn btn-link text-muted"> Show all </a> </div> <div className="row"> <div className="col-lg-6 mb-2 pe-lg-1"> <img src="https://bootstrapious.com/i/snippets/sn-profile/img-3.jpg" alt="" className="img-fluid rounded shadow-sm" /> </div> <div className="col-lg-6 mb-2 pe-lg-1"> <img src="https://bootstrapious.com/i/snippets/sn-profile/img-4.jpg" alt="" className="img-fluid rounded shadow-sm" /> </div> <div className="col-lg-6 pe-lg-1 mb-2"> <img src="https://bootstrapious.com/i/snippets/sn-profile/img-5.jpg" alt="" className="img-fluid rounded shadow-sm" /> </div> <div className="col-lg-6 pe-lg-1"> <img src="https://bootstrapious.com/i/snippets/sn-profile/img-6.jpg" alt="" className="img-fluid rounded shadow-sm" /> </div> </div> <div className="py-4"> <h5 className="mb-3">Recent posts</h5> <div className="p-4 bg-light rounded shadow-sm"> <p className="font-italic mb-0"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p> <ul className="list-inline small text-muted mt-3 mb-0"> <li className="list-inline-item"> <i className="fa fa-comment-o me-2"></i>12 Comments </li> <li className="list-inline-item"> <i className="fa fa-heart-o me-2"></i>200 Likes </li> </ul> </div> </div> </div> </div> </div> </div> );