bs-support-utils(Bootstrap Support Utilities)

"bs-support-utils extends Bootstrap with additional CSS classes for cursor, padding, margin, gaps, and sizing. Offering fine-grained styling control beyond Bootstrap's core utilities."

Features

• Cursor Utilities: Adds cursor-pointer and other cursor-related utility classes missing in Bootstrap.
• Padding Utilities (Pixels): Offers padding utility classes from p-px-1 to p-px-100, providing more options than Bootstrap's p-1 to p-5 (which are in rem units).
• Extended Utilities: Future releases will include padding in percentage (p-pr-1 to p-pr-100), margin utilities from m-px-1 to m-px-100 and m-pr-1 to m-pr-100, gap properties, and width and height utilities ranging from 1 to 100, significantly extending Bootstrap's w-25, w-50, w-75, and w-100.

Installation

To include bootstrap-support-utilities in your project, run:

npm install bs-support-utils

Or if you prefer using Yarn:

yarn add bs-support-utils

Usage

After installation, import the CSS file into your project (app.js or index.js) to start using the utilities:

@import 'bs-support-utils/index.css';   

Now, you can use the utility classes in your HTML. For example:

<div class="cursor-pointer">Hover over me!</div>
<div class="p-px-50">This div has 50 pixels of padding.</div>
<div class="m-px-20">This div has 20 pixels of margin.</div>
<div class="w-pr-50">This div has a width of 50%.</div>
<div class="h-pr-75">This div has a height of 75%.</div>

Table of Contents

version 1

sizing | Utilities | Description | |-----------|------------------------------------------------------------------| | p-px-25 | PADDING : set padding to 25 pixels | | m-px-25 | MARGIN : sets margin to 25 pixels | | g-px-25 | GAP : sets gap to 25 pixels | | h-pr-25 | HEIGHT : sets height to 25 percentage | | w-pr-25 | WIDTH : sets width to 25 percentage |

cursor | Cursor Class | Description | |----------------------|---------------------------------------------------| | cursor-pointer | Sets the cursor to a pointer (hand) icon. | | cursor-help | Sets the cursor to a help icon. | | cursor-wait | Sets the cursor to a wait (hourglass) icon. | | cursor-text | Sets the cursor to an I-beam, indicating text. | | cursor-not-allowed| Sets the cursor to a not-allowed symbol. | | cursor-move | Sets the cursor to a move icon (crosshair with arrows). | | cursor-crosshair | Sets the cursor to a crosshair. | | cursor-zoom-in | Sets the cursor to indicate zooming in. | | cursor-zoom-out | Sets the cursor to indicate zooming out. | | cursor-grab | Sets the cursor to a grab hand (useful for drag and drop interfaces). | | cursor-grabbing | Sets the cursor to indicate something is being grabbed/dragged. | | cursor-default | Resets the cursor to the default icon. |

version 2

Version 2

| Utilities | Description | |---------------|------------------------------------------------------------------| | line-clamp-1 | Makes the text content in a div collapse to a single line using ellipsis if it exceeds the div's width. |

Pixel Terms

• p-px-10:"p" represents padding.(padding: 10px)
• m-px-10:"m" represents margin.(margin: 10px)
• gap-px-10:"gap" represents gap.(gap: 10px)

Percentage Terms

• w-pr-10:"w" represents width.(width: 10%)
• h-pr-10:"h" represents height.(heihgt: 10%)

Contributing

Contributions to bootstrap-support-utilities are welcome! If you have a suggestion or want to contribute more utilities, please feel free to submit a pull request or open an issue.

License

This project is licensed under the MIT License