DEV Community: Narmatha

Bootstrap

Narmatha — Mon, 03 Aug 2026 05:42:24 +0000

*What is Bootstrap?
*
Bootstrap is a free, open-source CSS framework that helps developers build responsive and attractive websites quickly. It also includes JavaScript components for common UI elements.

Instead of writing all your CSS from scratch, Bootstrap provides ready-made styles and components.

For example, instead of creating a button style yourself, you can write:

Click Me

Bootstrap automatically makes it look like a modern button.

*How does Bootstrap help?
*
Bootstrap saves time and makes web development easier in several ways:

Responsive design: Websites automatically adjust to phones, tablets, and desktops using Bootstrap's grid system.

Pre-built components: Includes buttons, forms, navigation bars, cards, modals, alerts, tables, and more.

Consistent design: Your pages have a clean and professional appearance without extensive custom CSS.

Faster development: You can build interfaces much more quickly by using Bootstrap's classes.

Cross-browser compatibility: Bootstrap is designed to work well across modern web browsers.
Example

Without Bootstrap:

Submit

You would need to write CSS:

button {
background: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}

With Bootstrap:

Submit

No extra CSS is needed for the basic styling.

Bootstrap Grid System

Bootstrap uses a 12-column grid to create responsive layouts.

*Example:
*

Left
Right

On medium and larger screens, each column takes half the width. On smaller screens, they stack automatically.

*Common Bootstrap Components
*
Some of the most commonly used components are:

Buttons
Navigation bars (Navbar)
Forms
Cards
Tables
Alerts
Badges
Modals (pop-up dialogs)
Carousels (image sliders)
Dropdown menus

CSS POSITIONING

Narmatha — Tue, 28 Jul 2026 08:10:19 +0000

What is CSS Position?

-CSS position is a property that tells the browser how and where to place an HTML element on a webpage.

Simple definition:

The position property controls the location of an element on the webpage.

*Types of CSS Position
*
There are 5 types of CSS positioning:

1.static
2.relative
3.absolute
4.fixed
5.sticky

1. position: relative

The element starts in its normal position.

Then you can move it using top, left, right, or bottom.

Example
.box {
position: relative;
left: 20px;
}
How it works

Before:

[BOX]

After:

 [BOX]

The box moves 20 pixels to the right, but its original space is still kept.

Use
Small adjustments
Creating a parent for absolutely positioned elements

2. position: absolute

The element is removed from the normal layout.

It is placed relative to its nearest parent that has a position other than static.

Example
.parent {
position: relative;
}

.box {
position: absolute;
top: 20px;
right: 20px;
}
HOW ITS WORKS
+------------------+
| BOX |
| |
| |
+------------------+

The box is placed exactly where you tell it.

Use
Badges
Popups
Icons
Labels on images

3.position: sticky

The element behaves like relative at first.

When you scroll to it, it sticks to the top (or another specified position).

header {
position: sticky;
top: 0;
}

Before scrolling:

Header

Content

*After scrolling:
*
Header ← stays at the top

Content keeps moving
Use when:
Navigation bars
Table headers
Side menus

Easy Way to Remember

relative - Move a little from the normal position.
absolute - Place the element exactly where you want inside its parent.
sticky - Move normally, then stick to the top when scrolling.

**Real-Life Example

**Imagine a classroom:
Relative → One student slides their chair a little but keeps their place.
Absolute → A teacher hangs a poster at a specific spot on the wall.
Sticky → A notice board scrolls with the page until it reaches the top, then it stays visible

TOSS CONFERENCE DAY-2 LEARN

Narmatha — Sun, 26 Jul 2026 18:10:28 +0000

WHAT IS OPENTELEMETRY?
OpenTelemetry (OTel) is an open-source observability framework that helps you collect, process, and export telemetry data from your applications and infrastructure. It is a project of the Cloud Native Computing Foundation.

SIGNAL OF OPENTELEMETRY

1.Traces

Show the path of a request through multiple services.
Help you identify where latency or failures occur.

Example:

User Request
│
▼
API Gateway
│
▼
Auth Service
│
▼
Payment Service
│
▼
Database

Each step is a span, and together they form a trace.

2.Metrics

Numeric measurements over time.
Examples:
CPU usage
Memory usage
Request rate
Error count
Response time

3.Logs

Timestamped records of events.

Example:

2026-07-25 10:15:23 ERROR Payment failed: Timeout

KEY PRPPERITIES OF OPENTELEMETRY:

1.Vendor-Neutral
Works with many observability platforms (such as Prometheus, Grafana, Jaeger, Datadog, and Splunk).
Avoids vendor lock-in.

2.Open Source
Developed under the Cloud Native Computing Foundation.
Free to use and supported by a large community.

3.Unified Observability
Collects all three types of telemetry:
.Traces
.Metrics
.Logs

4.Automatic and Manual Instrumentation
Supports automatic instrumentation with little or no code changes.
Allows manual instrumentation for custom business logic.

