Skip to content

Instantly share code, notes, and snippets.

@salt-istanbul

salt-istanbul/Bootstrap Responsive Square & Rectangle

Last active October 27, 2016 16:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save salt-istanbul/d38295e780c464f8fc52 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save salt-istanbul/d38295e780c464f8fc52 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. salt-istanbul renamed this gist Oct 28, 2014. 1 changed file with 0 additions and 0 deletions.
    0 bootstrap square and rectangle → Bootstrap Responsive Square & Rectangle
    View file
    File renamed without changes.
  2. salt-istanbul revised this gist Oct 28, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion bootstrap square and rectangle
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@ li[class*="col-"] > .rect-responsive{
    .rect-responsive > *{
    position:absolute;
    }
    .square-responsive > .content
    .square-responsive > .content,
    .rect-responsive > .content {
    width:100%;
    height:100%;
  3. salt-istanbul revised this gist Oct 28, 2014. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions bootstrap square and rectangle
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,11 @@ ul[class*="col-"] > .rect-responsive,
    li[class*="col-"] > .rect-responsive{
    padding-bottom:50%;
    }
    .square-responsive,
    .rect-responsive{
    position:relative;
    overflow:hidden;
    }
    .square-responsive > *,
    .rect-responsive > *{
    position:absolute;
  4. salt-istanbul revised this gist Oct 28, 2014. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions bootstrap square and rectangle
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,13 @@ ul[class*="col-"] > .square-responsive,
    li[class*="col-"] > .square-responsive{
    padding-bottom:100%;
    }
    div[class*="col-"] > .rect-responsive,
    span[class*="col-"] > .rect-responsive,
    ol[class*="col-"] > .rect-responsive,
    ul[class*="col-"] > .rect-responsive,
    li[class*="col-"] > .rect-responsive{
    padding-bottom:50%;
    }
    .square-responsive > *,
    .rect-responsive > *{
    position:absolute;
  5. salt-istanbul created this gist Oct 28, 2014.
    34 changes: 34 additions & 0 deletions bootstrap square and rectangle
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    div[class*="col-"] > .square-responsive,
    span[class*="col-"] > .square-responsive,
    ol[class*="col-"] > .square-responsive,
    ul[class*="col-"] > .square-responsive,
    li[class*="col-"] > .square-responsive{
    padding-bottom:100%;
    }
    .square-responsive > *,
    .rect-responsive > *{
    position:absolute;
    }
    .square-responsive > .content
    .rect-responsive > .content {
    width:100%;
    height:100%;
    }
    /*usage
    <div class="row">
    <div class="col-sm-6">
    <div class="square-responsive">
    <div class="content">
    Hello
    </div>
    </div>
    </div>
    <div class="col-sm-6">
    <div class="square-responsive">
    <div class="content">
    Hello
    </div>
    </div>
    </div>
    </div>
    */