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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <div class="container">
  <div class="row">


    <div class="xs-mb-50">
      <div class="col-xs-12">
        <h1>LESS SPACE LIVE DEMONSTRATION</h1>
        <h5>Breakpoints set <code>xs</code> for <b>300px</b>, <code>sm</code> for <b>500px</b>, <code>md</code> for <b>700px</b> and <code>lg</code> for <b>900px</b>. </h5>
        <div class="visible-lg">
          <h3>Large Screen <strong>lg</strong></h3>
          <h4>@media (min-width: @screen-lg) <strong>above 900px</strong></h4>
        </div><!-- "visible-lg" -->
        <div class="visible-md">
          <h3>Medium Screen <strong>md</strong></h3>
          <h4>@media (min-width: @screen-md) <strong>above 700px</strong></h4>
        </div><!-- "visible-md" -->
        <div class="visible-sm">
          <h3>Small Screen <strong>sm</strong></h3>
          <h4>@media (min-width: @screen-sm) <strong>above 500px</strong></h4>
        </div><!-- "visible-sm" -->
        <div class="visible-xs">
          <h3>Extra-Small Screen <strong>xs</strong></h3>
          <h4>@media (min-width: @screen-xs) <strong>global</strong></h4>
        </div><!-- "visible-xs" -->
      </div><!-- "col-xs-12" -->
      <div class="col-xs-12">
        <div class="row">
          <div class="col-sm-6">
            <div class="alert alert-success">
              <h4>Padding Classes: <br></h4>
              <div class="row">
                <div class="col-xs-12">
                  <p>
                    Padding top
                    <br>
                    <strong class="btn btn-default" title="small and upper screen <br> padding top 20">xs-pt-20</strong>
                    <strong class="btn btn-default" title="medium and upper screen <br> padding top 0">md-pt-0</strong>
                    <strong class="btn btn-default" title="large and upper screen <br> padding top 50">lg-pt-50</strong>
                  </p>
                </div><!-- "col-xs-12" -->
              </div><!-- "row" -->
              <br>
              <p>Active Values</p>
              <p class="btn btn-success visible-lg">padding-top: 50</p>
              <p class="btn btn-success visible-md">padding-top: 0</p>
              <p class="btn btn-success visible-sm">padding-top: 20</p>
              <p class="btn btn-success visible-xs">padding-top: 20</p>
            </div><!-- "alert alert-success" -->
          </div><!-- "col-xs-6" -->
          <div class="col-sm-6">
            <div class="alert alert-danger">
              <h4>Margin Classes: <br></h4>
              <div class="col-xs-12">
                <div class="row">
                  <div class="col-xs-6">
                    <p>
                      Margin top
                      <br>
                      <span class="btn btn-default" title="medium and upper screen <br> margin top 40">md-mt-40</span>
                      <span class="btn btn-default" title="large and upper screen <br> margin top 20">lg-mt-20</span>
                    </p>
                  </div><!-- "col-xs-6" -->
                  <div class="col-xs-6">
                    <p>
                      Margin bottom
                      <br>
                      <span class="clearfix"></span>
                      <span class="btn btn-default" title="medium and upper screen <br> margin bottom 40">xs-mb-40</span>
                      <span class="btn btn-default" title="large and upper screen <br> margin bottom 20">md-mb-20</span>
                    </p>
                  </div><!-- "col-xs-6" -->
                </div><!-- "row" -->
              </div><!-- "col-xs-12" -->
              <div class="clearfix"></div>
              <br>
              <p>Active Values</p>
              <p class="btn btn-danger visible-lg">margin-top: 20</p>
              <p class="btn btn-danger visible-md">margin-top: 40</p>
              <p class="btn btn-danger visible-sm">margin-top: 0</p>
              <p class="btn btn-danger visible-xs">margin-top: 0</p>
              <p class="btn btn-danger visible-lg">margin-bottom: 20</p>
              <p class="btn btn-danger visible-md">margin-bottom: 20</p>
              <p class="btn btn-danger visible-sm">margin-bottom: 40</p>
              <p class="btn btn-danger visible-xs">margin-bottom: 40</p>
            </div><!-- "alert alert-danger" -->
          </div><!-- "col-xs-6" -->
        </div><!-- "row" -->
      </div><!-- "col-xs-12" -->
    </div><!-- "xs-mb-50" -->




    <div class="col-xs-12">
      <h3>Preview</h3>
      <div class="holder">
        <div class="inner xs-mb-40 md-mb-20 md-mt-40 lg-mt-20 xs-pt-20 md-pt-0 lg-pt-50 ">
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore expedita aperiam inventore, nam fugit animi nesciunt quae.
          </div><!-- "text" -->
        </div>
      </div><!-- "holder" -->
    </div><!-- "col-xs-12" -->



    <div class="col-xs-12 xs-mt-50">
      <p class="info"><span class="square green"></span> Padding <span class="square red xs-ml-20"></span> Margin</p>
    </div><!-- "col-xs-12 xs-mt-50" -->



  </div><!-- "row" -->
