https://github.com/syaifulsz/bootstrap-helper-margin-padding
A responsive Bootstrap 3 helper to add spacing or gutter with margin and padding in to block or inline-block elements.
https://github.com/syaifulsz/bootstrap-helper-margin-padding
bootstrap bootstrap-helpers css-framework margin padding spacing
Last synced: 2 months ago
JSON representation
A responsive Bootstrap 3 helper to add spacing or gutter with margin and padding in to block or inline-block elements.
- Host: GitHub
- URL: https://github.com/syaifulsz/bootstrap-helper-margin-padding
- Owner: syaifulsz
- License: mit
- Created: 2017-03-08T09:50:23.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-10T07:58:46.000Z (about 8 years ago)
- Last Synced: 2025-02-12T23:15:08.376Z (3 months ago)
- Topics: bootstrap, bootstrap-helpers, css-framework, margin, padding, spacing
- Language: CSS
- Homepage:
- Size: 9.77 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Bootstrap Helper: Margin & Padding
A responsive Bootstrap 3 helper to add spacing or gutter with margin and padding in to block or inline-block elements. Default sizes are 15px and 30px, the first size in sizes list is consider as first and default size for .margin and .padding, thus, there is no class name .margin-15 and .padding-15.
This helper is responsive and support Bootstrap 3's responsive utilities (xs, sm, md, lg). Additional media queries is configurable and can be extended depending on your project requirements.
## Getting Started
[Download](https://github.com/syaifulsz/bootstrap-helper-margin-padding/releases) latest version or install by bower:
```sh
bower install bootstrap-helper-margin-padding
```
Include this stylesheet code into your site:
```html
```
If you want to have a responsive margin-padding helper, include this stylesheet too:
```html
```
## Example usage:
```html
```
## Example usage with responsive media query:
```html
```
## Extends and compile with Bootstrap 3 SASS
You're required to install these in order to extends this helper:
- NodeJS
- Grunt CLI
- Ruby
- SASS
### Installation
Run:
```sh
npm install
```
### Compile
Run:
```sh
grunt
```
### Enable Bootstrap 3's responsive utilities for this helper
Change these variables to `true`.
```sass
$helper-margin-padding--xs: false
$helper-margin-padding--sm: false
$helper-margin-padding--md: false
$helper-margin-padding--lg: false
```
### Add more sizes
Add more sizes here:
```sass
$sizes: 15 30
```