{"id":20319190,"url":"https://github.com/bitkris-dev/bootstrap4-utils-extended","last_synced_at":"2026-05-11T06:58:52.862Z","repository":{"id":202425176,"uuid":"147639351","full_name":"bitkris-dev/bootstrap4-utils-extended","owner":"bitkris-dev","description":"Extend the Bootstrap 4 Utilities with new classes!","archived":false,"fork":false,"pushed_at":"2018-09-06T10:05:22.000Z","size":42,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-14T13:26:50.786Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/bitkris-dev.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}},"created_at":"2018-09-06T08:05:47.000Z","updated_at":"2018-09-11T23:39:59.000Z","dependencies_parsed_at":"2023-10-20T19:32:33.754Z","dependency_job_id":null,"html_url":"https://github.com/bitkris-dev/bootstrap4-utils-extended","commit_stats":null,"previous_names":["bitkris-dev/bootstrap4-utils-extended"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitkris-dev%2Fbootstrap4-utils-extended","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitkris-dev%2Fbootstrap4-utils-extended/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitkris-dev%2Fbootstrap4-utils-extended/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitkris-dev%2Fbootstrap4-utils-extended/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitkris-dev","download_url":"https://codeload.github.com/bitkris-dev/bootstrap4-utils-extended/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241820039,"owners_count":20025468,"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":[],"created_at":"2024-11-14T18:45:31.609Z","updated_at":"2026-05-11T06:58:52.833Z","avatar_url":"https://github.com/bitkris-dev.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bootstrap4-utils-extended\n\nExtend the Bootstrap 4 Utilities with new classes!\n\nThis repository wants to extend the useful Bootstrap 4 utilities with some new special classes. This is what is available:\n\n- border directions based on **$grid-breakpoints**\n\n- svg fills based on **$theme-colors**\n- offsets based on **$spacers**, using `transform: translate` property\n- box and text shadows (extra custom variables!)\n- text utilities\n- general cursor utilities\n\n\u003cbr/\u003e\n\n\u003e ##### About `$grid-breakpoints`, `$theme-colors` and `$spacers`\n\u003e\n\u003e These maps are included with default values in [Bootstrap 4](https://github.com/twbs/bootstrap) and can be easily modified and overridden with custom ones in SCSS. This mini-framework extension is based on those variables and it's supposed to be used in conjuction with Bootstrap 4 or at least its utilities.\n\u003e\n\u003e The classes are generated and structured following the same scheme of Bootstrap 4 utils. (some are _fully hyphenated_ and some more complex ones are _partially hyphenated_, meaning that the *direction* property is merged with the class base name)\n\n\u003cbr/\u003e\n\n------\n\n\u003cbr/\u003e\n\n# How to use\n\nInstall it:\n\n`yarn add bootstrap4-utils-extended`\n\u003cbr/\u003e\nor\n\u003cbr/\u003e\n`npm -i bootstrap4-utils-extended`\n\n\u003cbr/\u003e\n\nAdd to your project:\n\n```scss\n@import \"./custom_variables.scss\";\n@import \"bootstrap4-utils-extended/b4ue.scss\";\n@import \"bootstrap/scss/_utilities.scss\";\n```\n\u003e ##### Instructions\n\u003e- First create an SCSS with your custom **$theme-colors**, **grid-breakpoints** and **$spacers** and import it\n\u003e- Then add the **bootstrap4-utils-extended** SCSS (**bootstrap** variables are already included here)\n\u003e- And finally add **bootstrap** utilities\n\n\u003cbr/\u003e\n\n------\n\n\u003cbr/\u003e\n\n# Documentation\n\n\u003cbr/\u003e\n\n## Borders\n\nYou can set a single border side based on the breakpoints specified in the **$grid-breakpoints** map and colors in the **$theme-colors** map.\n\nThe general structure is _fully hyphenated_ as the following:\n```border-{direction}-{breakpoint}-{color}```\n\nWhere:\n*`{direction}` corresponds to one of these values: [`top`, `bottom`, `left`, `right`]\n\n*`{breakpoint}` corresponds to a value in **$grid-breakpoints** map\n\n*`{color}` corresponds to a value in **$theme-colors** map\n\n\nExample: `border-top-lg-primary`\n\n\u003cbr/\u003e\n\n## SVG Fills\n\nYou can fill an svg with a specific color in the **$theme-colors** map.\n\nThe general structure is _fully hyphenated_ as the following:\n```svg-{color}```\n\nWhere:\n*`{color}` corresponds to a value in **$theme-colors** map\n\n\nExample: `svg-primary`\n\n\u003cbr/\u003e\n\n## Offsets\n\nWith offsets you can move around an element based on a direction, a breakpoint in the **$grid-breakpoints** map and a size in the **$spacers** map.\n\nThe general structure is _partially hyphenated_ as the following:\n```off{direction}-{breakpoint}-{size}```\n\n\u003e Please, note that the direction is merged with `off` and not hyphenated from it, following Bootstrap 4 scheme.\n\n\nWhere:\n\n*`{direction}` corresponds to one of these values: [`t`, `b`, `l`, `r`] (_top, bottom, left, right_)\n\n*`{breakpoint}` corresponds to a value in **$grid-breakpoints** map\n\n*`{size}` corresponds to a value in **$spacers** map\n\n\n\nExample: `offt-md-5`\n\n\u003cbr/\u003e\n\n## Box-shadow and text-shadow\n\nThese classes are based on the **$shadows** custom and overridable map. It already has some default values (mainly for building purposes) and it's recommended to replace them.\n\nThe general structure is _fully hyphenated_ as the following:\n```{rule}-shadow-{index}```\n\nWhere:\n*`{rule}` corresponds to one of these values: [`box`, `text`]\n\n*`{index}` corresponds to a value in **$shadows** map\n\n\nExample: `box-shadow-1` or `text-shadow-2`\n\n\u003cbr/\u003e\n\n## Text utilities\n\nYou can use one of the following classes to edit text styles:\n\n`font-weight-extrabold` (_sets font-weight to 900_)\n\n`text-underlined` (_adds underlined text-decoration_)\n\n\u003cbr/\u003e\n\n## General cursor utilities\n\nYou can use one of the following classes to manipulate selection and cursor functionalities:\n\n`no-overflow` (_disables overflow_)\n\n`no-pointer` (_disables any pointer_)\n\n`no-pointer-cascade` (_disables any pointer, including children elements_)\n\n`cursor-pointer` (_enables cursor pointer_)\n\n`disable-select` (_disables element selection with cursor_)\n\n\u003cbr/\u003e\n\n------\n\n\u003cbr/\u003e\n\n# How to contribute\n\nFork this repo, clone it on your machine, work on the **dev** branch and create a pull request.\n\u003cbr/\u003e\u003cbr/\u003e\nTo work on it, it's required to execute a `yarn install`.\n\u003cbr/\u003e\nTo build it simply execute `yarn build`.\n\n\u003cbr/\u003e\n\n------\n\n\u003cbr/\u003e\n\n# Any doubt?\n\nIf you are unsure about something, please feel free to [create an issue](https://github.com/bitkris-dev/bootstrap4-utils-extended/issues/new) and visit **Bootstrap 4 [Utilities documentation](https://getbootstrap.com/docs/4.0/utilities/borders/)**.\n\n\u003cbr/\u003e\n\nThis repository wants to be a substitute for my previous utilities framework called [monomer-css](https://github.com/bitkris-dev/monomer-css), now discontinued because conceptually very similar to Bootstrap 4 Utilities. Adding the latter and this package to your project, you can cover the same monomer-css functionalities with a better and lighter structure.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitkris-dev%2Fbootstrap4-utils-extended","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitkris-dev%2Fbootstrap4-utils-extended","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitkris-dev%2Fbootstrap4-utils-extended/lists"}