Steps to run the code
- Create theHTML File
- Write Html, css and js code.
- Save the HTML File
- and Open the HTML File in a Web Browser
Example: Here’s a simple example on Bootstrap’s Navigation Bar! It makes a responsive bar that resize for screens sizes. It has a logo, a toggler button, and a menu with links that collapsible. All styled with Bootstrap’s ready-to-use classes for a uniform look on any device or browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Bootstrap Example | NavbRar</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg
bg-dark navbar-dark px-2">
<div class="container-fluid">
<a class="navbar-brand"
href="#">GFG</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 ms-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="#">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>
</div>
</nav>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
Getting Started with Bootstrap
Bootstrap is a popular and open-source tool for building websites and web apps that work great on any device. It provides a range of ready-to-use HTML, CSS, and JavaScript components. Like buttons, forms, and navigation bar, etc. These elements can be put right into any project.
Bootstrap’s main use is to make building user interfaces easier and quicker. It provides uniform and flexible tools that suits various devices and screen sizes. Bootstrap uses a flexible grid system. This system allows developers to make layouts that adjust themselves to different screen sizes.
Contact Us