HTML + Bootstrap Starting Template

Published by Ryner SG on

Before delving into the template below, ensure you are familiar with HTML and Bootstrap. A brief overview of HTML can be found here [https://rynerworld.com/what-is-html/], and for Bootstrap, here’s the overview and main link [https://getbootstrap.com/].

Here is a code snippet or template that utilizes HTML and Bootstrap. Please note that in this example, we utilized the CDN version of the assets instead of importing them locally. For faster and better performance, we recommend including your assets within your local files

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap HTML Template</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

  <!-- Header -->
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Your Website</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <!-- Main Content -->
  <main class="container">
    <div class="row">
      <div class="col">
        <h1>Welcome to Your Website</h1>
        <p>This is a Bootstrap-powered website template.</p>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-light text-center py-3">
    <p>&copy; 2024 Your Website. All rights reserved.</p>
  </footer>

  <!-- Bootstrap JS and jQuery (Optional) -->
  <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.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

HAPPY CODING!!!!

Categories: Code SnippetsWhat is?
Ryner Galaus

Ryner SG

An ordinary person with a tiny brain hoping to be useful in his own way. A homebody hoping to one day create and build his dreams while in service to people. An underachiever who was once called nobody slowly growing up. A web developer learning and earning his way through life. Ryner is what my family and friends call me, and I hope you do too. By the way, I am also affiliated with Frontrow International, so for inquiries or orders, message me.

0 Comments

Leave a Reply

Avatar placeholder

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

Related Posts

Code Snippets PHP What is?

Shortcode function to capture GitHub files using API

Here is a code snippet or template that utilizes HTML and Bootstrap. Please note that in this example, we utilized the CDN version of the assets instead of importing them locally.

Bootstrap Code Snippets HTML Material Design What is?

Bootstrap VS Material Design

This aims to offer an in-depth comparison between Plain Bootstrap and Material Design Bootstrap, aiding developers in understanding the nuances of each framework and guiding their selection based on project requirements. As coding aficionados say, "Choosing the right framework is like selecting the perfect tool from a Swiss army knife – it makes your job easier and more efficient!"

Code Snippets What is?

What is HTML?

Staying updated and maintaining our understanding of HTML is essential. HTML stands for Hypertext Markup Language. This is the most basic, and the most important language a developer should be aware of.