Bootstrap Service Card with Shipping and Support Information

The Free Bootstrap Service Card with Shipping and Support Information is a versatile and customizable template designed to showcase services while providing essential details about shipping and support. 

Bootstrap 5 Component Update

We have updated this Bootstrap component to Bootstrap 5.3.3 and BSB Framework 2.0.4. We have rechecked this Bootstrap snippet on May 3, 2024.

Best Ready to Use Web Themes & Templates

Bootstrap Service Card with Shipping and Support Information

Bootstrap 5 is a robust framework that helps developers quickly create visually attractive, user-friendly web elements. One of the resources available is the Free Bootstrap Service Card with Shipping and Support Information. This versatile template improves the presentation of services while providing essential details about shipping and support.

Comprehensive Service Presentation

A service card at the template’s core presents vital information about each service, including a title, description, and optional icon. This structured layout ensures that users can quickly understand the value proposition of each service and make informed decisions.

Shipping Information

The template includes shipping information, such as shipping methods, delivery times, and shipping costs, in addition to service details. The shipping information allows users to understand the logistics of receiving the product or service, which can influence their purchasing decisions.

Support Information

The template also provides support information, including contact details, support hours, and available channels for assistance. The support information reassures users that help is readily available should they encounter any issues or have questions about the product or service.

Features

  • Bootstrap 5
  • BSB Framework
  • HTML5 & CSS3
  • W3C Valid
  • Bootstrap Icons
  • Clean Snippet
  • Commented Code
  • Responsive Layout
  • Easy to Use
  • SEO Optimized
  • Cross Browser Compatible

Preview

<!-- Service 10 - Bootstrap Brain Component -->
<section class="bg-light py-3 py-md-5 py-xl-8">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
        <h2 class="mb-4 display-5 text-center">Experience Excellence</h2>
        <p class="text-secondary mb-5 text-center lead fs-4">We stand out as the epitome of customer-centricity, offering the best benefits like free shipping and 24/7 support.</p>
        <hr class="w-50 mx-auto mb-5 mb-xl-9 border-dark-subtle">
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="container-fluid">
          <div class="row gy-3 gy-md-4">
            <div class="col-12 col-lg-4">
              <div class="card border-dark">
                <div class="card-body p-3 p-md-4 p-xxl-5 d-flex justify-content-center align-items-center">
                  <div class="me-3 text-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-basket2-fill" viewBox="0 0 16 16">
                      <path d="M5.929 1.757a.5.5 0 1 0-.858-.514L2.217 6H.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h.623l1.844 6.456A.75.75 0 0 0 3.69 15h8.622a.75.75 0 0 0 .722-.544L14.877 8h.623a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1.717L10.93 1.243a.5.5 0 1 0-.858.514L12.617 6H3.383zM4 10a1 1 0 0 1 2 0v2a1 1 0 1 1-2 0zm3 0a1 1 0 0 1 2 0v2a1 1 0 1 1-2 0zm4-1a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1" />
                    </svg>
                  </div>
                  <div>
                    <h4 class="mb-1">Free Shipping</h4>
                    <p class="m-0 text-secondary">Eliminates shipping costs</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-4">
              <div class="card border-dark">
                <div class="card-body p-3 p-md-4 p-xxl-5 d-flex justify-content-center align-items-center">
                  <div class="me-3 text-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-chat-left-heart-fill" viewBox="0 0 16 16">
                      <path d="M2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm6 3.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132" />
                    </svg>
                  </div>
                  <div>
                    <h4 class="mb-1">24/7 Support</h4>
                    <p class="m-0 text-secondary">Better shopping experience</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-4">
              <div class="card border-dark">
                <div class="card-body p-3 p-md-4 p-xxl-5 d-flex justify-content-center align-items-center">
                  <div class="me-3 text-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-folder-symlink-fill" viewBox="0 0 16 16">
                      <path d="M13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2l.04.87a2 2 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14h10.348a2 2 0 0 0 1.991-1.819l.637-7A2 2 0 0 0 13.81 3M2.19 3q-.362.002-.683.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293L7.586 3zm9.608 5.271-3.182 1.97c-.27.166-.616-.036-.616-.372V9.1s-2.571-.3-4 2.4c.571-4.8 3.143-4.8 4-4.8v-.769c0-.336.346-.538.616-.371l3.182 1.969c.27.166.27.576 0 .742" />
                    </svg>
                  </div>
                  <div>
                    <h4 class="mb-1">Free Returns</h4>
                    <p class="m-0 text-secondary">Customer's peace of mind</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/utilities/margin/margin.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/utilities/padding/padding.css">
  • Use in personal projects
  • Customize the template files
  • Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • Free Updates
  • Access to all 8 Pro Templates
  • Access to all 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute

BB Startup

Freelancer

$49

3 Months Access

8 Pro BS Templates

51 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 3 Months Free Updates
  • Access to all our 8 Pro Templates
  • Access to all our 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute

BB Club

Agency

$149

12 Months Access

8 Pro BS Templates

51 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 12 Months Free Updates
  • Access to all our 8 Pro Templates
  • Access to all our 51 Pro Components
  • Use in SaaS
  • Resell & Redistribute