<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customized Bootstrap Theme</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Custom Theme Colors */
:root {
--primary-color: #4CAF50; /* Green */
--secondary-color: #FF5722; /* Orange */
}
body {
background-color: #f8f9fa;
}
.btn-custom {
background-color: var(--primary-color);
color: white;
border-radius: 30px;
}
.btn-custom:hover {
background-color: var(--secondary-color);
}
.form-control-custom {
border: 2px solid var(--primary-color);
border-radius: 10px;
}
.form-control-custom:focus {
border-color: var(--secondary-color);
box-shadow: 0 0 5px var(--secondary-color);
}
h1, h2 {
color: var(--primary-color);
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand Logo</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="container mt-5">
<h1>Welcome!</h1>
<button class="btn btn-custom">Get Started</button>
<h2 class="mt-5">Sign Up</h2>
<form>
<input type="text" class="form-control form-control-custom" placeholder="Name">
<input type="email" class="form-control form-control-custom mt-3" placeholder="Email">
<input type="password" class="form-control form-control-custom mt-3" placeholder="Password">
<button type="submit" class="btn btn-custom mt-3">Submit</button>
</form>
</div>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter