BOOTSTRAP 5 LANDING PAGE

Make RapidTow
your own.

How to customize your towing services, call access, and non-urgent inquiries.

Back to Template ↗

01. Quick start

Open index.html in a modern browser. Keep the complete assets folder beside it. There is no build process or installation step.

For a localhost preview, run python3 -m http.server 8000 from the extracted template folder and open http://localhost:8000. Clipboard support commonly requires HTTPS or localhost; manual copying is also supported.

02. Files & dependencies

  • index.html — the full landing page, FAQ content, and policy dialogs.
  • README.html — this guide.
  • LICENSES.txt — dependency notices.
  • assets/css/style.css — palette, typography, layouts, and responsive rules.
  • assets/js/main.js — settings, navigation, filters, and inquiry draft behavior.
  • assets/images/tow-truck.webp, operator.webp, and mark.svg — local photography and logo mark.
  • assets/vendor/ — Bootstrap 5.3.8 CSS, JavaScript bundle, and MIT license.

All dependencies and page imagery are local. Fonts use Arial/Helvetica system fallbacks. Original SVG symbols are embedded in the HTML; no icon service or font download is needed.

03. Business details & owner copy

Edit the RapidTow text logo, hero headline, descriptions, owner story, process, coverage, FAQs, contacts, footer, and HTML metadata. The page speaks in the owner’s voice; setup and starter-content guidance stays in this guide.

The starter business is a fictional towing-company concept based in Riverside, California. Replace the reserved phone (951) 555-0164 and tel:+19515550164 throughout the information bar, navigation, hero, service links, inquiry sidebar, contact area, mobile action bar, and policies.

Replace hello@rapidtow.example in visible links, policies, and RAPIDTOW_SETTINGS.recipient. The reserved .example address cannot receive customer messages. No street address, customer yard access, or walk-in facility is asserted.

The page says “Call for current availability.” It does not assert 24/7 service, specific opening hours, instant dispatch, fixed ETAs, certifications, insurer relationships, or fleet size. Add only accurate information for your business and keep availability wording consistent everywhere.

04. Services, filters & quote wording

The six starter services are local towing, flatbed transport, scheduled vehicle moves, recovery inquiries, jump-start assistance, and flat-tire assistance. Verify that your people, equipment, vehicle scope, and operating permissions support each service before public use. Remove any unsupported service.

Cards use data-category="towing" or data-category="roadside". Buttons use data-filter values all, towing, and roadside. The filter only shows or hides service descriptions; it does not check availability, coverage, equipment, or a vehicle’s suitability.

Planned-service links use data-service values matching the Service select exactly. They preselect the service, invalidate an old draft, preserve unrelated entries, and navigate to the form. Recovery and immediate roadside links use the phone destination instead.

No rates are invented. Pricing is discussed directly according to vehicle, distance, access, and service scope. If you add rates, explain what is included and review all related quote, FAQ, and policy wording. Do not add unsupported mileage, storage, cancellation, insurance, or response-time promises.

05. Service areas & contact availability

Riverside, Jurupa Valley, Norco, Corona, and Moreno Valley are starter areas to ask about. Verify and replace them with your actual coverage. The page asks visitors to call to confirm their pickup and destination.

The coverage list is HTML text. There is no embedded map, location detection, GPS collection, route calculation, live truck tracking, distance-based pricing, or automated coverage lookup. Detailed pickup instructions are arranged directly.

Keep call access primary. If you add an address, explain its purpose accurately; do not imply customers can visit or leave vehicles without confirmed arrangements. If you add staffed hours, update the top bar, contact section, policies, and FAQs together.

06. Palette, typography & responsive layout

Edit the variables at the top of assets/css/style.css: --navy: #101b2b, --navy-soft: #18273b, --amber: #ffc247, --paper: #f6f4ee, --ink: #142237, and --slate: #58697c. Amber call buttons use dark navy text.

Body copy is 18px desktop and 17px phones. Hero supporting copy is 20px desktop, 19px tablet, and 18px phones. Service descriptions, FAQs, contacts, and policy body copy use at least 16px. Labels use 15px, form controls 16px, and secondary help generally 12–13px. Footer links use 14px.

Hero headings scale separately, generally 74–98px desktop and 55–84px mobile. Section headings generally use 38–61px desktop and 36–43px phones. Preserve readability when editing the headline and do not let large type clip.

The desktop hero overlays a photograph with a dark gradient; mobile places the text above the photograph. Services form three columns on desktop, two on tablet, and one on mobile. Coverage, owner content, and inquiry layouts stack on smaller screens. FAQs use two columns on desktop and one on mobile. Check 320px, 390px, tablet, and desktop widths after edits.

07. Photographs, logo & SVG symbols

Replace tow-truck.webp and operator.webp with optimized authorized business photographs. Update alt text and image dimensions. The supplied photographs are starter visual assets, not evidence of a verified fleet, employee, customer vehicle, or completed tow.

Photos use object-fit: cover with responsive focal points. Adjust object-position to keep a cab, vehicle, or face in view without stretching. The hero loads eagerly; supporting photography loads lazily.

The RapidTow name is editable text; mark.svg is the logo symbol and favicon. Inline SVG symbols at the top of the HTML supply arrows, phone, checks, and truck graphics. Keep symbol IDs unique and update matching use href references if renaming them.

09. Inquiry settings & actual functionality

Set RAPIDTOW_SETTINGS.recipient at the top of assets/js/main.js to a working business address. Confirm timezone: 'America/Los_Angeles'. Keep visible email links consistent.

Name, valid email, and service are required. Phone, vehicle, general pickup/destination areas, preferred date/time, and message are optional. Past dates are rejected in the configured business timezone. Opening hours, live availability, route distances, pickup validity, equipment suitability, and pricing are not calculated or validated.

Prepare email draft displays a visible draft for review. It does not open an email app automatically, contact the business, dispatch a truck, store form entries on a backend, reserve a time, authorize work, or take payment. Open email app uses mailto:; the visitor must send the email manually.

Copy draft uses the clipboard API when available. If unavailable or denied, the text is selected and manual-copy instructions appear. An email handler is needed for mailto; long messages may exceed an email app’s URL limit, so copying remains available.

Editing a field or choosing a new service invalidates the old draft. Reset clears the form, draft, and feedback. Form values stay in browser memory until the visitor chooses to email or copy them. Use the page for non-urgent inquiries only; immediate requests should be handled by phone.

10. Customer stories & operating practices

Daniel Mercer, Alicia Bennett, and Owen Clarke and their quotes are invented starter content for this template concept, not verified customer feedback. Replace them with authorized customer testimonials or remove the section before public use. There is no star rating or aggregate review metadata.

Verify the owner story, service scope, quote-before-agreement wording, process, coverage, vehicle types, and any timing statements against your actual operation. Do not add experience statistics, fleet counts, credentials, guaranteed results, heavy-duty capabilities, insurer partnerships, or arrival-time claims without support.

11. FAQs, policy dialogs & footer

The ten numbered FAQs use Bootstrap collapse. All answers start closed; one answer opens at a time. When adding a question, use a unique answer ID with matching data-bs-target and aria-controls, and keep data-bs-parent="#faqGroup".

Privacy and Terms of Use open scrollable Bootstrap dialogs with close controls, Escape, focus trapping, and focus return. Review their text for your actual hosting, email handling, data retention, cookies, quote, and service practices. Update policies if you add analytics, third-party tools, live dispatch, payment, or a backend.

Footer policy buttons align with other links. The copyright omits a year. Keep control labels, button resets, visible focus, and mobile clearance when editing.

12. Metadata, versions & launch checklist

Edit the HTML title, description, theme color, favicon, contacts, and any future social metadata. Custom CSS and JavaScript initially use ?v=1.0. Bump affected tokens after changes and distribute matching HTML and assets together.

  • Replace reserved contacts and verify all call destinations.
  • Set the working inquiry recipient and correct timezone.
  • Verify service scope, coverage, and availability wording.
  • Replace starter photos, testimonials, and owner practices.
  • Review Privacy and Terms of Use for your actual business.
  • Check mobile call access, filters, service preselection, FAQs, and dialogs.
  • Prepare, copy, edit, reset, and manually send a test inquiry with your own email app.
  • Review desktop, tablet, 390px, 320px, short screens, and keyboard use.
  • Keep Bootstrap’s dependency notices with distributed source.

13. Troubleshooting & dependency licenses

Missing styles or photos: keep the complete asset folder and case-sensitive relative paths. Menu, FAQs, or dialogs not opening: confirm the local Bootstrap bundle loads before main.js.

Copy unavailable: use HTTPS/localhost or the manual-copy fallback. Email app not opening: configure an email handler or copy the draft into your email client.

Wrong service selected: match data-service to a select option exactly. Anchor hidden by header: review row measurement after changing the header structure. Older appearance: check matching asset versions and actual cache behavior.

Bootstrap 5.3.8 is MIT licensed. Keep assets/vendor/BOOTSTRAP-LICENSE.txt and LICENSES.txt with the source. System fonts require no additional font files.