Website template

Modern Business

A multipurpose Bootstrap full website template created by Start Bootstrap

Agency · Free

Modern Business

Pages

Screenshots of the live demo, page by page. Scroll inside a page to see all of it.

/startbootstrap-modern-business/Modern Business - Start Bootstrap Template
Modern Business website template, /startbootstrap-modern-business/ page, part 1Modern Business website template, /startbootstrap-modern-business/ page, part 2
/startbootstrap-modern-business/index.htmlModern Business - Start Bootstrap Template
Modern Business website template, /startbootstrap-modern-business/index.html page, part 1Modern Business website template, /startbootstrap-modern-business/index.html page, part 2
/startbootstrap-modern-business/about.htmlModern Business - Start Bootstrap Template
Modern Business website template, /startbootstrap-modern-business/about.html page, part 1Modern Business website template, /startbootstrap-modern-business/about.html page, part 2
/startbootstrap-modern-business/contact.htmlModern Business - Start Bootstrap Template
Modern Business website template, /startbootstrap-modern-business/contact.html page, part 1

Design breakdown

An AI reading of this template's design: colors, type, spacing, sections and signature details. Ottermind starts from it when you use the template.

Overall

multipurpose business site, clean and professional, medium density, light/dark contrast

Palette

background #ffffff; surfaces [#f8f9fa, #212529, #0d6efd]; text #212529; muted text #ffffff; primary #0d6efd; accents []

Type

headings system-ui, 700, sentence-case; body system-ui, 20px; scale h1 48px, h2 32px, p 20px

Shape & spacing

button/card radius 8px, no borders, subtle shadows on cards, section spacing 80px, content width 1272px

Sections (top to bottom)
  • Header — fixed navigation bar with logo and menu, dark background, white text
  • Hero — full-width section with dark background, headline, subheading, two CTA buttons, and placeholder image (600×400)
  • Features — light background, four-column layout with icons, titles, and paragraphs, centered alignment
  • Testimonial — centered quote in italic, attributed to a name and title with avatar placeholder
  • Blog preview — three-column card grid with images (600×350), category tags, titles, excerpts, author info, and read time
  • Newsletter — blue full-width section with headline, subtext, email input, and "Sign up" button
  • Footer — dark background, copyright text, and links to Privacy, Terms, Contact
Signature details
  • Blue accent color used consistently for CTAs, icons, and highlights
  • Rounded corners on all interactive elements
  • Subtle drop shadows on cards for depth
  • Consistent use of system-ui font across all text
  • Fixed header with transparent overlay effect on scroll
  • Responsive grid layouts with adaptive card heights
Other pages
  • /startbootstrap-modern-business/about.html: Mission statement with centered heading, paragraph, and CTA; two alternating image-text sections with 600×400 placeholders

Template details

Category
Agency
Built with
Bootstrap, HTML5
License
MIT
Author
Start Bootstrap
Price
Free
  • bootstrap
  • bootstrap-4
  • bootstrap-5
  • bootstrap-5-template
  • bootstrap-template
  • bootstrap-theme
  • bootstrap4
  • bootstrap5
  • bootstrap5-template
  • css
  • free
  • html

Original design by Start Bootstrap, listed on Start Bootstrap. Ottermind does not copy the template's code; it builds a new site from the brief.

The brief Ottermind starts from

It opens in Studio as a draft — add your brand, audience and pages before you send.

Build a agency website inspired by the "Modern Business" template. Reference brief: A multipurpose Bootstrap full website template created by Start Bootstrap Style and features to reflect: bootstrap, bootstrap-4, bootstrap-5, bootstrap-5-template, bootstrap-template, bootstrap-theme. Use original copy and imagery for my brand rather than the reference's placeholder content.

How to use this template

  1. 1

    Click “Use this template” to open it in Ottermind Studio with its brief filled in.

  2. 2

    Add your brand, audience, pages and content to the brief.

  3. 3

    Ottermind builds a new site inspired by this design — keep editing it in the chat.