<div class="row">
    <div class="col-xl-9 col-lg-8">
        <div class="card">
            
          <div class=" p-4 row justify-content-center">
              <div class="col-xl-8">
                  <div>
                      <div class="row align-items-center">
                          <div class="col-4">
                              <div>
                                  <h5 class="mb-0">Blog List</h5>
                              </div>
                          </div>

                          <div class="col-8">
                              <div class="float-right">
                                  
                                  <ul class="nav nav-pills">
                                      <li class="nav-item">
                                          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">View :</a>
                                      </li>
                                      <li class="nav-item" data-toggle="tooltip" data-placement="top" title="List">
                                          <a class="nav-link active" href="blog-list.html">
                                              <i class="mdi mdi-format-list-bulleted"></i>
                                          </a>
                                      </li>
                                      <li class="nav-item" data-toggle="tooltip" data-placement="top" title="Grid">
                                          <a class="nav-link" href="blog-grid.html">
                                              <i class="mdi mdi-view-grid-outline"></i>
                                          </a>
                                      </li>
                                  </ul>
                              </div>
                          </div>
                      </div>
                      <!-- end row -->

                      <hr class="mb-4">

                      <div>
                          <h5><a href="blog-details.html" class="text-dark">Beautiful Day with Friends</a></h5>
                          <p class="text-muted">10 Apr, 2020</p>
                          
                          <div class="position-relative mb-3">
                              <img src="assets/images/small/img-2.jpg" alt="" class="img-thumbnail">
                          </div>

                          <ul class="list-inline">
                              <li class="list-inline-item mr-3">
                                  <a href="#" class="text-muted">
                                      <i class="bx bx-purchase-tag-alt align-middle text-muted mr-1"></i> Project
                                  </a>
                              </li>
                              <li class="list-inline-item mr-3">
                                  <a href="#" class="text-muted">
                                      <i class="bx bx-comment-dots align-middle text-muted mr-1"></i> 12 Comments
                                  </a>
                              </li>
                          </ul>
                          <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, aliquam quaerat voluptatem. Ut enim ad minima veniam, quis</p>

                          <div>
                              <a href="#" class="text-primary">Read more <i class="mdi mdi-arrow-right"></i></a>
                          </div>
                      </div>
                      
                      <hr class="my-5">

                      <div>
                          <h5><a href="blog-details.html" class="text-dark">Project discussion with team</a></h5>
                          <p class="text-muted">24 Mar, 2020</p>
                          
                          <div class="position-relative mb-3">
                              <img src="assets/images/small/img-6.jpg" alt="" class="img-thumbnail">
                              
                              <div class="blog-play-icon">
                                  <a href="javascript: void(0);" class="avatar-sm d-block mx-auto">
                                      <span class="avatar-title rounded-circle font-size-18"><i class="mdi mdi-play"></i></span>
                                  </a>
                              </div>
                          </div>

                          <ul class="list-inline">
                              <li class="list-inline-item mr-3">
                                  <a href="#" class="text-muted">
                                      <i class="bx bx-purchase-tag-alt align-middle text-muted mr-1"></i> Development
                                  </a>
                              </li>
                              <li class="list-inline-item mr-3">
                                  <a href="#" class="text-muted">
                                      <i class="bx bx-comment-dots align-middle text-muted mr-1"></i> 08 Comments
                                  </a>
                              </li>
                          </ul>

                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores similique sunt in culpa qui officia deserunt mollitia animi est</p>

                          <div>
                              <a href="#" class="text-primary">Read more <i class="mdi mdi-arrow-right"></i></a>
                          </div>
                      </div>

                      <hr class="my-5">

                      <div class="text-center">
                          <ul class="pagination justify-content-center pagination-rounded">
                              <li class="page-item disabled">
                                  <a href="#" class="page-link"><i class="mdi mdi-chevron-left"></i></a>
                              </li>
                              <li class="page-item">
                                  <a href="#" class="page-link">1</a>
                              </li>
                              <li class="page-item active">
                                  <a href="#" class="page-link">2</a>
                              </li>
                              <li class="page-item">
                                  <a href="#" class="page-link">3</a>
                              </li>
                              <li class="page-item">
                                  <a href="#" class="page-link">...</a>
                              </li>
                              <li class="page-item">
                                  <a href="#" class="page-link">10</a>
                              </li>
                              <li class="page-item">
                                  <a href="#" class="page-link"><i class="mdi mdi-chevron-right"></i></a>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>
        </div>
    </div>

    <div class="col-xl-3 col-lg-4">
        <div class="card">
            <div class="card-body p-4">
                <div class="search-box">
                    <p class="text-muted">Search</p>
                    <div class="position-relative">
                        <input type="text" class="form-control rounded bg-light border-light" placeholder="Search...">
                        <i class="mdi mdi-magnify search-icon"></i>
                    </div>
                </div>

                <hr class="my-4">

                <div>
                    <p class="text-muted">Categories</p>

                    <ul class="list-unstyled font-weight-medium">
                        <li><a href="#" class="text-muted py-2 d-block"><i class="mdi mdi-chevron-right mr-1"></i> Design</a></li>
                        <li><a href="#" class="text-muted py-2 d-block"><i class="mdi mdi-chevron-right mr-1"></i> Development <span class="badge badge-soft-success badge-pill float-right ml-1 font-size-12">04</span></a></li>
                        <li><a href="#" class="text-muted py-2 d-block"><i class="mdi mdi-chevron-right mr-1"></i> Business</a></li>
                        <li><a href="#" class="text-muted py-2 d-block"><i class="mdi mdi-chevron-right mr-1"></i> Project</a></li>
                        <li><a href="#" class="text-muted py-2 d-block"><i class="mdi mdi-chevron-right mr-1"></i> Travel<span class="badge badge-soft-success badge-pill ml-1 float-right font-size-12">12</span></a></li>
                    </ul>
                </div>

                <hr class="my-4">

                <div>
                    <p class="text-muted">Archive</p>

                    <ul class="list-unstyled font-weight-medium">
                        <li><a href="#" class="text-muted py-2 d-block"><i class="mdi mdi-chevron-right mr-1"></i> 2020 <span class="badge badge-soft-success badge-pill float-right ml-1 font-size-12">03</span></a></li>
                        <li><a href="#" class="text-muted py-2 d-block"><i class="mdi mdi-chevron-right mr-1"></i> 2019 <span class="badge badge-soft-success badge-pill float-right ml-1 font-size-12">06</span></a></li>
                        <li><a href="#" class="text-muted py-2 d-block"><i class="mdi mdi-chevron-right mr-1"></i> 2018 <span class="badge badge-soft-success badge-pill float-right ml-1 font-size-12">05</span></a></li>
                    </ul>
                </div>

                <hr class="my-4">

                <div>
                    <p class="text-muted mb-2">Popular Posts</p>

                    <div class="list-group list-group-flush">
                        
                        <a href="#" class="list-group-item text-muted py-3 px-2">
                            <div class="media align-items-center">
                                <div class="mr-3">
                                    <img src="assets/images/small/img-7.jpg" alt="" class="avatar-md h-auto d-block rounded">
                                </div>
                                <div class="media-body overflow-hidden">
                                    <h5 class="font-size-13 text-truncate">Beautiful Day with Friends</h5>
                                    <p class="mb-0 text-truncate">10 Apr, 2020</p>
                                </div>
                            </div>
                        </a>
                    
                        <a href="#" class="list-group-item text-muted py-3 px-2">
                            <div class="media align-items-center">
                                <div class="mr-3">
                                    <img src="assets/images/small/img-4.jpg" alt="" class="avatar-md h-auto d-block rounded">
                                </div>
                                <div class="media-body overflow-hidden">
                                    <h5 class="font-size-13 text-truncate">Drawing a sketch</h5>
                                    <p class="mb-0 text-truncate">24 Mar, 2020</p>
                                </div>
                            </div>
                        </a>
                    
                        <a href="#" class="list-group-item text-muted py-3 px-2">
                            <div class="media align-items-center">
                                <div class="mr-3">
                                    <img src="assets/images/small/img-6.jpg" alt="" class="avatar-md h-auto d-block rounded">
                                </div>
                                <div class="media-body overflow-hidden">
                                    <h5 class="font-size-13 text-truncate">Project discussion with team</h5>
                                    <p class="mb-0 text-truncate">11 Mar, 2020</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <hr class="my-4">

                <div>
                    <p class="text-muted mb-1">Tags</p>

                    <ul class="list-inline widget-tag">
                        <li class="list-inline-item"><a href="#" class="badge badge-light font-size-12 mt-2">Design</a></li>
                        <li class="list-inline-item"><a href="#" class="badge badge-light font-size-12 mt-2">Development</a></li>
                        <li class="list-inline-item"><a href="#" class="badge badge-light font-size-12 mt-2">Business</a></li>
                        <li class="list-inline-item"><a href="#" class="badge badge-light font-size-12 mt-2">Project</a></li>
                        <li class="list-inline-item"><a href="#" class="badge badge-light font-size-12 mt-2">Travel</a></li>
                        <li class="list-inline-item"><a href="#" class="badge badge-light font-size-12 mt-2">Lifestyle</a></li>
                        <li class="list-inline-item"><a href="#" class="badge badge-light font-size-12 mt-2">Photography</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- end card -->
    </div>
</div>
