This page demonstrates the foundation of a basic Bootstrap-powered webpage. The page title is set to "Basic Bootstrap Page", and it includes links to the Bootstrap CSS and JavaScript files. These links ensure the page benefits from Bootstrap's built-in styling and interactive components, enabling responsive and visually appealing design elements with minimal effort.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Bootstrap Page</title>
<!-- Link to Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Bootstrap</h1>
<p>Learn the basic building blocks</p>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
.mwd-content-main-banner {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
}
.mwd-content-main-banner-overlay {
min-height: 320px;
background: linear-gradient(to top, rgba(9, 32, 63, 0.6) 0%, rgba(83, 120, 149, 0.1) 100%);
padding: 6rem 2rem 2em 2em;
}
.mwd-content-main-banner h1 {
color: #ffffff;
font-size: 2.4em;
text-transform: uppercase;
margin: 0;
}
.mwd-content-main-banner h2 {
color: #ffffff;
font-size: 1.4em;
margin: 2px 0 0 0;
}