bootstrap-grid-h

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