5.Multi-Language Support
Supports many programming languages, including:
Java
Python
Go
.NET
Node.js
C++
PHP
Ruby
Rust

6.Context Propagation
Preserves request context across multiple services.
Makes it possible to trace a request end-to-end in distributed systems.

7.Extensible and Modular
Components can be customized or extended.
Supports custom exporters, processors, and receivers.

8.OpenTelemetry Collector
A standalone service that:
Receives telemetry
Processes and filters data
Batches data
Exports it to one or more monitoring backends

9.Standardized APIs and SDKs
Provides consistent APIs and SDKs across supported languages.
Simplifies instrumentation and improves portability.

10.High Scalability
Suitable for cloud-native applications, microservices, containers, and large distributed systems.
Handles telemetry from many services efficiently

HTML FORMS

Narmatha — Thu, 16 Jul 2026 14:33:38 +0000

WHAT IS HTML FORM?

An HTML form is used to collect information from users and send the data to a server for processing. It is created using the

tag and contains different form elements like text fields, checkboxes, radio buttons, and buttons

USAGE OF THE HTML FORMS

1.User Registration
Collects user information such as name, email, and password.
2.Login Pages
Used to enter usernames and passwords for authentication.
3.Contact Forms
Allows users to send messages, queries, or feedback.
4.Search Forms
Used to search information on websites.
5.Online Shopping
Collects customer details, addresses, and order information.
6.Surveys and Feedback
Helps collect opinions and responses from users.

Common HTML Form Elements

Text Field ()

Used to enter single-line text such as name, username, or address.
Example:

Password Field ()

Used to enter passwords. The entered characters are hidden.
Example:

Radio Button ()

Allows the user to select only one option from a group.
Example:
Male

Checkbox ()

Allows the user to select multiple options.
Example:
Music

Dropdown List () Provides a list of options from which the user can select one. Example:
India
USA

Textarea ()</p> <p>Used to enter multiple lines of text, such as comments or messages.<br> Example:<br> <textarea>

Submit Button ()

Used to submit form data to the server.
Example:

File Upload ()

Allows users to upload files like images or documents.
Example:

HTML ATTRIBUTES

Narmatha — Thu, 16 Jul 2026 14:23:46 +0000

WHAT IS HTML ATTRIBUTES

HTML attributes are special properties that provide additional information about an HTML element or modify its behavior and appearance. They are written inside the opening tag of an HTML element and usually have the format attribute="value".

*href Attribute *

The href (Hypertext Reference) attribute is used to specify the destination URL of a hyperlink. It is mainly used with the (anchor) tag to link one web page to another, or to files, email addresses, or sections within the same page.

Syntax
Link Text
Example
Visit Google

Common HTML Attributes

id **– Gives an HTML element a unique name or identifier. It is used to target a specific element with CSS or JavaScript.
**Example:

Welcome

*class *– Groups multiple HTML elements together so they can be styled or controlled using CSS or JavaScript.
*Example:
*

Hello

style **– Applies CSS styles directly to an HTML element (inline CSS).
**Example:

Heading

title – Provides extra information about an element and displays it as a tooltip when the mouse is placed over it.
Example:

Hello

*href *– Specifies the URL or destination of a link. It is mainly used with the tag.
*Example:
*
Visit

*src *– Specifies the source location of an image, video, or other media files. It is mainly used with tags like , , and .
*Example:
*

HTML LIST

Narmatha — Thu, 16 Jul 2026 14:03:30 +0000

*HTML List
*
An HTML list is used to display a group of related items in an organized and easy-to-read format on a web page. Lists help present information clearly using numbers, bullets, or descriptions.

Types of HTML Lists
__
Ordered List (

Unordered List (

Description List (

for the term and

for the description.

*SIMPLE EXAMPLES FOR OL,UL,DL
*
Example

HTML
CSS

Apple
Banana

HTML: HyperText Markup Language

FLEXBOX IN CSS

Narmatha — Thu, 16 Jul 2026 13:52:25 +0000

WHAT IS FLEXBOX IN CSS ?

CSS Flexbox (Flexible Box Layout) is a CSS layout system designed to make it easy to arrange, align, and distribute space between items inside a container, even when their sizes are unknown or change dynamically.

HOW FLEXBOX WORKS

Flexbox has two main parts:

Flex container: The parent element with display: flex.
Flex items: The direct children inside the flex container.

PROPERTIES OF FLEXBOX IN CSS

Container properties
Property Purpose
display: flex Enables Flexbox
flex-direction Row or column layout
justify-content Aligns items along the main axis
align-items Aligns items along the cross axis
flex-wrap Allows wrapping
gap Adds space between items

Example:

.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}
Item properties
Property Purpose
flex Controls how an item grows or shrinks
flex-grow Allows an item to grow
flex-shrink Allows an item to shrink
flex-basis Sets the initial size
align-self Overrides alignment for a single item

Example:

.item {
flex: 1;
}

.big-item {
flex: 2;
}