Bootstrap 5 Features Section With Box and Images

Bootstrap 5 Features Section With Box and Images



<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 5 Features with Boxed Images</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <div class="lc-block">
                    <span editable="inline" class="small mt-4 d-block">LOREM IPSUM</span>
                    <h2 editable="inline" class="display-2 mb-0"><b>Features</b></h2>
                    <p editable="inline"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id
                        <br>ligula malesuada placerat sit amet quis enim.</p>
                </div><!-- /lc-block -->
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="p-lg-5 p-4 shadow">
                    <div class="lc-block mb-4"><img alt="" class="img-fluid"
                            src="https://cdn.livecanvas.com/media/svg/undraw/product-teardown.svg" style="height:10vh">


                        <h4 class="my-3" editable="inline"></h4>
                        <p editable="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a
                            lacus est.&nbsp;</p>


                        <a class="btn btn-outline-primary" href="#" role="button">Read more</a>
                    </div><!-- /lc-block -->
                </div>
            </div><!-- /col -->
            <div class="col-md-4">
                <div class="p-lg-5 p-4 shadow">
                    <div class="lc-block mb-4">
                        <img alt="" class="img-fluid" src="https://cdn.livecanvas.com/media/svg/undraw/selfie.svg"
                            style="height:10vh">


                        <h4 class="my-3" editable="inline"></h4>
                        <p editable="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a
                            lacus est.&nbsp;</p>


                        <a class="btn btn-outline-primary" href="#" role="button">Read more</a>
                    </div><!-- /lc-block -->
                </div>
            </div><!-- /col -->
            <div class="col-md-4">
                <div class="p-lg-5 p-4 shadow">
                    <div class="lc-block mb-4">
                        <img alt="" class="img-fluid" src="https://cdn.livecanvas.com/media/svg/undraw/add-files.svg"
                            style="height:10vh">

                        <h4 class="my-3" editable="inline"></h4>
                        <p editable="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a
                            lacus est.&nbsp;</p>

                        <a class="btn btn-outline-primary" href="#" role="button">Read more</a>
                    </div><!-- /lc-block -->
                </div>
            </div><!-- /col -->
        </div>
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="p-lg-5 p-4 shadow">
                    <div class="lc-block mb-4">
                        <img alt="" class="img-fluid" src="https://cdn.livecanvas.com/media/svg/undraw/delivery.svg"
                            style="height:10vh">

                        <h4 class="my-3" editable="inline"></h4>
                        <p editable="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a
                            lacus est.&nbsp;</p>

                        <a class="btn btn-outline-primary" href="#" role="button">Read more</a>
                    </div><!-- /lc-block -->
                </div>
            </div><!-- /col -->
            <div class="col-md-4">
                <div class="p-lg-5 p-4 shadow">
                    <div class="lc-block mb-4">
                        <img alt="" class="img-fluid" src="https://cdn.livecanvas.com/media/svg/undraw/no-data.svg"
                            style="height:10vh">

                        <h4 class="my-3" editable="inline"></h4>
                        <p editable="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a
                            lacus est.&nbsp;</p>

                        <a class="btn btn-outline-primary" href="#" role="button">Read more</a>
                    </div><!-- /lc-block -->
                </div>
            </div><!-- /col -->
            <div class="col-md-4">
                <div class="p-lg-5 p-4 shadow">
                    <div class="lc-block mb-4">
                        <img alt="" class="img-fluid" src="https://cdn.livecanvas.com/media/svg/undraw/select.svg"
                            style="height:10vh">

                        <h4 class="my-3" editable="inline"></h4>
                        <p editable="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a
                            lacus est.&nbsp;</p>


                        <a class="btn btn-outline-primary" href="#" role="button">Read more</a>
                    </div><!-- /lc-block -->
                </div>
            </div><!-- /col -->
        </div>
    </div>
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
    </script>
</body>

</html>
                                            
                                        

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;800&display=swap');

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif
}

                                        

<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
</script>

                                        

This snippet provides a visually appealing and responsive features section using Bootstrap 5. It showcases your product's key features in a clean and organized manner, complete with informative text and eye-catching images.

Key Features:

  • Responsive Design: Ensures optimal viewing on all devices, from desktops to smartphones.
  • Customizable Layout: Easily modify the number, size, and arrangement of feature boxes.
  • Image Integration: Seamlessly incorporate relevant images to enhance visual appeal.
  • Descriptive Text: Provide clear and concise explanations of each feature.
  • Bootstrap 5 Styling: Leverage Bootstrap's pre-built components and styles for a consistent and modern look.

Implementation:

  • Include Bootstrap 5 CSS and JavaScript: Add the necessary Bootstrap files to your HTML page.
  • Create the Feature Section Container: Use Bootstrap's grid system to create a container for the feature boxes.
  • Build the Feature Boxes: Utilize Bootstrap's card components to structure each feature box, including a heading, image, and descriptive text.
  • Customize the Appearance: Modify the CSS to match your brand's colors, fonts, and overall aesthetic.
  • Add Images: Replace the placeholder images with your own high-quality visuals.

Building Blocks for Your Web Pages

Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.

Bootstrap

Browse Snippets

Tailwind

Browse Snippets
See More Categories

DocsAllOver

Where knowledge is just a click away ! DocsAllOver is a one-stop-shop for all your software programming needs, from beginner tutorials to advanced documentation

Get In Touch

We'd love to hear from you! Get in touch and let's collaborate on something great

Copyright copyright © Docsallover - Your One Shop Stop For Documentation