Navbar

Definition: A navigation bar is a section of a web page that contains links to other pages or sections.

Purpose: Helps users navigate the website easily.

A horizontal navigation bar with links.

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Card

Definition: A card is a container for content such as text, images, or actions, often used for grouping related information.

Purpose: Used to display content like profiles, products, or articles in a visually distinct way.

A card layout to display content like profile, product, or article.

<div class="card">
  <h3>Card Title</h3>
  <p>Some descriptive text.</p>
</div>

Form Layout

Definition: A form is a section of a document that collects user input.

Purpose: Used to gather information from users, such as names, messages, or other data.

A basic user input form with input fields and a submit button.

<form>
  <label>Name:</label><br>
  <input type="text" placeholder="Enter name"><br>
  <label>Message:</label><br>
  <textarea rows="3"></textarea><br>
  <button>Submit</button>
</form>

Name:

Message:

Submit

Grid Layout

Definition: A grid layout arranges content in rows and columns using CSS Flexbox or Grid.

<label>Message:</label><br> <textarea rows="3"></textarea><br> <button>Submit</button> </form>

Name:

Message:

Submit

Grid Layout

Definition: A grid layout arranges content in rows and columns using CSS Flexbox or Grid.

Purpose: Used to organize content side by side or in a structured layout for better visual hierarchy.

Using a flexbox-based layout for placing content side by side.

<div class="row">
  <div class="col">Box 1</div>
  <div class="col">Box 2</div>
  <div class="col">Box 3</div>
</div>

Footer

Definition: A footer is a section at the bottom of a page, often containing copyright or navigation links.

Purpose: Used to provide additional information, links, or legal notices at the end of a web page.

A footer is placed at the bottom of the page and contains copyright or navigation.

<footer>
  Copyright © 2025
</footer>

Button

Definition: The <button> element represents a clickable button.

Purpose: Used to trigger actions, submit forms, or interact with users.

<button>Click Me!</button>

Click Me!

Modal

Definition: A modal is a dialog box/popup window that is displayed on top of the current page.

Purpose: Used to display messages, forms, or additional content without leaving the page.

<div class="modal show d-block" tabindex="-1">This is a modal!</div>

Alert

Definition: An alert is a message box used to display important information to the user.

Purpose: Used to warn, inform, or get confirmation from the user.

<div class="alert alert-danger">This is an alert!</div>

Navigation Bar

Definition: A navigation bar is a section of a web page that contains links to other pages or sections.

Purpose: Helps users navigate the website easily.

<nav class="navbar navbar-expand-lg" style="background-color: #0f7482;">
  <a class="nav-link text-white" href="#">Home</a>
  <a class="nav-link text-white" href="#">About</a>
  <a class="nav-link text-white" href="#">Contact</a>
</nav>

Accordion

Definition: An accordion is a vertically stacked list of items that can be expanded to reveal more content.

Purpose: Used to show/hide content and save space on the page.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Click to expand
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Accordion content goes here.
      </div>
    </div>
  </div>
</div>