In Bootstrap 5, breadcrumbs are used to indicate the current page's location within a navigational hierarchy. They visually show the path from the homepage to the current page and allow users to easily navigate back to previous pages.

• Breadcrumbs are built using an ordered list (<ol>) with the class .breadcrumb.
• Each breadcrumb item is wrapped inside an <li> element with the class .breadcrumb-item.
• The current page (or the active item) has an additional class .active, and by default, it’s styled to look inactive (i.e., not clickable).

Bootstrap 5’s grid system is a powerful and flexible way to layout and align content. It uses a 12-column layout that can be adjusted for different screen sizes (responsive design) using predefined classes. The grid system is built on flexbox and provides an easy way to structure your page.

• Containers: These are the wrappers for the rows and columns. Bootstrap has two types: .container (fixed-width) and .container-fluid (full-width).
• Rows: A row (.row) is a horizontal group of columns.
• Columns: Columns are the building blocks of the grid. You define columns with the class .col and use numbers to specify how many of the 12 available columns the element should span (e.g., .col-6 for half-width columns).

There are three main ways to add CSS to an HTML file, each with its own use cases depending on the project needs and scope:

• CSS is applied directly to HTML elements using the style attribute.
• Example:

  <p style="color: blue; font-size: 18px;">This is a blue paragraph.</p>

• Use Case: Best for quick, small changes to a specific element. However, it's not ideal for larger projects since it can become difficult to maintain and violates the separation of content and style.

In CSS, specificity determines which styles are applied when multiple CSS rules target the same HTML element. It’s like a ranking system that helps the browser decide which rule to use when there’s a conflict.

The more specific a rule is, the higher priority it has over other, less specific rules. CSS specificity is calculated based on the types of selectors used in a rule.

Selectors in CSS can have different "weights" based on their type. The more specific a selector, the higher its weight, and the more likely it is to be applied over other styles.

Here’s how different selectors contribute to specificity:

The CSS Box Model is a fundamental concept that defines how elements are structured and rendered on a webpage. It describes the space that each HTML element occupies, consisting of four layers. Here’s a breakdown:

1. Content: This is the actual content inside the element, such as text, images, or other media.

2. Padding: Padding is the space between the content and the element’s border. It creates an area inside the element around the content, but it does not have a background (unless specified).

3. Border: This is a line that surrounds the padding and the content. It can be styled (e.g., thickness, color, solid or dashed lines). Borders can be removed entirely, or customized as needed.

4. Margin: Margin is the space outside the border, creating a gap between this element and others around it. Margins are transparent and can collapse (e.g., if two elements have margins next to each other).

How It Works: High-Level Summary

The cost of building this app is approximately €4500. The cost of running the app with subscription services is €22/mo.

Purpose: To grant the Node.js application access to Google Sheets and Google Docs for creating and managing documents.

Process:

Bootstrap 5, like its predecessors, uses data attributes extensively to enhance the functionality and behavior of its components. Data attributes in Bootstrap serve as hooks for JavaScript plugins and provide configuration options for various components. Here are some common ways Bootstrap 5 utilizes data attributes:

1. Data Toggle Attributes: Bootstrap components often use data attributes to toggle the visibility or behavior of certain elements. For example, the data-bs-toggle attribute is commonly used to toggle the visibility of dropdowns, modals, tooltips, and collapsible elements.

   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
     Launch demo modal
   </button>

The HTML5 data-* attribute provides a way to store custom data directly within HTML elements. Before its introduction, developers often resorted to using non-standard attributes or JavaScript hacks to achieve similar functionality. Let's explore an example to illustrate the difference:

Before HTML5 data-* attribute: Suppose you have a list of products displayed on a web page, and you want to associate additional information, such as a product ID or category, with each product element. Before HTML5, developers might have used non-standard attributes like class or id to store this information:

<ul>
  <li class="product" data-product-id="123">Product A</li>
  <li class="product" data-product-id="456">Product B</li>
  <li class="product" data-product-id="789">Product C</li>