DEV Community: ASHWINTH

Bootstrap :)

ASHWINTH — Thu, 30 Jul 2026 18:58:59 +0000

What Is Bootstrap?

Bootstrap is a free and open-source CSS framework developed to make web development faster and easier. It includes pre-designed CSS classes, responsive layouts, UI components, and JavaScript plugins that help developers create modern websites without writing large amounts of custom CSS.

Bootstrap follows a mobile-first approach, meaning layouts are designed for smaller screens first and then scale up for larger devices.

Why Use Bootstrap?

Bootstrap offers several advantages that make it a favorite among developers:

Saves development time with ready-to-use components.
Provides a responsive grid system.
Ensures consistency across browsers.
Includes built-in utility classes.
Offers excellent documentation and community support.
Easy to learn and integrate into existing projects.
Getting Started with Bootstrap.The easiest way to use Bootstrap is by including its CDN links in your HTML file.Once Bootstrap is added, you can start using its classes immediately.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet">
</head>

<body>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

Bootstrap Grid System

One of Bootstrap's most powerful features is its 12-column responsive grid system.The grid automatically adjusts based on the screen size, making your website responsive without additional CSS.

Example:

<div class="container">
    <div class="row">

        <div class="col-md-6">
            Left Column
        </div>

        <div class="col-md-6">
            Right Column
        </div>

    </div>
</div>

Bootstrap Containers

Bootstrap provides two main container classes:

.container – Fixed-width container that changes size at different breakpoints.
.container-fluid – Full-width container that spans the entire viewport.

Example:

<div class="container">
    Content goes here
</div>

Bootstrap Buttons

Bootstrap offers several button styles using predefined classes.

<button class="btn btn-primary">Primary</button>

<button class="btn btn-success">Success</button>

<button class="btn btn-danger">Danger</button>

Available button styles include:

Primary -blue
Secondary-grey
Success-green
Danger-red
Warning-yellow
Info-skyblue
Light-white
Dark-black

Bootstrap Cards

Cards are flexible content containers used for displaying information.Cards are commonly used for blogs, products, portfolios, and dashboards.

<div class="card" style="width:18rem;">
    <div class="card-body">
        <h5 class="card-title">Bootstrap Card</h5>
        <p class="card-text">
            Cards are useful for displaying content in a clean layout.
        </p>
        <a href="#" class="btn btn-primary">Learn More</a>
    </div>
</div>

Bootstrap Navbar

Creating a responsive navigation bar is simple with Bootstrap.
The navbar automatically adapts to different screen sizes.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

    <div class="container">

        <a class="navbar-brand" href="#">
            My Website
        </a>

    </div>

</nav>

Bootstrap Utility Classes

Bootstrap includes many utility classes that reduce the need for custom CSS.
These utility classes help developers style elements quickly and consistently.

Examples:

<div class="text-center">
    Centered Text
</div>

<div class="mt-4">
    Margin Top
</div>

<div class="p-3">
    Padding
</div>

<div class="bg-primary text-white">
    Colored Background
</div>

Conclusion

Bootstrap is one of the best front-end frameworks for building responsive, modern websites quickly. Its ready-made components, responsive grid system, and utility classes allow developers to focus on functionality instead of writing repetitive CSS.

CSS POSITIONS

ASHWINTH — Wed, 29 Jul 2026 12:51:19 +0000

CSS positioning is one of the most important concepts in web development. It allows us to control where elements appear on a webpage and how they interact with other elements.

Whether you are creating a simple website or a complex web application, understanding CSS positioning will help you build better and more responsive layouts.

What Is CSS Positioning?

CSS positioning determines how an HTML element is placed on a webpage. We can control an element's position using properties such as top, right, bottom, and left.

The position property has five commonly used values:

static
relative
absolute
fixed
sticky

Let's understand each one.

Static Positioning

static is the default position of every HTML element.

When an element has position: static, it follows the normal flow of the webpage. The top, right, bottom, and left properties do not affect it.

.box {
  position: static;
}

Most of the time, you don't need to explicitly write position: static because it is already the default.

Relative Positioning

With position: relative, an element remains in the normal document flow, but you can move it relative to its original position.

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

The element moves 20 pixels down and 30 pixels to the right, while its original space is still preserved.

Relative positioning is also commonly used as a reference point for absolutely positioned child elements.

