<div class="container">

  <div class="page-header">
    <h1>Bootstrap 4 Blog Template <small>Design / Bootstrap</small></h1>
  </div>

  <div class="row">

    <div class="col-md-8">
      <article id="">
        <header>
          <div class="meta">

            Written by <span class="author">Author Name</span> <span class="date">1/30/16</span> | <span class="comments"><span class="badge">4</span> Comments</span>
          </div>
          <h2>
            <a href="">
            Blog title</a></h2>
        </header>
        <div class="entry-content">
          <a href="">
            <img src="http://placehold.it/750x420" alt="" class="img-fluid" />
          </a>
          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis aliquid fuga dolorum est ab fugit, eveniet quam minus reiciendis harum accusamus a velit, vero impedit, dolor. Sapiente architecto &hellip;</p>

          <a href="#" class="btn btn-primary">Read More <span class="glyphicon glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
        </div>
        <footer>
        </footer>
      </article>
      <article id="">
        <header>
          <div class="meta">

            Written by <span class="author">Author Name</span> <span class="date">1/30/16</span> | <span class="comments"><span class="badge">4</span> Comments</span>
          </div>
          <h2>
            <a href="">
            Blog title</a></h2>
        </header>
        <div class="entry-content">
          <a href="">
            <img src="http://placehold.it/750x420" alt="" class="img-fluid" />
          </a>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis aliquid fuga dolorum est ab fugit, eveniet quam minus reiciendis harum accusamus a velit, vero impedit, dolor. Sapiente architecto non quo.</p>

          <a href="#" class="btn btn-primary">Read More <span class="glyphicon glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
        </div>
        <footer>
        </footer>
      </article>
      <article id="">
        <header>
          <div class="meta">

            Written by <span class="author">Author Name</span> <span class="date">1/30/16</span> | <span class="comments"><span class="badge">4</span> Comments</span>
          </div>
          <h2>
            <a href="">
            Blog title</a></h2>
        </header>
        <div class="entry-content">
          <a href="">
            <img src="http://placehold.it/750x420" alt="" class="img-fluid" />
          </a>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis aliquid fuga dolorum est ab fugit, eveniet quam minus reiciendis harum accusamus a velit, vero impedit, dolor. Sapiente architecto non quo.</p>

          <a href="#" class="btn btn-primary">Read More <span class="glyphicon glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
        </div>
        <footer>
        </footer>
      </article>
      <article id="">
        <header>
          <div class="meta">

            Written by <span class="author">Author Name</span> <span class="date">1/30/16</span> | <span class="comments"><span class="badge">4</span> Comments</span>
          </div>
          <h2>
            <a href="">
            Blog title</a></h2>
        </header>
        <div class="entry-content">
          <a href="">
            <img src="http://placehold.it/750x420" alt="" class="img-fluid" />
          </a>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis aliquid fuga dolorum est ab fugit, eveniet quam minus reiciendis harum accusamus a velit, vero impedit, dolor. Sapiente architecto non quo.</p>

          <a href="#" class="btn btn-primary">Read More <span class="glyphicon glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
        </div>
        <footer>
        </footer>
      </article>

      <nav>
        <ul class="pagination">
          <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
          <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
        </ul>
      </nav>


    </div>
    <aside class="col-md-4">

      <div class="card mb-3">
        <h3 class="card-header mb-3">Join our Newsletter</h3>
        <form class="form-horizontal">
          <div class="form-group">
            <div class="col-sm-12">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-12">
              <button type="submit" class="btn btn-primary">Join Us</button>
            </div>

          </div>
        </form>

      </div>

      <h3>Recent Posts</h3>
      <div class="list-group  mb-3">
        <a href="#" class="list-group-item active">
          <h4 class="list-group-item-heading">List group item heading</h4>
          <p class="list-group-item-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, optio eum &hellip;
          </p>
        </a>
        <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">List group item heading</h4>
          <p class="list-group-item-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, optio eum &hellip;
          </p>
        </a>
        <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">List group item heading</h4>
          <p class="list-group-item-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, optio eum &hellip;
          </p>
        </a>
        <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">List group item heading</h4>
          <p class="list-group-item-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, optio eum &hellip;
          </p>
        </a>
      </div>






<div class="container">
<h3>Follow Us</h3>
<div class="social">
  <a href=""><i class="fa fa-3x fa-facebook-square"></i></a>
  <a href=""><i class="fa fa-3x fa-twitter-square"></i></a>
  <a href=""><i class="fa fa-3x fa-linkedin-square"></i></a>
  <a href=""><i class="fa fa-3x fa-google-plus-square"></i></a>
</div>
  
</div>
      
      
      
    </aside>
  </div>
</div>
article {margin-bottom:2em;padding-bottom:2em;border-bottom:1px solid #ccc;}

.social a {
  padding: 0 .5em;
}

.page-header {
  margin-bottom:2rem;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/504729ba/bootstrap-4-latest.min.js