<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 ----------> <!-- Font awesome icon set --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> <!-- Info box responsive - pure bootstrap no CSS / JS --> <div class="row justify-content-center"> <div class="col info-box rounded col-lg-10 col-xl-8 bg-light p-4 m-3 "> <div class="row "> <div class="col-12 col-sm-2 d-flex justify-content-center align-items-center mb-2 mb-sm-0 display-3 text-primary"> <i class="fa fa-info-circle"><!-- / --></i> </div> <div class="col-12 col-sm-10 pl-sm-0 mb-2"> <p> Sed egestas dictum diam, faucibus molestie sem viverra eget. Duis vitae ante condimentum, tristique velit eget, pretium metus. Integer augue dolor, laoreet non felis ut, sollicitudin laoreet sem. Nam eleifend massa felis, quis sollicitudin ante ornare tincidunt. Sed egestas dictum diam, faucibus molestie sem viverra eget. </p> </div> </div> <div class="row"> <div class="col text-right"><a class="btn btn-outline-primary" href="#">More</a></div> </div> </div> </div>