<div class="card mb-3 mb-xl-0">
                                    <img class="card-img-top img-fluid" src="assets/images/small/img-1.jpg" alt="img-1">
                                    <div class="card-body">
                                        <h5 class="card-title mb-2">Card title</h5>
                                        <p class="card-text text-muted">
                                            Some quick example text to build on the card title and make
                                            up the bulk of the card's content. With supporting text below as
                                            a natural lead-in to additional content.
                                        </p>
                                        <a href="javascript:void(0);" class="btn btn-primary">Button</a>
                                    </div> <!-- end card body -->
                                </div> <!-- end card -->

                                <div class="card mb-3">
                                    <img class="card-img-top img-fluid" src="assets/images/small/img-2.jpg" alt="img-2">
                                    <div class="card-body">
                                        <h5 class="card-title mb-2">Card title</h5>
                                        <p class="card-text text-muted">Some quick example text to build on the card title.</p>
                                    </div> <!-- end card body -->
                                    <ul class="list-group list-group-flush text-muted">
                                        <li class="list-group-item text-muted">Dapibus ac facilisis in</li>
                                    </ul>
                                    <div class="card-body">
                                        <a href="javascript:void(0);" class="card-link text-primary">Card link</a>
                                        <a href="javascript:void(0);" class="card-link text-primary">Another link</a>
                                    </div>
                                </div> <!-- end card -->
                                <div class="card mb-3 mb-xl-0">
                                    <img class="card-img-top img-fluid" src="assets/images/small/img-4.jpg" alt="img-4">
                                    <div class="card-body">
                                        <p class="card-text text-muted">
                                            Some quick example text to build on the card title and make
                                            up the bulk of the card's content. With supporting text below as
                                            a natural lead-in to additional content.
                                        </p>
                                        <a href="javascript:void(0);" class="btn btn-primary">Button</a>
                                    </div> <!-- end card body -->
                                </div> <!-- end card -->

                                <div class="card mb-3 mb-xl-0">
                                    <div class="card-body">
                                        <h5 class="card-title mb-0">Card title</h5>
                                    </div>
                                    <img class="img-fluid" src="assets/images/small/img-5.jpg" alt="img-5">
                                    <div class="card-body">
                                        <p class="card-text text-muted">Some quick example text to build on the card title.</p>
                                        <a href="javascript:void(0);" class="card-link text-primary">Card link</a>
                                        <a href="javascript:void(0);" class="card-link text-primary">Another link</a>
                                    </div> <!-- end card body -->
                                </div> <!-- end card -->
                            
                        

                            
                                <div class="card card-body">
                                    <h5 class="card-title mb-1">Special title treatment</h5>
                                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    <a href="javascript: void(0);" class="btn btn-primary">Go somewhere</a>
                                </div> <!-- end card-->

                                <div class="card card-body">
                                    <h5 class="card-title mb-1">Special title treatment</h5>
                                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    <a href="javascript: void(0);" class="btn btn-primary">Go somewhere</a>
                                </div> <!-- end card-->                                                      
                            
                        

                            
                                <div class="card">
                                    <div class="card-header">Featured</div>
                                    <div class="card-body">
                                        <h5 class="card-title mb-1">Special title treatment</h5>
                                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                        <a href="javascript: void(0);" class="btn btn-primary">Go somewhere</a>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                                <div class="card">
                                    <div class="card-header">Quote</div>
                                    <div class="card-body">
                                        <blockquote>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                            <footer>Someone famous in <cite>Source Title</cite></footer>
                                        </blockquote>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                                <div class="card">
                                    <div class="card-header">Featured</div>
                                    <div class="card-body">
                                        <a href="javascript: void(0);" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                    <div class="card-footer text-muted">2 days ago</div>
                                </div> <!-- end card-->                                                          
                            
                        

                            
                                <div class="card text-bg-primary">
                                    <div class="card-body">
                                        <h5 class="card-title text-white  mb-2">Special title treatment</h5>
                                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                        <a href="javascript: void(0);" class="btn btn-light btn-sm">Button</a>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                                
                                <div class="card bg-secondary text-white">
                                    <div class="card-body">
                                        <blockquote>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                            <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                        </blockquote>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                                
                                <div class="card text-bg-success">
                                    <div class="card-body">
                                        <blockquote>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                            <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                        </blockquote>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                                
                                <div class="card text-bg-info">
                                    <div class="card-body">
                                        <blockquote>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                            <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                        </blockquote>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                                
                                <div class="card text-bg-warning">
                                    <div class="card-body">
                                        <blockquote>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                            <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                        </blockquote>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                                
                                <div class="card text-bg-danger">
                                    <div class="card-body">
                                        <blockquote>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                            <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                        </blockquote>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->                                                    
                            
                        

                            
                                <div class="card border-primary border">
                                    <div class="card-body">
                                        <h5 class="card-title text-primary mb-2">Special title treatment</h5>
                                        <p class="card-text">With supporting text below as a natural lead-in to
                                            additional content.</p>
                                        <a href="javascript: void(0);" class="btn btn-primary btn-sm">Button</a>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                                
                                <div class="card border-secondary border">
                                    <div class="card-body">
                                        <h5 class="card-title mb-2">Special title treatment</h5>
                                        <p class="card-text">With supporting text below as a natural lead-in to
                                            additional content.</p>
                                        <a href="javascript: void(0);" class="btn btn-secondary btn-sm">Button</a>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                                
                                <div class="card border-success border">
                                    <div class="card-body">
                                        <h5 class="card-title mb-2 text-success">Special title treatment</h5>
                                        <p class="card-text">With supporting text below as a natural lead-in to
                                            additional content.</p>
                                        <a href="javascript: void(0);" class="btn btn-success btn-sm">Button</a>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->                                                 
                            
                        

                            
                                <div class="card">
                                    <div class="row g-0">
                                        <div class="col-md-4">
                                            <img src="assets/images/small/img-1.jpg" class="img-fluid rounded-start h-100" alt="img-1">
                                        </div>
                                        <div class="col-md-8">
                                            <div class="card-body">
                                                <h5 class="card-title mb-2">Card title</h5>
                                                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                            </div> <!-- end card-body-->
                                        </div> <!-- end col -->
                                    </div> <!-- end row-->
                                </div> <!-- end card-->

                                <div class="card">
                                    <div class="row g-0">
                                        <div class="col-md-8">
                                            <div class="card-body">
                                                <h5 class="card-title mb-2">Card title</h5>
                                                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                            </div> <!-- end card-body -->
                                        </div> <!-- end col -->
                                        <div class="col-md-4">
                                            <img src="assets/images/small/img-2.jpg" class="img-fluid rounded-end h-100" alt="img-2">
                                        </div> <!-- end col -->
                                    </div> <!-- end row-->
                                </div> <!-- end card -->                                                          
                            
                        

                            
                                <div class="card">
                                    <img src="assets/images/small/img-1.jpg" class="card-img-top" alt="img-1">
                                    <div class="card-body">
                                        <h5 class="card-title mb-2">Card with stretched link</h5>
                                        <a href="javascript:void(0);" class="btn btn-primary mt-2 stretched-link">Go somewhere</a>
                                    </div> <!-- end card-body -->
                                </div> <!-- end card -->
                                
                                <div class="card">
                                    <img src="assets/images/small/img-2.jpg" class="card-img-top" alt="img-2">
                                    <div class="card-body">
                                        <h5 class="card-title mb-2"><a href="javascript:void(0);" class="text-primary stretched-link">Card with stretched link</a></h5>
                                        <p class="card-text">
                                            Some quick example text to build on the card up the bulk of the card's content.
                                        </p>
                                    </div> <!-- end card-body -->
                                </div> <!-- end card -->
                                
                                <div class="card">
                                    <img src="assets/images/small/img-3.jpg" class="card-img-top" alt="img-3">
                                    <div class="card-body">
                                        <h5 class="card-title mb-2">Card with stretched link</h5>
                                        <a href="javascript:void(0);" class="btn btn-primary mt-2 stretched-link">Go somewhere</a>
                                    </div> <!-- end card-body -->
                                </div> <!-- end card -->
                                
                                <div class="card">
                                    <img src="assets/images/small/img-4.jpg" class="card-img-top" alt="img-4">
                                    <div class="card-body">
                                        <h5 class="card-title mb-2"><a href="javascript:void(0);" class="stretched-link">Card with stretched link</a></h5>
                                        <p class="card-text">
                                            Some quick example text to build on the card up the bulk of the card's content.
                                        </p>
                                    </div> <!-- end card-body -->
                                </div> <!-- end card -->                                                             
                            
                        

                            
                                <div class="card-group">
                                    <div class="card d-block">
                                        <img class="card-img-top" src="assets/images/small/img-1.jpg" alt="img-1">
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Card title</h5>
                                            <p class="card-text">This is a wider card with supporting text below as a
                                                natural lead-in to additional content. This content is a little bit
                                                longer.</p>
                                            <p class="card-text">
                                                <small class="text-muted">Last updated 3 mins ago</small>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="card d-block">
                                        <img class="card-img-top" src="assets/images/small/img-2.jpg" alt="img-2">
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Card title</h5>
                                            <p class="card-text">This card has supporting text below as a natural
                                                lead-in to additional content.</p>
                                            <p class="card-text">
                                                <small class="text-muted">Last updated 3 mins ago</small>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="card d-block">
                                        <img class="card-img-top" src="assets/images/small/img-3.jpg" alt="img-3">
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Card title</h5>
                                            <p class="card-text">This is a wider card with supporting text below as a
                                                natural lead-in to additional content. This card has even longer content
                                                than the first to show that equal height action.</p>
                                            <p class="card-text">
                                                <small class="text-muted">Last updated 3 mins ago</small>
                                            </p>
                                        </div>
                                    </div>
                                </div> <!-- end card-group-->
                            
                        

                            
                                <div class="card">
                                    <img src="assets/images/small/img-4.jpg" class="card-img-top" alt="img-4">
                                    <div class="card-body">
                                        <h5 class="card-title mb-2">Card title</h5>
                                        <p class="card-text">This is a longer card with supporting text below as
                                            a natural lead-in to additional content. This content is a little
                                            bit longer.</p>
                                        <p class="card-text">
                                            <small class="text-muted">Last updated 3 mins ago</small>
                                        </p>
                                    </div><!-- end card-body -->
                                </div><!-- end card -->

                                <div class="card">
                                    <img src="assets/images/small/img-3.jpg" class="card-img-top" alt="img-3">
                                    <div class="card-body">
                                        <h5 class="card-title mb-2">Card title</h5>
                                        <p class="card-text">This is a longer card with supporting text below as
                                            a natural lead-in to additional content. This content is a little
                                            bit longer.</p>
                                        <p class="card-text">
                                            <small class="text-muted">Last updated 3 mins ago</small>
                                        </p>
                                    </div><!-- end card-body -->
                                </div><!-- end card -->

                                <div class="card">
                                    <img src="assets/images/small/img-2.jpg" class="card-img-top" alt="img-2">
                                    <div class="card-body">
                                        <h5 class="card-title mb-2">Card title</h5>
                                        <p class="card-text">This is a longer card with supporting text below as
                                            a natural lead-in to additional content. This content is a little
                                            bit longer.</p>
                                        <p class="card-text">
                                            <small class="text-muted">Last updated 3 mins ago</small>
                                        </p>
                                    </div><!-- end card-body -->
                                </div><!-- end card -->