CSS Grid & Utilities

The skin is built on the Bootstrap 3 framework. For more information, see getbootstrap.com/css

Width of content

dnn_layout is the page content wrapper:

Device width	Content width
Large screens (≥1280px)	1170px
Tablets (768px ~ 1030px)	736px
Phones (<768px)	auto

content_mid adds spacing on both sides of the page (15px on large screens and tablets):

<div class="dnn_layout">
  <div class="content_mid clearfix"> content ... </div>
</div>

Bootstrap 12 grid layout

<!-- Tablet and desktop devices are 50% wide, mobile device is 100% wide -->
<div class="row">
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-6">.col-sm-6</div>
</div>

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>

Display and hide elements

	Phones (<768px)	Tablets (≥768px)	Desktops (≥992px)	Large desktops (≥1200px)
.visible-xs	Visible	Hidden	Hidden	Hidden
.visible-sm	Hidden	Visible	Hidden	Hidden
.visible-md	Hidden	Hidden	Visible	Hidden
.visible-lg	Hidden	Hidden	Hidden	Visible
.hidden-xs	Hidden	Visible	Visible	Visible
.hidden-sm	Visible	Hidden	Visible	Visible
.hidden-md	Visible	Visible	Hidden	Visible
.hidden-lg	Visible	Visible	Visible	Hidden

Visible in mobile devices and hidden in other devices
<div class="visible-xs">content...</div>

Visible in other devices and hidden in mobile devices
<div class="hidden-xs">content...</div>

Vertical spacing

The skin ships with vertical spacing utilities in 5 / 10 / 20 / 30 / 40 / 50 / 60 pixel steps:

/* Margin */
.mt-5  { margin-top: 5px; }     .mb-5  { margin-bottom: 5px; }
.mt-10 { margin-top: 10px; }    .mb-10 { margin-bottom: 10px; }
.mt-20 { margin-top: 20px; }    .mb-20 { margin-bottom: 20px; }
.mt-30 { margin-top: 30px; }    .mb-30 { margin-bottom: 30px; }
.mt-40 { margin-top: 40px; }    .mb-40 { margin-bottom: 40px; }
.mt-50 { margin-top: 50px; }    .mb-50 { margin-bottom: 50px; }
.mt-60 { margin-top: 60px; }    .mb-60 { margin-bottom: 60px; }

/* Padding */
.pt-5  { padding-top: 5px; }    .pb-5  { padding-bottom: 5px; }
.pt-10 { padding-top: 10px; }   .pb-10 { padding-bottom: 10px; }
.pt-20 { padding-top: 20px; }   .pb-20 { padding-bottom: 20px; }
.pt-30 { padding-top: 30px; }   .pb-30 { padding-bottom: 30px; }
.pt-40 { padding-top: 40px; }   .pb-40 { padding-bottom: 40px; }
.pt-50 { padding-top: 50px; }   .pb-50 { padding-bottom: 50px; }
.pt-60 { padding-top: 60px; }   .pb-60 { padding-bottom: 60px; }