Logistic

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Logistic is a website template for freight, shipping and logistics companies, built on Bootstrap 5, with a red and navy design and a full-width hero slider. The layout is responsive and mobile-ready. There are seven pages: home, about, services, blog, blog post (one page for each of the eight posts), contact and elements.

The home page has the hero slider with three slides, three services (air, ocean and ground shipping), an about block, a red band on shipment tracking and door-to-door delivery, a quote request form, a video band whose play button opens the video in a dialog, client testimonials and a map with the company address. The about page repeats the about block, the red band, the video and the testimonials, and the services page lists the three services with the quote request form. The blog lists eight posts over two pages with a sidebar for search, categories, recent posts, tags, a photo feed and a newsletter form, and each post has an author box, share links, comments and a comment form. The contact page has a contact form, the contact details and a map that loads on click, and the elements page shows typography, buttons, lists, tables, progress bars, form elements and an image gallery with a lightbox. The header stays at the top as you scroll, and a back-to-top button appears further down. Use Logistic for a freight forwarder, a shipping company or a transport and logistics business.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used a trimmed Bootstrap 5.0.0-beta1 and jQuery 1.12.4), compiled from Sass with only the parts the pages use, and plain JavaScript with no jQuery. Swiper 14 replaces Slick on the hero and testimonial sliders, PhotoSwipe 5 replaces Magnific Popup on the elements gallery, a video dialog plays the video, a keyboard-operable menu panel replaces SlickNav, and native selects replace Nice Select; Owl Carousel, WOW, CounterUp, Waypoints, ajaxChimp, jQuery Form, jQuery Validate and Modernizr are gone. Lucide SVG icons replace Font Awesome 5, Themify and Linearicons, with a small Font Awesome 7 Brands subset for the social logos (the Twitter bird is now the X logo). npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 4.94 MB and 103 requests to 0.91 MB and 21 requests, and the contact page from 2.53 MB and 68 requests to 0.33 MB and 10 requests. Every photo has an AVIF version with a JPEG or PNG fallback, real dimensions and lazy loading below the first screen, and the first hero photo is preloaded. The download is 4.23 MB (it was 6.71 MB): images the pages never used are removed, and it includes the Sass sources, the build scripts and the PHP mailers.
• No third-party requests: Raleway is self-hosted, the icons are local SVG, and a Google Analytics 4 snippet stays commented out until you add your own ID. The maps on the home, about, services and contact pages load OpenStreetMap only after a visitor clicks “Show map”, and the video loads from YouTube’s privacy-enhanced player only after a click. Before, every page loaded Google Fonts, six pages loaded an analytics tag, and four pages loaded Google Maps.
• Working forms: the quote request form on the home and services pages, the contact form, the blog comment form and the sidebar newsletter form each send through their own handler in php/, built on a safe mailer with validation, a spam trap and an in-page message. Before, the quote form had no action, field names or labels, the comment and newsletter forms posted nowhere, and the contact script put visitor input in the mail headers.
• Distinct demo content: the three hero slides have their own headings, the blog has eight distinct posts (the earlier release repeated one headline five times), each with its own page, two list pages and working search, category and tag filters, and the two testimonials are different client quotes with initials avatars (both slides showed the same quote). The footer has logistics links and copy in place of a business-directory blurb, the contact details are fictional, and the quote form’s “Leight” field is now “Length”. Every button, card and footer link goes somewhere; most went nowhere before.
• Accessibility: a skip link, a main landmark and one h1 per page, a real menu button whose panel closes with Esc, keyboard and first-tap touch access to the Blog submenu, labelled form fields, named icon links, visible focus rings, 44 px tap areas, reduced-motion support and WCAG AA text contrast: black text on the bright red band, a deeper red behind white button labels and date badges, darker red text and greys, a shade behind the page banner titles and testimonial arrows that are easy to see (they were nearly invisible).
• Fixed: on phones and tablets a grey menu bar covered the logo (the menu button is now the red three-bar button in the white header); keyboard focus made the red buttons disappear, and they now stay visible with a focus ring; the video band’s photo was stretched to the window’s shape and now keeps its proportions; the elements page scrolled sideways on tablets, its selects showed a double box and its “Right Aligned” sample was left-aligned; every page had the same title and an empty description; and the documentation page is rebuilt from the README in place of the old jQuery page.