</div><!-- "container" -->





<style type="text/css">
  body {
  font-family: "Open Sans";
  }
.holder {
  display: block;
  background-color: #DB5F5B;
  float: left;
  width: 100%;
}
.inner {
  display: block;
  float: left;
  background-color: #3DD810;
  color: #fff;
  width: 100%;
}
.text {
  background-color: #E4E4E4;
  padding: 20px;
  color: #000;
  text-align: center;
}
.square {
  width: 30px;
  height: 30px;
  display: inline-block;
}
.square.green {
  background-color: green;
}
.square.red {
  background-color: #DB5F5B;
}
.info span {
  line-height: 30px;
  vertical-align: middle;
}
  @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSha1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzBa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxrsuoFAk0leveMLeqYtnfAY.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/xjAJXh38I15wypJXxuGMBtIh4imgI8P11RFo6YPCPC0.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxmWeb5PoA5ztb49yLyUzH1A.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxoUt79146ZFaIJxILcpzmhI.woff) format('woff');
}
/*-----  End of OPEN SANS  ------*/
</style>
            
          
!
            
              ///////////////
// variables //
///////////////
@screen-sm: 500px;
@screen-md: 700px;
@screen-lg: 900px;
@screen-xl: 1600px;




// global
.make-space(@prefix: xs; @value:50;   );
.make-space(@prefix: xs; @value:40;   );
.make-space(@prefix: xs; @value:30;   );
.make-space(@prefix: xs; @value:20;   );
.make-space(@prefix: xs; @value:15;   );
.make-space(@prefix: xs; @value:10;   );
.make-space(@prefix: xs; @value:5;    );
.make-space(@prefix: xs; @value:0;    );


// mobile
@media (min-width: @screen-sm) {
  .make-space(@prefix: sm; @value:50; );
  .make-space(@prefix: sm; @value:40; );
  .make-space(@prefix: sm; @value:30; );
  .make-space(@prefix: sm; @value:20; );
  .make-space(@prefix: sm; @value:15; );
  .make-space(@prefix: sm; @value:10; );
  .make-space(@prefix: sm; @value:5;  );
  .make-space(@prefix: sm; @value:0;  );
}

// tablet
@media (min-width: @screen-md) {
  .make-space(@prefix: md; @value:50; );
  .make-space(@prefix: md; @value:40; );
  .make-space(@prefix: md; @value:30; );
  .make-space(@prefix: md; @value:20; );
  .make-space(@prefix: md; @value:15; );
  .make-space(@prefix: md; @value:10; );
  .make-space(@prefix: md; @value:5;  );
  .make-space(@prefix: md; @value:0;  );
}
// desktop
@media (min-width: @screen-lg) {
  .make-space(@prefix: xl; @value:200; );
  .make-space(@prefix: xl; @value:150; );
  .make-space(@prefix: xl; @value:100; );
  .make-space(@prefix: lg; @value:50; );
  .make-space(@prefix: lg; @value:40; );
  .make-space(@prefix: lg; @value:30; );
  .make-space(@prefix: lg; @value:20; );
  .make-space(@prefix: lg; @value:15; );
  .make-space(@prefix: lg; @value:10; );
  .make-space(@prefix: lg; @value:5;  );
  .make-space(@prefix: lg; @value:0;  );
}
// large screens
@media (min-width: @screen-xl) {
  .make-space(@prefix: xl; @value:200; );
  .make-space(@prefix: xl; @value:150; );
  .make-space(@prefix: xl; @value:100; );
  .make-space(@prefix: xl; @value:50; );
  .make-space(@prefix: xl; @value:40; );
  .make-space(@prefix: xl; @value:30; );
  .make-space(@prefix: xl; @value:20; );
  .make-space(@prefix: xl; @value:15; );
  .make-space(@prefix: xl; @value:10; );
  .make-space(@prefix: xl; @value:5;  );
  .make-space(@prefix: xl; @value:0;  );
}






// init functions
.make-space(@prefix; @value) {
  .@{prefix}-p-@{value}   { padding:        ~"@{value}px"; }
  .@{prefix}-pt-@{value}  { padding-top:    ~"@{value}px"; }
  .@{prefix}-pl-@{value}  { padding-left:   ~"@{value}px"; }
  .@{prefix}-pr-@{value}  { padding-right:  ~"@{value}px"; }
  .@{prefix}-pb-@{value}  { padding-bottom: ~"@{value}px"; }
  .@{prefix}-m-@{value}   { margin:         ~"@{value}px"; }
  .@{prefix}-mt-@{value}  { margin-top:     ~"@{value}px"; }
  .@{prefix}-ml-@{value}  { margin-left:    ~"@{value}px"; }
  .@{prefix}-mr-@{value}  { margin-right:   ~"@{value}px"; }
  .@{prefix}-mb-@{value}  { margin-bottom:  ~"@{value}px"; }
}

            
          
!
            
              $('.btn-default').tooltip({
  container: "body",
  placement: "bottom",
  html: true,
  delay: 100,
  trigger: "hover",
})
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console