https://github.com/syaifulsz/bootstrap-helper-blocks

A Bootstrap 3 responsive helper for adding width to inline block. The widths are calculated based on element parent container and are based on 12 grid columns.
https://github.com/syaifulsz/bootstrap-helper-blocks

block bootstrap bootstrap-helpers bootstrap3 css css-framework width

Last synced: about 1 month ago
JSON representation

A Bootstrap 3 responsive helper for adding width to inline block. The widths are calculated based on element parent container and are based on 12 grid columns.

• Host: GitHub
• URL: https://github.com/syaifulsz/bootstrap-helper-blocks
• Owner: syaifulsz
• License: mit
• Created: 2017-03-09T11:58:50.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-10T08:34:10.000Z (almost 8 years ago)
• Last Synced: 2024-12-15T05:07:11.878Z (about 1 month ago)
• Topics: block, bootstrap, bootstrap-helpers, bootstrap3, css, css-framework, width
• Language: CSS
• Size: 9.77 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Bootstrap Helper: Blocks

This is a responsive helper for adding width to inline block. The widths are calculated based on element parent container and are based on 12 grid columns.

These helper supports Bootstrap 3 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-blocks/releases) latest version or install by bower:

```sh

bower install bootstrap-helper-blocks

```

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



    


        Submit

    

    


        Cancel

    



```


## Example usage with responsive media query:

```html



    


        Box 1

    

    


        Box 2

    

    


        Box 3

    

    


        Box 4

    



```


## 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-block--xs: false

$helper-block--sm: false

$helper-block--md: false

$helper-block--lg: false

```

### Adjust grid columns

Adjust grid column here:

```sass

$grid: 12

```