Absolute Positioning

position: absolute removes an element from the normal document flow.

The element is positioned relative to its nearest positioned ancestor. If there is no positioned ancestor, it is generally positioned relative to the initial containing block.

.box {
  position: absolute;
  top: 20px;
  right: 30px;
}

Absolute positioning is useful when you need precise placement, such as placing an icon inside a button or a label over an image.

A common pattern is:

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 10px;
  right: 10px;
}

*Fixed Positioning
*
position: fixed positions an element relative to the viewport. The element stays in the same place even when the page is scrolled.


.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

Fixed positioning is commonly used for:

Navigation bars
Floating buttons
Chat buttons
Cookie notices
Back-to-top buttons

For example, a fixed button can remain visible in the bottom-right corner while the user scrolls through the page.

Sticky Positioning

position: sticky is a combination of relative and fixed-like behaviour.

An element behaves normally until it reaches a specified position while scrolling. It can then stick to that position within its containing area.

.heading {
  position: sticky;
  top: 0;
}

Sticky positioning is useful for:

Sticky navigation
Section headings
Tables with sticky headers
Sidebars

Unlike fixed, a sticky element generally remains constrained by its containing block.

CSS Positioning and z-index

Sometimes two positioned elements overlap. In these situations, z-index can control which element appears on top.

.box-one {
  position: absolute;
  z-index: 1;
}

.box-two {
  position: absolute;
  z-index: 2;
}

Since .box-two has a higher z-index, it will generally appear above .box-one when they participate in the same stacking context.

Keep in mind that z-index can be affected by stacking contexts, so a larger number does not always mean an element will appear above every other element on the page.

Conculution
Once you understand these concepts, CSS layouts become much easier to build and debug. Practice each positioning type with small examples, and you'll quickly become comfortable using them in real-world website

TOSS CONFRANCE 2026

ASHWINTH — Sun, 26 Jul 2026 09:07:19 +0000

My Experience at TOSSConf – Tamil Open Source Software Conference

Yesterday, I had the wonderful opportunity to attend TOSSConf (Tamil Open Source Software Conference). It was an inspiring and valuable experience that helped me expand my knowledge of open-source technologies and modern software development.

The conference brought together developers, students, open-source contributors, and technology enthusiasts from different backgrounds. The sessions were informative, interactive, and filled with practical insights. It was exciting to see how the open-source community collaborates to build software that benefits everyone.

One of the most interesting sessions I attended was about CodeSapiens. I learned about its vision, the technologies it focuses on, and how it encourages developers to improve their technical skills through collaboration and innovation. The session motivated me to continue learning and become more involved in the developer community.

Another fascinating topic was Quantum Computing. Before attending the conference, I had only a basic understanding of this field. The speakers explained the fundamentals of quantum computing, including concepts like qubits, superposition, and how quantum computers differ from classical computers. It was exciting to learn how quantum computing has the potential to solve complex problems much faster than traditional computers in areas such as cryptography, scientific research, and artificial intelligence.the students was created a community for quantum computing.

Apart from these sessions, I also learned about:

Open-source software and its importance.
Linux and Free Software technologies.
Gitlab and GitHub collaboration.
The value of contributing to open-source projects.
Networking with experienced developers and community members.

One of the biggest lessons I learned from TOSSConf is that learning doesn't stop in the classroom. Conferences like this provide opportunities to connect with experts, exchange ideas, and discover new technologies that can shape our future careers.

After attending TOSSConf, I feel motivated to:

Contribute to open-source projects on GitHub.
Improve my Linux and software development skills.
Explore quantum computing in more depth.
Participate in more technical conferences and community events.
Continue building projects and sharing my knowledge with others.

I would like to sincerely thank the organizers, speakers, volunteers, and everyone who made TOSSConf such a successful event. Their efforts created a welcoming environment for learning, collaboration, and innovation.

Overall, TOSSConf was an unforgettable experience that inspired me to learn new technologies, connect with the open-source community, and take the next step in my software development journey. I look forward to attending future editions and contributing to the open-source ecosystem.

Thank you, TOSSConf, for an amazing learning experience!

Grid in Html

ASHWINTH — Tue, 21 Jul 2026 19:15:49 +0000

What Is CSS Grid?

CSS Grid is a two-dimensional layout system that allows developers to arrange elements into rows and columns. Unlike Flexbox, which is primarily designed for one-dimensional layouts Grid can manage both dimensions simultaneously.

why we use grid?
CSS Grid is a powerful layout system that makes it easy to create modern, responsive web page designs. It allows developers to arrange elements in both rows and columns, making complex layouts simpler to build and manage. Compared to older layout techniques, CSS Grid requires less code, provides better control over element placement, and adapts easily to different screen sizes. Because of its flexibility, clean structure, and wide browser support, CSS Grid has become an essential tool for building responsive and professional websites.

<div class="container">
    <div class="box">Item 1</div>
    <div class="box">Item 2</div>
    <div class="box">Item 3</div>
    <div class="box">Item 4</div>
    <div class="box">Item 5</div>
    <div class="box">Item 6</div>
</div>
CSS
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.box {
    background: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

For example output

| 1 | 2 | 3 |

| 4 | 5 | 6 |

Conclusion

CSS Grid has transformed the way developers build web layouts. Its powerful two-dimensional capabilities make creating responsive, organized, and visually appealing designs much simpler than older methods. By mastering Grid, you'll be able to create everything from simple portfolios to sophisticated dashboards with clean, maintainable code.

Html Table

ASHWINTH — Sun, 19 Jul 2026 08:41:09 +0000

what is html table?
HTML tables are one of the most useful elements in web development. They allow developers to display information in rows and columns, making data easy to read and understand. Whether you're creating a student report, employee database, product list, or timetable, HTML tables are the ideal choice for presenting structured information.

html table tags?


<table>
<thead>
<tbody>
<tr>
<td>
<th>
<tfoot>
<caption>

Features of html table?

Organize data into rows and columns.
Display headers using the tag.
Merge cells with rowspan and colspan.
Style tables easily using CSS.
Improve accessibility by using semantic table elements.

Conculutions?

HTML tables are an essential part of web development when you need to display structured information. By learning the basic table elements such as and and you can create a clear organization and presentation.

Html Form

ASHWINTH — Sun, 19 Jul 2026 07:19:38 +0000

What is html forms?
An HTML forms are elements used to collect input from users on a webpage . Forms are created using the

element, which acts as a container for various input fields such as text boxes, radio buttons, checkboxes, dropdown menus, and submit buttons.

. Text Input

Used to collect short text such as names or usernames.


<input type="text" name="username">

Password Input

Masks the entered text for security.

<input type="password" name="password">

Email Input

Ensures the entered value follows a valid email format.

Number Input cccepts only numeric values.


<input type="number" name="age">

Radio Buttons

Allows users to select only one option from a group.Allows users to select multiple options.


<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Checkboxes

HTML
CSS

Dropdown List

<select name="country">
    <option>India</option>
    <option>USA</option>
    <option>Canada</option>
</select>

Textarea

Used for longer text input, such as comments or feedback.

Submit Button

Sends the form data to the server.

Html Form

ASHWINTH — Thu, 16 Jul 2026 17:18:45 +0000

What is html forms?
An HTML forms are elements used to collect input from users on a webpage . Forms are created using the

element, which acts as a container for various input fields such as text boxes, radio buttons, checkboxes, dropdown menus, and submit buttons.

Text Input

Used to collect short text such as names or usernames.

Password Input

Masks the entered text for security.

<input type="password" name="password">

Email Input

Ensures the entered value follows a valid email format.

Number Input cccepts only numeric values.


<input type="number" name="age">

Radio Buttons

Allows users to select only one option from a group.Allows users to select multiple options.


<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Checkboxes

Its select one or multiple values to the input fiels


<input type="checkbox" name="Language" value="english"> english
<input type="checkbox" name="language" value="tamil"> tamil

Dropdown List

create a list of options to the input fields.

<select name="country">
    <option>India</option>
    <option>USA</option>
    <option>Canada</option>
</select>

Textarea

Used for longer text input, such as comments or feedback.

<textarea name="message"></textarea>

Submit Button

Sends the form data to the server.


<input type="submit" value="Send">

Get and Post methods

Get
Its send dats though the Url and Data is visible in the browser address bar.

http://127.0.0.1:5500/user?name=aswinth&email=aswinth%40gmail.com&phone=9865896589&address=chennai&gender=male&course=course1

Post

Sends data in the request body and More secure than GET Suitable for login forms, registrations, and sensitive information.

Conculution

They enable websites to collect information, process requests, and provide personalized experiences. By mastering form elements, validation techniques, and accessibility best practices, developers can create forms that are both user-friendly and reliable. As

Html :)

ASHWINTH — Wed, 15 Jul 2026 06:23:11 +0000

What is html?

html(hyper text markup language) it is a standard language its used to create a structure of web page content.

What is Html Tags?
HTML tags are special keywords enclosed within angle brackets(<>).They tell the browser how to display content. there is lots of tag in html.

example:
     <h1>welcome</h1>

what is Html attributes?
while html tage define the sturcture of web pages the attribues are add more information to the tag elements.

Why attributes are important?

Create hyperlinks
Display images
Add styles
Identify elements
Improve accessibility
Build forms
Add metadata

Types of Html attributes

href
target
src
alt
width
height
type
placeholder
required
action
method
id
class
style
title
hidden
lang
dir

Common Html Attributes?

id Attribute

The id attribute uniquely identifies an HTML element.Each id value should be unique within a webpage.

<div id="header">
    Welcome!
</div>

class Attribute

The class attribute groups elements together. It is mainly used with CSS and JavaScript.Multiple elements can share the same class

<p class="highlight">
    This is important.
</p>

3.** href Attribute**

The href attribute specifies the destination of a hyperlink.Without href, the link won't navigate anywhere.

<a href="https://www.google.com">
    Google
</a>

4.** src Attribute**

The src attribute specifies the location of an image, video, audio, or other external resource.


<img src="nature.jpg" alt="Nature">

alt Attribute

The alt attribute provides alternative text if an image cannot be displayed. It also improves accessibility for screen readers.Always provide meaningful alt text.

<img src="cat.jpg" alt="A cute orange cat">

style Attribute

The style attribute allows you to apply inline CSS directly to an element.For larger projects, prefer external CSS over inline styles.

<p style="color: blue; font-size: 20px;">
    Hello Friends!
</p>

target Attribute

The target attribute specifies where a linked document should open.

Open Website

Common values:
_self
_blank
_parent
_top

placeholder Attribute

Displays hint text inside input fields.

<input
    type="text"
    placeholder="Enter your name">

required Attribute

Makes an input field mandatory.Users must enter a value before submitting the form.

<input
    type="email"
    required>

disabled Attribute

Disables an element.Disabled elements cannot be interacted with.

<button disabled>
    Submit
</button>

value Attribute

Specifies the initial value of an input element.


<input
    type="text"
    value="John">

width and height Attributes

Set the dimensions of images.

<img
    src="mountain.jpg"
    width="400"
    height="250"
    alt="Mountain">

maxlength Attribute

Limits the number of characters a user can type.


<input
    type="text"
    maxlength="20">

readonly Attribute

Makes an input field read-only.Users can see the value but cannot edit it.


<input
    type="text"
    value="Admin"
    readonly>

*Combining multiple Attributes *

An one elements have multiple attributes. this is very common in real world projects.

<input type="text" id="username" class="form-control" placeholder=" Enter your username" required>

Conculution
As you continue learning HTML, practice using different attributes together in small projects. The more you experiment, the more comfortable you'll become with writing clean and effective HTML.

Happy Coding!

flex box and flex directions

ASHWINTH — Thu, 09 Jul 2026 08:38:21 +0000

*flex directions.
The flex-direction property in CSS determines the direction in which flex items are placed inside a flex container.

flex wrap.
flex-wrap is a CSS property that controls whether flex items stay on a single line or wrap onto multiple lines when there isn't enough space.

justify content
justify-content is a CSS Flexbox property that controls how flex items are aligned along the main axis (the direction set by flex-direction).

For the default flex-direction: row, the main axis is horizontal, so justify-content controls the horizontal spacing of items.

main axis and cross axis

if the main axiss is row the cross axis is column and main axis is column the cross axis is row.
when the flex direction is row the main axis is row when you move the main axis elements use justify content-center.
when you move the cross axis use the align items center.

Hello Guys :)

ASHWINTH — Tue, 07 Jul 2026 07:18:50 +0000

this is my first blog and today we are discuss about block elements and inline elements how works margin and padding spaces.and creating footer to my instagram login page.