Bootstrap

Bootstrap Theme Company

Bootstrap Theme: Company

“Company” is a classic Bootstrap-based theme designed for corporate websites, startups, agencies, or small businesses. It emphasizes clarity, usability, and responsive design, making your company’s online presence professional and polished.


Key Features

  • Responsive layout: Works seamlessly on desktops, tablets, and mobiles.

  • Navigation bar: Fixed-top navbar with smooth scrolling.

  • Hero section: Large header/banner with call-to-action buttons.

  • Services section: Showcases key offerings with icons or images.

  • About section: Company info with text and images.

  • Portfolio or Projects: Grid layout to highlight work samples.

  • Team members: Profiles with photos and social links.

  • Contact form: Simple and functional contact section.

  • Footer: Includes social media links and copyright.


Example Structure (Bootstrap 5)

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Company Bootstrap Theme</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Company</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#hero">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>

<!-- Hero Section -->
<header id="hero" class="bg-primary text-white text-center py-5" style="margin-top:56px;">
<div class="container">
<h1>Welcome to Our Company</h1>
<p class="lead">We provide top-notch services to grow your business</p>
<a href="#services" class="btn btn-light btn-lg">Learn More</a>
</div>
</header>

<!-- Services Section -->
<section id="services" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Our Services</h2>
<div class="row text-center">
<div class="col-md-4">
<div class="mb-3">
<i class="bi bi-briefcase" style="font-size:2rem;"></i>
</div>
<h5>Consulting</h5>
<p>Expert advice tailored to your business needs.</p>
</div>
<div class="col-md-4">
<div class="mb-3">
<i class="bi bi-bar-chart" style="font-size:2rem;"></i>
</div>
<h5>Marketing</h5>
<p>Strategies that deliver measurable results.</p>
</div>
<div class="col-md-4">
<div class="mb-3">
<i class="bi bi-gear" style="font-size:2rem;"></i>
</div>
<h5>Development</h5>
<p>Custom software solutions for your business.</p>
</div>
</div>
</div>
</section>

<!-- About Section -->
<section id="about" class="bg-light py-5">
<div class="container">
<h2 class="text-center mb-4">About Us</h2>
<div class="row align-items-center">
<div class="col-md-6">
<p>Our company has been providing excellent services for over 10 years. We focus on quality, innovation, and customer satisfaction.</p>
<p>Our team is passionate about helping businesses succeed and grow through tailored solutions.</p>
</div>
<div class="col-md-6">
<img src="https://via.placeholder.com/500x300" class="img-fluid rounded" alt="About Image" />
</div>
</div>
</div>
</section>

<!-- Portfolio Section -->
<section id="portfolio" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Our Portfolio</h2>
<div class="row g-4">
<div class="col-md-4">
<img src="https://via.placeholder.com/350x200" class="img-fluid rounded" alt="Project 1" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/350x200" class="img-fluid rounded" alt="Project 2" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/350x200" class="img-fluid rounded" alt="Project 3" />
</div>
</div>
</div>
</section>

<!-- Contact Section -->
<section id="contact" class="bg-light py-5">
<div class="container">
<h2 class="text-center mb-4">Contact Us</h2>
<form class="mx-auto" style="max-width:600px;">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input id="name" type="text" class="form-control" placeholder="Your Name" />
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input id="email" type="email" class="form-control" placeholder="Your Email" />
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea id="message" rows="4" class="form-control" placeholder="Your Message"></textarea>
</div>
<button type="submit" class="btn btn-primary w-100">Send Message</button>
</form>
</div>
</section>

<!-- Footer -->
<footer class="bg-dark text-white text-center py-3">
&copy; 2025 Company. All rights reserved.
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Bootstrap Icons CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
</body>
</html>


How to Use?

  1. Copy this code into an .html file.

  2. Replace placeholder images and text with your company info.

  3. Customize colors by overriding Bootstrap CSS or adding your own styles.

  4. Add or remove sections as needed.


Where to Find More “Company” Themes?

Leave a Reply

Your email address will not be published. Required fields are marked *