cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              / Examples start at line 37

.container
  .page-header
    %h1 Bootstrap Sass grid Mixin examples
    %p.lead Basic grid layouts to get you familiar with building within the Bootstrap grid system. But using Mixins instead of prebuilt grid classes.

    %h3 Variables
    %p 
      The following variables, found 
      %a{:href => "https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L320"} here, 
      determine the number of columns, the gutter width, and the media query point at which to begin floating columns. These are used to generate the commonly used 
      %a{:href => "https://getbootstrap.com/css/#grid-example-basic"} predefined grid classes 
      but also the custom mixins listed below.
  
    %h3 The Mixins
    %p There are a number of mixins available for constructing a grid. They include:
    
    %dl
      %dt @include make-row;
      %dd Creates a row just like adding a class of .row would.
      %dt @include make-*-column(*);
      %dd Creates a column just like adding a class of .col-xs-12 would. Breakpoints come first and are xs, sm, md and lg followed by the number of columns.
      %dt @include make-*-column-offset(*);
      %dd Move a column to the right useing offset. Increases the left margin of a column by * columns.
      %dt @include make-*-column-push(*);
      %dd Change the order of a column by pushing it.
      %dt @include make-*-column-pull(*);
      %dd Change the order of a column by pulling it. 
  
  %h3 Three equal columns
  %p
    Get three equal-width columns starting at desktops and scaling to large desktops
    
    
    
  / Three equal columns 
    
  .three-equal-columns
    .col make-md-column(4);
    .col make-md-column(4);
    .col make-md-column(4);
  
  / END Three equal columns



  %h3 Three unequal columns
  %p
    Get three columns
    %strong starting at desktops and scaling to large desktops
    of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
    
    
    
  / Three unequal columns

  .three-unequal-columns
    .col.col-3 make-md-column(3);
    .col.col-6 make-md-column(6);
    .col.col-3 make-md-column(3);
    
  / END Three unequal columns
  
  
  
  %h3 Two columns
  %p
    Get two columns starting at desktops and scaling to large desktops
    
    
    
  / Two columns
  
  .two-columns
    .col.col-8 make-md-column(8);
    .col.col-4 make-md-column(4);
  
  / END Two columns
  
  
  
  %h3 Full width, single column
  %p.text-warning No grid classes are necessary for full-width elements.
  %hr/
  %h3 Two columns with two nested columns
  %p
    Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops
  %p At mobile device sizes, tablets and down, these columns and their nested columns will stack.
  
  
  
  / Two columns with two nested columns
    
  .two-columns-with-two-nested-columns
    .col.col-8
      make-md-column(8);
      .two-columns-with-two-nested-columns
        .col.col-6 make-md-column(6);
        .col.col-6 make-md-column(6);
    .col.col-4 make-md-column(4);
  
  / Two columns with two nested columns
  
  
  
  %hr/
  %h3 Mixed: mobile and desktop
  %p The Bootstrap 3 grid has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
  %p Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
  
  
  
  / Mixed mobile and desktop
  
  .mixed-mobile-and-desktop
    .col.col-large make-xs-column(12); make-md-column(8); 
    .col.col-small make-xs-column(6); make-md-column(4);
  .mixed-mobile-and-desktop
    .col.col-small make-xs-column(6); make-md-column(4);
    .col.col-small make-xs-column(6); make-md-column(4);
    .col.col-small make-xs-column(6); make-md-column(4);
  .mixed-mobile-and-desktop
    .col-medium make-xs-column(6);
    .col-medium make-xs-column(6);
  
  / END Mixed mobile and desktop
  
  
  
  %hr/
  %h3 Mixed: mobile, tablet, and desktop


  
  / Mixed mobile, tablet and desktop

  .mixed-mobile-tablet-and-desktop
    .col.col-one make-xs-column(12); make-sm-column(6); make-lg-column(8); 
    .col.col-two make-xs-column(6); make-lg-column(4); 
  .mixed-mobile-tablet-and-desktop
    .col.col-three make-xs-column(6); make-sm-column(4); 
    .col.col-three make-xs-column(6); make-sm-column(4); 
    .col.col-three make-xs-column(6); make-sm-column(4); 
    
  / END Mixed mobile, tablet and desktop
  
  
  
  %hr/
  
  %h3 Offset, push, and pull resets
  %p Reset offsets, pushes, and pulls at specific breakpoints.
  
  
  
  / Offset, push and pull resets
  
  .offset-push-and-pull-resets
    .col.col-one make-sm-column(5); make-md-column(6);
    .col.col-two make-sm-column(5); make-sm-column-offset(2); make-md-column(6); make-md-column-offset(0);
  .offset-push-and-pull-resets
    .col.col-three make-sm-column(6); make-md-column(5); make-lg-column(6);
    .col.col-four make-sm-column(6); make-md-column(5); make-md-column-offset(2); make-lg-column(6); make-lg-column-offset(0);
  
  / END Offset, push and pull resets
            
          
