bootstrap-grid-h

1.0.3 • Public • Published

bootstrap-grid-h

Bootstrap responsive squares and rectangles

Demo

It is a pretty simple and very useful responsive squares extension to bootstrap.

Dependencies

Bootstrap grid component (+ core variables and mixins, for compilation)

Note

If you just need a css file without diving into the actual code, you can find full and minfied versions in dist/ folder

Syntax

Usage syntax is similar to bootstrap syntax: h, h-xs-1, h-sm-12, etc. There should be always present bootstrap col-... classes in order to create responsive rectangle

Important If you need to create rectangles, do not use h class in conjuction with h-... classes.

Examples

Create responsive square

Simply add class h to the bootstrap col-... class, for example

<div class="col-xs-1 h"></div> <div class="col-xs-4 col-sm-3 col-md-2 h"></div>

This will create responsive square for the screens covered by col classes

Create responsive rectangle

Here you have to specify span (row count) for each required screen. For example:

<div class="col-xs-1 h-xs-1 h-sm-2"></div>

Will create square for XS screen and tall rectangle (1:2) for SM and larger screens

<div class="col-xs-1 col-sm-2 h-xs-1 h-sm-3 h-md-4"></div>

Will create square for XS screen, rectangle with ration 2:3 for SM screen; and rectangle with ratio 1:2 (2:4) for MD and larger screen

Important When creating rectangles, h-xs-... class should be present, otherwise no height will apply on XS screen

Readme

Keywords

none

Package Sidebar

Install

npm i bootstrap-grid-h

Weekly Downloads

8

Version

1.0.3

License

MIT

Last publish

Collaborators

  • a0dh