<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <div class="container"> <div class="row ng-scope"> <div class="col-md-3 col-md-push-9"> <h4>Results <span class="fw-semi-bold">Filtering</span></h4> <p class="text-muted fs-mini">Listed content is categorized by the following groups:</p> <ul class="nav nav-pills nav-stacked search-result-categories mt"> <li><a href="#">Friends <span class="badge">34</span></a> </li> <li><a href="#">Pages <span class="badge">9</span></a> </li> <li><a href="#">Images</a> </li> <li><a href="#">Groups</a> </li> <li><a href="#">Globals <span class="badge">18</span></a> </li> </ul> </div> <div class="col-md-9 col-md-pull-3"> <p class="search-results-count">About 94 700 000 (0.39 sec.) results</p> <section class="search-result-item"> <a class="image-link" href="#"><img class="image" src="https://bootdey.com/img/Content/avatar/avatar1.png"> </a> <div class="search-result-item-body"> <div class="row"> <div class="col-sm-9"> <h4 class="search-result-item-heading"><a href="#">john doe</a></h4> <p class="info">New York, NY 20188</p> <p class="description">Not just usual Metro. But something bigger. Not just usual widgets, but real widgets. Not just yet another admin template, but next generation admin template.</p> </div> <div class="col-sm-3 text-align-center"> <p class="value3 mt-sm">$9, 700</p> <p class="fs-mini text-muted">PER WEEK</p><a class="btn btn-primary btn-info btn-sm" href="#">Learn More</a> </div> </div> </div> </section> <section class="search-result-item"> <a class="image-link" href="#"><img class="image" src="https://bootdey.com/img/Content/avatar/avatar6.png"> </a> <div class="search-result-item-body"> <div class="row"> <div class="col-sm-9"> <h4 class="search-result-item-heading"><a href="#">john doe</a> <span class="badge bg-danger fw-normal pull-right">Best Deal!</span></h4> <p class="info">Los Angeles, NY 20188</p> <p class="description">You will never know exactly how something will go until you try it. You can think three hundred times and still have no precise result.</p> </div> <div class="col-sm-3 text-align-center"> <p class="value3 mt-sm">$10, 300</p> <p class="fs-mini text-muted">PER WEEK</p><a class="btn btn-primary btn-info btn-sm" href="#">Learn More</a> </div> </div> </div> </section> <section class="search-result-item"> <a class="image-link" href="#"><img class="image" src="https://bootdey.com/img/Content/avatar/avatar2.png"> </a> <div class="search-result-item-body"> <div class="row"> <div class="col-sm-9"> <h4 class="search-result-item-heading"><a href="#">john doe</a></h4> <p class="info">New York, NY 20188</p> <p class="description">The Great Prince of the Grand Duchy of Lithuania he had stopped the invasion to Europe of Timur (Tamerlan) from Asia heading a big Army of Belarusians, Lithuanians.</p> </div> <div class="col-sm-3 text-align-center"> <p class="value3 mt-sm">$3, 200</p> <p class="fs-mini text-muted">PER WEEK</p><a class="btn btn-info btn-sm" href="#">Learn More</a> </div> </div> </div> </section> <section class="search-result-item"> <a class="image-link" href="#"><img class="image" src="https://bootdey.com/img/Content/avatar/avatar3.png"> </a> <div class="search-result-item-body"> <div class="row"> <div class="col-sm-9"> <h4 class="search-result-item-heading"><a href="#">john doe</a></h4> <p class="info">Minsk, NY 20188</p> <p class="description">Yes you can! Further more, you should! It let's you create really beautiful images either for elements or for the entire background.</p> </div> <div class="col-sm-3 text-align-center"> <p class="value3 mt-sm">$2, 400</p> <p class="fs-mini text-muted">PER MONTH</p><a class="btn btn-info btn-sm" href="#">Learn More</a> </div> </div> </div> </section> <div class="text-align-center"> <ul class="pagination pagination-sm"> <li class="disabled"><a href="#">Prev</a> </li> <li class="active"><a href="#">1</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="#">Next</a> </li> </ul> </div> </div> </div> </div>

body{margin-top:20px; background-color: #eee; } .search-result-categories>li>a { color: #b6b6b6; font-weight: 400 } .search-result-categories>li>a:hover { background-color: #ddd; color: #555 } .search-result-categories>li>a>.glyphicon { margin-right: 5px } .search-result-categories>li>a>.badge { float: right } .search-results-count { margin-top: 10px } .search-result-item { padding: 20px; background-color: #fff; border-radius: 4px } .search-result-item:after, .search-result-item:before { content: " "; display: table } .search-result-item:after { clear: both } .search-result-item .image-link { display: block; overflow: hidden; border-top-left-radius: 4px; border-bottom-left-radius: 4px } @media (min-width:768px) { .search-result-item .image-link { display: inline-block; margin: -20px 0 -20px -20px; float: left; width: 200px } } @media (max-width:767px) { .search-result-item .image-link { max-height: 200px } } .search-result-item .image { max-width: 100% } .search-result-item .info { margin-top: 2px; font-size: 12px; color: #999 } .search-result-item .description { font-size: 13px } .search-result-item+.search-result-item { margin-top: 20px } @media (min-width:768px) { .search-result-item-body { margin-left: 200px } } .search-result-item-heading { font-weight: 400 } .search-result-item-heading>a { color: #555 } @media (min-width:768px) { .search-result-item-heading { margin: 0 } }