Bootstrap Snippets

Create a basic Bootstrap webpage

Bootstrap

Learn the basic building blocks

About this page

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.

HTML code explanation:

  • The HTML title of the page is set as "Basic Bootstrap Page".
  • The Bootstrap CSS and JS files are linked to ensure the page has the Bootstrap styling and interactivity.
HTML
<!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>
CSS
.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;
}