Live Demo - Latest arrow blog page design using bootstrap

See Free Live Demo example of Bootstrap responsive blog page eaxple. blog page design with user list. blog page create using html and css. you can get code of new user list page design snippet. we give you example of bootstrap user list with social icons , you can simple copy bellow code and use in your project. If it free sn...

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container blog-section">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12 fist-section">
      <div class="row">
        <div class="col-md-6 col-sm-6 image-left text-center">
          <img src="/demo/businessman.png">
        </div>
        <div class="col-md-6 col-sm-6 detail-right arrow-right">
          <h1>ANDY WIN</h1>
          <p>Lorem ipsum dolor sit amet,jijo adipisicing, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam   
          </p>
          <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
          <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
          <a href=""><i class="fa fa-skype" aria-hidden="true"></i></a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 fist-section">
      <div class="row">
        <div class="col-md-6 col-sm-6 image-left text-center">
          <img src="/demo/businessman.png">
        </div>
        <div class="col-md-6 col-sm-6 detail-right arrow-right">
          <h1>WIN DESAL</h1>
          <p>Lorem ipsum dolor sit amet,jijo adipisicing, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam   
          </p>
          <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
          <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
          <a href=""><i class="fa fa-skype" aria-hidden="true"></i></a>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12 text-center next-section">
      <div class="row">
        <div class="col-md-6 col-sm-6 detail-right arrow-left">
          <h1>MICAL WON</h1>
          <p>Lorem ipsum dolor sit amet,jijo adipisicing, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam   
          </p>
          <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
          <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
          <a href=""><i class="fa fa-skype" aria-hidden="true"></i></a>
        </div>
        <div class="col-md-6 col-sm-6 image-left image-center">
          <img src="/demo/businessman.png">
        </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 text-center">
      <div class="row">
        <div class="col-md-6 col-sm-6 detail-right arrow-left">
          <h1>JOHN LISN</h1>
          <p>Lorem ipsum dolor sit amet,jijo adipisicing, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam   
          </p>
          <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
          <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
          <a href=""><i class="fa fa-skype" aria-hidden="true"></i></a>
        </div>
        <div class="col-md-6 col-sm-6 image-left image-center">
          <img src="/demo/businessman.png">
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

body{
  background-color: #F0F0F0;
}
.blog-section{
    background-color: #f1f1f1;
    padding: 30px 50px;
}
.image-left{
    height:292px;
    padding:0px;
    background-color: #fff;
}
.image-left img{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.detail-right{
    color:#fff;
}
.detail-right{
    background-color:#24DEE1;
    text-align: center;
    height:292px;
}
.detail-right h1{
    margin:0px;
    font-size: 20px;
    padding:68px 0px 0px 0px;
}
.detail-right p{
    padding:8px 0px 0px 0px;
    font-size:13px;
}
.detail-right a i{
    background-color: #fff;
    padding: 8px;
    width: 30px;
    border-radius:50%;
    color:#24DEE1;
}
.arrow-right:before{
    content: " ";
    position:absolute;
    left: -40px;
    top:50%;
    transform: translateY(-50%);
    border:20px solid transparent;
    border-right-color:#24DEE1;
}
.arrow-left:after{
    content: " ";
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -40px;
    border:20px solid transparent;
    border-left-color:#24DEE1; 
    z-index: 1;
}
@media(min-width : 320px) and (max-width : 360px){
   .arrow-right:before
   {
        left: 50%;
        transform: translateX(-50%);
        top: -40px;
        border:20px solid transparent;
        border-bottom-color:#24DEE1;
    } 
    .arrow-left:after{
        top: unset;
        bottom: -60px;
        right: unset;
        left: 50%;
        transform: translateY(-50%);
        border:20px solid transparent;
        border-top-color:#24DEE1; 
    } 
}