!
            
              // Boostrap Mixins and Variables are defined first.
// Examples start at line 234.

// Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/

@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;


//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
$grid-columns:              12 !default;
//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         30px !default;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:     $screen-sm-min !default;
//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;


//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
$container-tablet:             (720px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            (940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;

// Large screen / wide desktop
$container-large-desktop:      (1140px + $grid-gutter-width) !default;
//** For `$screen-lg-min` and up.
$container-lg:                 $container-large-desktop !default;

// Grid system
//
// Generate semantic grid columns with these mixins.

// Centered container element
@mixin container-fixed($gutter: $grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
  @include clearfix;
}

// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
  margin-left:  ($gutter / -2);
  margin-right: ($gutter / -2);
  @include clearfix;
}

// Generate the extra small columns
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  float: left;
  width: percentage(($columns / $grid-columns));
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
}
@mixin make-xs-column-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}
@mixin make-xs-column-push($columns) {
  left: percentage(($columns / $grid-columns));
}
@mixin make-xs-column-pull($columns) {
  right: percentage(($columns / $grid-columns));
}

// Generate the small columns
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);

  @media (min-width: $screen-sm-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-sm-column-offset($columns) {
  @media (min-width: $screen-sm-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-sm-column-push($columns) {
  @media (min-width: $screen-sm-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-sm-column-pull($columns) {
  @media (min-width: $screen-sm-min) {
    right: percentage(($columns / $grid-columns));
  }
}

// Generate the medium columns
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);

  @media (min-width: $screen-md-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-md-column-offset($columns) {
  @media (min-width: $screen-md-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-md-column-push($columns) {
  @media (min-width: $screen-md-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-md-column-pull($columns) {
  @media (min-width: $screen-md-min) {
    right: percentage(($columns / $grid-columns));
  }
}

// Generate the large columns
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);

  @media (min-width: $screen-lg-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-lg-column-offset($columns) {
  @media (min-width: $screen-lg-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-lg-column-push($columns) {
  @media (min-width: $screen-lg-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-lg-column-pull($columns) {
  @media (min-width: $screen-lg-min) {
    right: percentage(($columns / $grid-columns));
  }
}

// Colour column rows

[class*="col-"], .col {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

// Examples.  

// Create rows
.three-equal-columns,
.three-unequal-columns,
.two-columns,
.two-columns-with-two-nested-columns,
.mixed-mobile-and-desktop,
.mixed-mobile-tablet-and-desktop,
.offset-push-and-pull-resets {

  @include make-row;

}

// Define columns. 
// In a real app your classes should be sematic in that they would describe what you are laying out. 
// If you use smart common classes you can end up writing minimal grid rules. 

.three-equal-columns {
  
  .col {
    @include make-md-column(4);
  }

}

.three-unequal-columns {

  .col-3 {
    @include make-md-column(3);
  }

  .col-6 {
    @include make-md-column(6);
  }

}

.two-columns {

  .col-4 {
    @include make-md-column(4);
  }

  .col-8 {
    @include make-md-column(8);
  }
  
}

.two-columns-with-two-nested-columns {

  .col-8 {
    @include make-md-column(8);
  }

  .col-6 {
    @include make-md-column(6);
  }

  .col-4 {
    @include make-md-column(4);
  }

}

.mixed-mobile-and-desktop {

  // When you have rules for multiple breakpoints define the smaller screen first.
  .col-large {
    @include make-xs-column(12);
    @include make-md-column(8);
  }

  .col-medium {
    @include make-xs-column(6);
  }

  .col-small {
    @include make-xs-column(6);
    @include make-md-column(4);
  }

}

.mixed-mobile-tablet-and-desktop {

  .col-one {
    @include make-xs-column(12);
    @include make-sm-column(6);
    @include make-lg-column(8);
  }

  .col-two {
    @include make-xs-column(6);
    @include make-lg-column(4);
  }

  .col-three {
    @include make-xs-column(6);
    @include make-sm-column(4);
  }

}

.offset-push-and-pull-resets {

  .col-one {
    @include make-sm-column(5);
    @include make-md-column(6);
  }

  .col-two {
    @include make-sm-column(5);
    @include make-sm-column-offset(2);
    @include make-md-column(6);
    @include make-md-column-offset(0);
    
  }

  .col-three {
    @include make-sm-column(6);
    @include make-md-column(5);
    @include make-lg-column(6);
  }

  .col-four {
    @include make-sm-column(6);
    @include make-md-column(5);
    @include make-md-column-offset(2);
    @include make-lg-column(6);
    @include make-lg-column-offset(0);
    
  }

}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console