Welcome 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.
- Overview
- Getting Started
- Custom Utility Classes
- Usage Examples
- Full List of Utilities
- How to Run the Project
- Contributing
This project is designed to help developers quickly create responsive web applications using:
To get started with this project, simply clone the repository and include the necessary Bootstrap and custom stylesheets in your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Html Bootstrap Starter</title>
<script
type="module"
src="./js/main.js"
></script>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>Easily set text, background, and border colors with our utility classes:
ut-color-primary: Text color using the primary theme color.ut-bg-success: Background color using the success color.ut-border-danger: Border color using the danger theme color.
Control the spacing around elements using margin (ut-m) and padding (ut-p) utilities. You can also apply margin and padding to specific sides:
ut-mt-3: Adds top margin with a size of 12px (3 x 4px).ut-px-4: Adds horizontal padding (left and right) of 16px.
You can combine horizontal and vertical spacings:
ut-mx-my-5: Adds margin on the X (horizontal) and Y (vertical) axis with 20px.
For layout and alignment control:
ut-flex: Appliesdisplay: flex.ut-justify-center: Centers items along the main axis.ut-items-start: Aligns items at the start along the cross-axis.
Control text styles and alignment:
ut-font-bold: Bold font weight.ut-text-uppercase: Converts text to uppercase.ut-text-size-5: Sets text size using a dynamic scale (clamp-based).
Control element size:
ut-w-full: Full width.ut-h-auto: Automatic height adjustment based on content.
Responsive spacing adapts based on the viewport size using clamp():
ut-m-responsive-4: Margin that scales responsively.ut-p-responsive-3: Padding that adjusts dynamically.
Here are some examples of how to use the custom utility classes in your HTML:
<div class="ut-bg-primary ut-p-4 ut-text-center">Welcome to the Project!</div>
<button class="ut-bg-success ut-px-3 ut-py-2 ut-text-uppercase ut-font-bold">
Click Me
</button>
<section class="ut-m-responsive-4 ut-p-responsive-5">
This section has responsive margins and padding.
</section>- Margin (m):
ut-m-0tout-m-20, with directional variants likeut-mt,ut-mb,ut-ml,ut-mr - Padding (p):
ut-p-0tout-p-20, with directional variants likeut-pt,ut-pb,ut-pl,ut-pr - Combined Spacing: Horizontal (
ut-mx,ut-px) and Vertical (ut-my,ut-py)
- Text Color:
ut-color-{variant} - Background Color:
ut-bg-{variant} - Border Color:
ut-border-{variant}
ut-flexut-flex-rowut-flex-colut-justify-centerut-justify-betweenut-items-centerut-items-startut-items-endut-gap-1tout-gap-3
ut-font-boldut-font-lightut-font-mediumut-text-leftut-text-centerut-text-rightut-text-uppercaseut-text-size-1tout-text-size-10
ut-w-fullut-w-autout-h-fullut-h-auto
ut-rounded-0tout-rounded-10
ut-shadow-smut-shadow-mdut-shadow-lg
ut-blockut-inline-blockut-hiddenut-inline-flex
ut-overflow-hiddenut-overflow-autout-overflow-scroll
ut-cursor-pointerut-cursor-not-allowed
ut-opacity-100ut-opacity-75ut-opacity-50ut-opacity-25ut-opacity-0
To run the project, follow these steps:
-
Clone the repository:
git clone https://github.com/alamincoders/html-bootstrap-starter.git
-
Navigate to the project directory:
cd html-bootstrap-starter -
Install the dependencies:
npm install
-
Start the development server with the following command, which will also open the application in your default browser:
npm run dev
Alternatively, you can start the server without opening the browser:
npm start
-
Open your browser and visit
http://localhost:3000(or the specified IP address if running on a different host). -
To build the project for production, use:
npm run build
We 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.
Happy coding! 🎉