Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                .order-first{order:-1;}
.order-last{order:13;}
.order-0{order:0}
.order-1{order:1}
.order-2{order:2}
.order-3{order:3}
.order-4{order:4}
.order-5{order:5}
.order-6{order:6}
.order-7{order:7}
.order-8{order:8}
.order-9{order:9;}
.order-10{order:10;}
.order-11{order:11;}
.order-12{order:12;}
.offset-1{margin-left:8.333333%;}
.offset-2{margin-left:16.666667%;}
.offset-3{margin-left:25%;}
.offset-4{margin-left:33.333333%;}
.offset-5{margin-left:41.666667%;}
.offset-6{margin-left:50%;}
.offset-7{margin-left:58.333333%;}
.offset-8{margin-left:66.666667%;}
.offset-9{margin-left:75%;}
.offset-10{margin-left:83.333333%;}
.offset-11{margin-left:91.666667%;}
@media (min-width:576px){
  .order-sm-first{order:-1;}
  .order-sm-last{order:13;}
  .order-sm-0{order:0;}
  .order-sm-1{order:1;}
  .order-sm-2{order:2;}
  .order-sm-3{order:3;}
  .order-sm-4{order:4;}
  .order-sm-5{order:5;}
  .order-sm-6{order:6;}
  .order-sm-7{order:7;}
  .order-sm-8{order:8;}
  .order-sm-9{order:9;}
  .order-sm-10{order:10;}
  .order-sm-11{order:11;}
  .order-sm-12{order:12;}
  .offset-sm-0{margin-left:0;}
  .offset-sm-1{margin-left:8.333333%;}
  .offset-sm-2{margin-left:16.666667%;}
  .offset-sm-3{margin-left:25%;}
  .offset-sm-4{margin-left:33.333333%;}
  .offset-sm-5{margin-left:41.666667%;}
  .offset-sm-6{margin-left:50%;}
  .offset-sm-7{margin-left:58.333333%;}
  .offset-sm-8{margin-left:66.666667%;}
  .offset-sm-9{margin-left:75%;}
  .offset-sm-10{margin-left:83.333333%;}
  .offset-sm-11{margin-left:91.666667%;}
}
@media (min-width:768px){
  .order-md-first{order:-1;}
  .order-md-last{order:13;}
  .order-md-0{order:0;}
  .order-md-1{order:1;}
  .order-md-2{order:2;}
  .order-md-3{order:3;}
  .order-md-4{order:4;}
  .order-md-5{order:5;}
  .order-md-6{order:6;}
  .order-md-7{order:7;}
  .order-md-8{order:8;}
  .order-md-9{order:9;}
  .order-md-10{order:10;}
  .order-md-11{order:11;}
  .order-md-12{order:12;}
  .offset-md-0{margin-left:0;}
  .offset-md-1{margin-left:8.333333%;}
  .offset-md-2{margin-left:16.666667%;}
  .offset-md-3{margin-left:25%;}
  .offset-md-4{margin-left:33.333333%;}
  .offset-md-5{margin-left:41.666667%;}
  .offset-md-6{margin-left:50%;}
  .offset-md-7{margin-left:58.333333%;}
  .offset-md-8{margin-left:66.666667%;}
  .offset-md-9{margin-left:75%;}
  .offset-md-10{margin-left:83.333333%;}
  .offset-md-11{margin-left:91.666667%;}
}
@media (min-width:992px){
  .order-lg-first{order:-1;}
  .order-lg-last{order:13;}
  .order-lg-0{order:0;}
  .order-lg-1{order:1;}
  .order-lg-2{order:2;}
  .order-lg-3{order:3;}
  .order-lg-4{order:4;}
  .order-lg-5{order:5;}
  .order-lg-6{order:6;}
  .order-lg-7{order:7;}
  .order-lg-8{order:8;}
  .order-lg-9{order:9;}
  .order-lg-10{order:10;}
  .order-lg-11{order:11;}
  .order-lg-12{order:12;}
  .offset-lg-0{margin-left:0;}
  .offset-lg-1{margin-left:8.333333%;}
  .offset-lg-2{margin-left:16.666667%;}
  .offset-lg-3{margin-left:25%;}
  .offset-lg-4{margin-left:33.333333%;}
  .offset-lg-5{margin-left:41.666667%;}
  .offset-lg-6{margin-left:50%;}
  .offset-lg-7{margin-left:58.333333%;}
  .offset-lg-8{margin-left:66.666667%;}
  .offset-lg-9{margin-left:75%;}
  .offset-lg-10{margin-left:83.333333%;}
  .offset-lg-11{margin-left:91.666667%;}
}
@media (min-width:1200px){
  .order-xl-first{order:-1;}
  .order-xl-last{order:13;}
  .order-xl-0{order:0}
  .order-xl-1{order:1}
  .order-xl-2{order:2}
  .order-xl-3{order:3}
  .order-xl-4{order:4}
  .order-xl-5{order:5}
  .order-xl-6{order:6}
  .order-xl-7{order:7}
  .order-xl-8{order:8;}
  .order-xl-9{order:9;}
  .order-xl-10{order:10;}
  .order-xl-11{order:11;}
  .order-xl-12{order:12;}
  .offset-xl-0{margin-left:0;}
  .offset-xl-1{margin-left:8.333333%;}
  .offset-xl-2{margin-left:16.666667%;}
  .offset-xl-3{margin-left:25%;}
  .offset-xl-4{margin-left:33.333333%;}
  .offset-xl-5{margin-left:41.666667%;}
  .offset-xl-6{margin-left:50%;}
  .offset-xl-7{margin-left:58.333333%;}
  .offset-xl-8{margin-left:66.666667%;}
  .offset-xl-9{margin-left:75%;}
  .offset-xl-10{margin-left:83.333333%;}
  .offset-xl-11{margin-left:91.666667%;}
}
.d-none{display:none!important;}
.d-inline{display:inline!important;}
.d-inline-block{display:inline-block!important;}
.d-block{display:block!important;}
.d-table{display:table!important;}
.d-table-row{display:table-row!important;}
.d-table-cell{display:table-cell!important;}
.d-flex{display:flex!important;}
.d-inline-flex{display:inline-flex!important;}
@media (min-width:576px){
  .d-sm-none{display:none!important;}
  .d-sm-inline{display:inline!important;}
  .d-sm-inline-block{display:inline-block!important;}
  .d-sm-block{display:block!important;}
  .d-sm-table{display:table!important;}
  .d-sm-table-row{display:table-row!important;}
  .d-sm-table-cell{display:table-cell!important;}
  .d-sm-flex{display:flex!important;}
  .d-sm-inline-flex{display:inline-flex!important;}
}
@media (min-width:768px){
  .d-md-none{display:none!important;}
  .d-md-inline{display:inline!important;}
  .d-md-inline-block{display:inline-block!important;}
  .d-md-block{display:block!important;}
  .d-md-table{display:table!important;}
  .d-md-table-row{display:table-row!important;}
  .d-md-table-cell{display:table-cell!important;}
  .d-md-flex{display:flex!important;}
  .d-md-inline-flex{display:inline-flex!important;}
}
@media (min-width:992px){
  .d-lg-none{display:none!important;}
  .d-lg-inline{display:inline!important;}
  .d-lg-inline-block{display:inline-block!important;}
  .d-lg-block{display:block!important;}
  .d-lg-table{display:table!important;}
  .d-lg-table-row{display:table-row!important;}
  .d-lg-table-cell{display:table-cell!important;}
  .d-lg-flex{display:flex!important;}
  .d-lg-inline-flex{display:inline-flex!important;}
}
@media (min-width:1200px){
  .d-xl-none{display:none!important;}
  .d-xl-inline{display:inline!important;}
  .d-xl-inline-block{display:inline-block!important;}
  .d-xl-block{display:block!important;}
  .d-xl-table{display:table!important;}
  .d-xl-table-row{display:table-row!important;}
  .d-xl-table-cell{display:table-cell!important;}
  .d-xl-flex{display:flex!important;}
  .d-xl-inline-flex{display:inline-flex!important;}
}
.flex-row{flex-direction:row!important;}
.flex-column{flex-direction:column!important;}
.flex-row-reverse{flex-direction:row-reverse!important;}
.flex-column-reverse{flex-direction:column-reverse!important;}
.flex-wrap{flex-wrap:wrap!important;}
.flex-nowrap{flex-wrap:nowrap!important;}
.flex-wrap-reverse{flex-wrap:wrap-reverse!important;}
.justify-content-start{justify-content:flex-start!important;}
.justify-content-end{justify-content:flex-end!important;}
.justify-content-center{justify-content:center!important;}
.justify-content-between{justify-content:space-between!important;}
.justify-content-around{justify-content:space-around!important;}
.align-items-start{align-items:flex-start!important;}
.align-items-end{align-items:flex-end!important;}
.align-items-center{align-items:center!important;}
.align-items-baseline{align-items:baseline!important;}
.align-items-stretch{align-items:stretch!important;}
.align-content-start{align-content:flex-start!important;}
.align-content-end{lign-content:flex-end!important;}
.align-content-center{align-content:center!important;}
.align-content-between{align-content:space-between!important;}
.align-content-around{nt;align-content:space-around!important;}
.align-content-stretch{align-content:stretch!important;}
.align-self-auto{align-self:auto!important;}
.align-self-start{align-self:flex-start!important;}
.align-self-end{align-self:flex-end!important;}
.align-self-center{align-self:center!important;}
.align-self-baseline{align-self:baseline!important;}
.align-self-stretch{align-self:stretch!important;}
@media (min-width:576px){
  .flex-sm-row{flex-direction:row!important;}
  .flex-sm-column{flex-direction:column!important;}
  .flex-sm-row-reverse{flex-direction:row-reverse!important;}
  .flex-sm-column-reverse{flex-direction:column-reverse!important;}
  .flex-sm-wrap{flex-wrap:wrap!important;}
  .flex-sm-nowrap{flex-wrap:nowrap!important;}
  .flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important;}
  .justify-content-sm-start{justify-content:flex-start!important;}
  .justify-content-sm-end{justify-content:flex-end!important;}
  .justify-content-sm-center{justify-content:center!important;}
  .justify-content-sm-between{justify-content:space-between!important;}
  .justify-content-sm-around{justify-content:space-around!important;}
  .align-items-sm-start{align-items:flex-start!important;}
  .align-items-sm-end{align-items:flex-end!important;}
  .align-items-sm-center{align-items:center!important;}
  .align-items-sm-baseline{align-items:baseline!important;}
  .align-items-sm-stretch{align-items:stretch!important;}
  .align-content-sm-start{align-content:flex-start!important;}
  .align-content-sm-end{align-content:flex-end!important;}
  .align-content-sm-center{align-content:center!important;}
  .align-content-sm-between{align-content:space-between!important;}
  .align-content-sm-around{nt;align-content:space-around!important;}
  .align-content-sm-stretch{align-content:stretch!important;}
  .align-self-sm-auto{align-self:auto!important;}
  .align-self-sm-start{align-self:flex-start!important;}
  .align-self-sm-end{align-self:flex-end!important;}
  .align-self-sm-center{align-self:center!important;}
  .align-self-sm-baseline{align-self:baseline!important;}
  .align-self-sm-stretch{align-self:stretch!important;}
}
@media (min-width:768px){
  .flex-md-row{flex-direction:row!important;}
  .flex-md-column{flex-direction:column!important;}
  .flex-md-row-reverse{flex-direction:row-reverse!important;}
  .flex-md-column-reverse{flex-direction:column-reverse!important;}
  .flex-md-wrap{flex-wrap:wrap!important;}
  .flex-md-nowrap{flex-wrap:nowrap!important;}
  .flex-md-wrap-reverse{flex-wrap:wrap-reverse!important;}
  .justify-content-md-start{justify-content:flex-start!important;}
  .justify-content-md-end{justify-content:flex-end!important;}
  .justify-content-md-center{justify-content:center!important;}
  .justify-content-md-between{justify-content:space-between!important;}
  .justify-content-md-around{justify-content:space-around!important;}
  .align-items-md-start{align-items:flex-start!important;}
  .align-items-md-end{align-items:flex-end!important;}
  .align-items-md-center{align-items:center!important;}
  .align-items-md-baseline{align-items:baseline!important;}
  .align-items-md-stretch{align-items:stretch!important;}
  .align-content-md-start{align-content:flex-start!important;}
  .align-content-md-end{align-content:flex-end!important;}
  .align-content-md-center{align-content:center!important;}
  .align-content-md-between{align-content:space-between!important;}
  .align-content-md-around{nt;align-content:space-around!important;}
  .align-content-md-stretch{align-content:stretch!important;}
  .align-self-md-auto{align-self:auto!important;}
  .align-self-md-start{align-self:flex-start!important;}
  .align-self-md-end{align-self:flex-end!important;}
  .align-self-md-center{align-self:center!important;}
  .align-self-md-baseline{align-self:baseline!important;}
  .align-self-md-stretch{align-self:stretch!important;}
}
@media (min-width:992px){
  .flex-lg-row{flex-direction:row!important;}
  .flex-lg-column{flex-direction:column!important;}
  .flex-lg-row-reverse{flex-direction:row-reverse!important;}
  .flex-lg-column-reverse{flex-direction:column-reverse!important;}
  .flex-lg-wrap{flex-wrap:wrap!important;}
  .flex-lg-nowrap{flex-wrap:nowrap!important;}
  .flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important;}
  .justify-content-lg-start{justify-content:flex-start!important;}
  .justify-content-lg-end{justify-content:flex-end!important;}
  .justify-content-lg-center{justify-content:center!important;}
  .justify-content-lg-between{justify-content:space-between!important;}
  .justify-content-lg-around{justify-content:space-around!important;}
  .align-items-lg-start{align-items:flex-start!important;}
  .align-items-lg-end{align-items:flex-end!important;}
  .align-items-lg-center{align-items:center!important;}
  .align-items-lg-baseline{align-items:baseline!important;}
  .align-items-lg-stretch{align-items:stretch!important;}
  .align-content-lg-start{align-content:flex-start!important;}
  .align-content-lg-end{align-content:flex-end!important;}
  .align-content-lg-center{align-content:center!important;}
  .align-content-lg-between{align-content:space-between!important;}
  .align-content-lg-around{nt;align-content:space-around!important;}
  .align-content-lg-stretch{align-content:stretch!important;}
  .align-self-lg-auto{align-self:auto!important;}
  .align-self-lg-start{align-self:flex-start!important;}
  .align-self-lg-end{align-self:flex-end!important;}
  .align-self-lg-center{align-self:center!important;}
  .align-self-lg-baseline{align-self:baseline!important;}
  .align-self-lg-stretch{align-self:stretch!important;}
}
@media (min-width:1200px){
  .flex-xl-row{flex-direction:row!important;}
  .flex-xl-column{flex-direction:column!important;}
  .flex-xl-row-reverse{flex-direction:row-reverse!important;}
  .flex-xl-column-reverse{flex-direction:column-reverse!important;}
  .flex-xl-wrap{flex-wrap:wrap!important;}
  .flex-xl-nowrap{flex-wrap:nowrap!important;}
  .flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important;}
  .justify-content-xl-start{justify-content:flex-start!important;}
  .justify-content-xl-end{justify-content:flex-end!important;}
  .justify-content-xl-center{justify-content:center!important;}
  .justify-content-xl-between{justify-content:space-between!important;}
  .justify-content-xl-around{justify-content:space-around!important;}
  .align-items-xl-start{align-items:flex-start!important;}
  .align-items-xl-end{align-items:flex-end!important;}
  .align-items-xl-center{align-items:center!important;}
  .align-items-xl-baseline{align-items:baseline!important;}
  .align-items-xl-stretch{align-items:stretch!important;}
  .align-content-xl-start{align-content:flex-start!important;}
  .align-content-xl-end{align-content:flex-end!important;}
  .align-content-xl-center{align-content:center!important;}
  .align-content-xl-between{align-content:space-between!important;}
  .align-content-xl-around{nt;align-content:space-around!important;}
  .align-content-xl-stretch{align-content:stretch!important;}
  .align-self-xl-auto{align-self:auto!important;}
  .align-self-xl-start{align-self:flex-start!important;}
  .align-self-xl-end{align-self:flex-end!important;}
  .align-self-xl-center{align-self:center!important;}
  .align-self-xl-baseline{align-self:baseline!important;}
  .align-self-xl-stretch{align-self:stretch!important;}
}

              
            
!

JS

              
                
              
            
!
999px

Console