Last active
February 23, 2024 08:23
-
-
Save marcop135/472ab18aa56c69880c0474196728f7a0 to your computer and use it in GitHub Desktop.
Bootstrap 5 custom starter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Bootstrap demo</title> | |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> | |
<link rel="stylesheet" href="styles.css"> | |
</head> | |
<body> | |
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> | |
<div class="container"> | |
<a class="navbar-brand" href="#">Navbar</a> | |
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0"> | |
<li class="nav-item"> | |
<a class="nav-link active" aria-current="page" href="#">Home</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="#">Link</a> | |
</li> | |
<li class="nav-item dropdown"> | |
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> | |
Dropdown | |
</a> | |
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"> | |
<li><a class="dropdown-item" href="#">Action</a></li> | |
<li><a class="dropdown-item" href="#">Another action</a></li> | |
<li><hr class="dropdown-divider"></li> | |
<li><a class="dropdown-item" href="#">Something else here</a></li> | |
</ul> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link disabled">Disabled</a> | |
</li> | |
</ul> | |
<form class="d-flex" role="search"> | |
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> | |
<button class="btn btn-outline-success" type="submit">Search</button> | |
</form> | |
</div> | |
</div> | |
</nav> | |
<div class="container my-5"> | |
<h1>Hello, world!</h1> | |
<div class="col-lg-8 px-0"> | |
<p class="fs-5">You've successfully loaded up the Bootstrap starter example. It includes <a href="https://getbootstrap.com/">Bootstrap 5</a> via the <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr CDN</a> and includes an additional CSS and JS file for your own code.</p> | |
<p>Feel free to download or copy-and-paste any parts of this example.</p> | |
<hr class="col-1 my-4"> | |
<a href="https://getbootstrap.com" class="btn btn-primary">Read the Bootstrap docs</a> | |
<a href="https://github.com/twbs/examples" class="btn btn-secondary">View on GitHub</a> | |
</div> | |
</div> | |
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> | |
<script src="main.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment