{"id":17966010,"url":"https://github.com/alamincoders/html-bootstrap-starter","last_synced_at":"2026-04-16T05:03:09.384Z","repository":{"id":259187567,"uuid":"876538342","full_name":"alamincoders/html-bootstrap-starter","owner":"alamincoders","description":"Html Bootstrap Starter 2025","archived":false,"fork":false,"pushed_at":"2024-10-22T06:46:07.000Z","size":29,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-01T02:06:22.780Z","etag":null,"topics":["boilerplate-template","bootstrap","bootstrap-starter","bootstrap-template","css","html","html-starter-template","javascript","scss","starter","template","vite"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alamincoders.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-22T06:25:17.000Z","updated_at":"2025-03-04T03:27:51.000Z","dependencies_parsed_at":"2024-10-23T10:50:39.576Z","dependency_job_id":"91bfafc9-c5c2-4420-a513-aeb042217361","html_url":"https://github.com/alamincoders/html-bootstrap-starter","commit_stats":null,"previous_names":["alamincoders/html-bootstrap-starter"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/alamincoders/html-bootstrap-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alamincoders%2Fhtml-bootstrap-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alamincoders%2Fhtml-bootstrap-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alamincoders%2Fhtml-bootstrap-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alamincoders%2Fhtml-bootstrap-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alamincoders","download_url":"https://codeload.github.com/alamincoders/html-bootstrap-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alamincoders%2Fhtml-bootstrap-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265905116,"owners_count":23846696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate-template","bootstrap","bootstrap-starter","bootstrap-template","css","html","html-starter-template","javascript","scss","starter","template","vite"],"created_at":"2024-10-29T13:06:39.554Z","updated_at":"2025-10-29T19:35:05.984Z","avatar_url":"https://github.com/alamincoders.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML Bootstrap Starter\n\nWelcome to the HTML Bootstrap Starter project! This template provides a structured approach to building responsive and stylish web applications using Bootstrap and custom utility classes.\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Getting Started](#getting-started)\n- [Custom Utility Classes](#custom-utility-classes)\n  - [Color Utilities](#color-utilities)\n  - [Spacing Utilities](#spacing-utilities)\n  - [Flex-box Utilities](#flexbox-utilities)\n  - [Typography Utilities](#typography-utilities)\n  - [Width \u0026 Height Utilities](#width--height-utilities)\n  - [Responsive Utilities](#responsive-utilities)\n- [Usage Examples](#usage-examples)\n- [Full List of Utilities](#full-list-of-utilities)\n- [How to Run the Project](#how-to-run-the-project)\n- [Contributing](#contributing)\n\n---\n\n## Overview\n\nThis project is designed to help developers quickly create responsive web applications using:\n\n![html](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![css](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n![sass](https://img.shields.io/badge/SASS-CC6699?style=for-the-badge\u0026logo=sass\u0026logoColor=white)\n![bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge\u0026logo=bootstrap\u0026logoColor=white)\n![sass](https://img.shields.io/badge/Vite-CC6699?style=for-the-badge\u0026logo=vite\u0026logoColor=purple)\n\n## Getting Started\n\nTo get started with this project, simply clone the repository and include the necessary Bootstrap and custom stylesheets in your HTML file.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1.0\"\n    /\u003e\n    \u003ctitle\u003eHtml Bootstrap Starter\u003c/title\u003e\n    \u003cscript\n      type=\"module\"\n      src=\"./js/main.js\"\n    \u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- Your content goes here --\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n---\n\n## Custom Utility Classes\n\n### Color Utilities\n\nEasily set text, background, and border colors with our utility classes:\n\n- `ut-color-primary`: Text color using the primary theme color.\n- `ut-bg-success`: Background color using the success color.\n- `ut-border-danger`: Border color using the danger theme color.\n\n### Spacing Utilities\n\nControl the spacing around elements using margin (`ut-m`) and padding (`ut-p`) utilities. You can also apply margin and padding to specific sides:\n\n- `ut-mt-3`: Adds top margin with a size of 12px (3 x 4px).\n- `ut-px-4`: Adds horizontal padding (left and right) of 16px.\n\nYou can combine horizontal and vertical spacings:\n\n- `ut-mx-my-5`: Adds margin on the X (horizontal) and Y (vertical) axis with 20px.\n\n### Flexbox Utilities\n\nFor layout and alignment control:\n\n- `ut-flex`: Applies `display: flex`.\n- `ut-justify-center`: Centers items along the main axis.\n- `ut-items-start`: Aligns items at the start along the cross-axis.\n\n### Typography Utilities\n\nControl text styles and alignment:\n\n- `ut-font-bold`: Bold font weight.\n- `ut-text-uppercase`: Converts text to uppercase.\n- `ut-text-size-5`: Sets text size using a dynamic scale (clamp-based).\n\n### Width \u0026 Height Utilities\n\nControl element size:\n\n- `ut-w-full`: Full width.\n- `ut-h-auto`: Automatic height adjustment based on content.\n\n### Responsive Utilities\n\nResponsive spacing adapts based on the viewport size using `clamp()`:\n\n- `ut-m-responsive-4`: Margin that scales responsively.\n- `ut-p-responsive-3`: Padding that adjusts dynamically.\n\n---\n\n## Usage Examples\n\nHere are some examples of how to use the custom utility classes in your HTML:\n\n```html\n\u003cdiv class=\"ut-bg-primary ut-p-4 ut-text-center\"\u003eWelcome to the Project!\u003c/div\u003e\n\n\u003cbutton class=\"ut-bg-success ut-px-3 ut-py-2 ut-text-uppercase ut-font-bold\"\u003e\n  Click Me\n\u003c/button\u003e\n\n\u003csection class=\"ut-m-responsive-4 ut-p-responsive-5\"\u003e\n  This section has responsive margins and padding.\n\u003c/section\u003e\n```\n\n---\n\n## Full List of Utilities\n\n### Spacing\n\n- **Margin (m)**: `ut-m-0` to `ut-m-20`, with directional variants like `ut-mt`, `ut-mb`, `ut-ml`, `ut-mr`\n- **Padding (p)**: `ut-p-0` to `ut-p-20`, with directional variants like `ut-pt`, `ut-pb`, `ut-pl`, `ut-pr`\n- **Combined Spacing**: Horizontal (`ut-mx`, `ut-px`) and Vertical (`ut-my`, `ut-py`)\n\n### Color\n\n- **Text Color**: `ut-color-{variant}`\n- **Background Color**: `ut-bg-{variant}`\n- **Border Color**: `ut-border-{variant}`\n\n### Flex-box\n\n- `ut-flex`\n- `ut-flex-row`\n- `ut-flex-col`\n- `ut-justify-center`\n- `ut-justify-between`\n- `ut-items-center`\n- `ut-items-start`\n- `ut-items-end`\n- `ut-gap-1` to `ut-gap-3`\n\n### Typography\n\n- `ut-font-bold`\n- `ut-font-light`\n- `ut-font-medium`\n- `ut-text-left`\n- `ut-text-center`\n- `ut-text-right`\n- `ut-text-uppercase`\n- `ut-text-size-1` to `ut-text-size-10`\n\n### Width \u0026 Height\n\n- `ut-w-full`\n- `ut-w-auto`\n- `ut-h-full`\n- `ut-h-auto`\n\n### Border Radius\n\n- `ut-rounded-0` to `ut-rounded-10`\n\n### Shadows\n\n- `ut-shadow-sm`\n- `ut-shadow-md`\n- `ut-shadow-lg`\n\n### Display\n\n- `ut-block`\n- `ut-inline-block`\n- `ut-hidden`\n- `ut-inline-flex`\n\n### Overflow\n\n- `ut-overflow-hidden`\n- `ut-overflow-auto`\n- `ut-overflow-scroll`\n\n### Cursor\n\n- `ut-cursor-pointer`\n- `ut-cursor-not-allowed`\n\n### Opacity\n\n- `ut-opacity-100`\n- `ut-opacity-75`\n- `ut-opacity-50`\n- `ut-opacity-25`\n- `ut-opacity-0`\n\n---\n\n## How to Run the Project\n\nTo run the project, follow these steps:\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/alamincoders/html-bootstrap-starter.git\n   ```\n\n2. Navigate to the project directory:\n\n   ```bash\n   cd html-bootstrap-starter\n   ```\n\n3. Install the dependencies:\n\n   ```bash\n   npm install\n   ```\n\n4. Start the development server with the following command, which will also open the application in your default browser:\n\n   ```bash\n   npm run dev\n   ```\n\n   Alternatively, you can start the server without opening the browser:\n\n   ```bash\n   npm start\n   ```\n\n5. Open your browser and visit `http://localhost:3000` (or the specified IP address if running on a different host).\n\n6. To build the project for production, use:\n\n   ```bash\n   npm run build\n   ```\n\n---\n\n## Contributing\n\nWe welcome contributions to this project! Please feel free to open issues or pull requests for improvements or suggestions. Together, we can make this project even better.\n\n---\n\nHappy coding! 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falamincoders%2Fhtml-bootstrap-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falamincoders%2Fhtml-bootstrap-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falamincoders%2Fhtml-bootstrap-starter/lists"}