The default DW Fixel grid system utilizes 4 columns. As this is a 4-column grid, you should always add up to 4 for each row.

<div class="grid-wrap">
  <div class="col-grid">
    <div class="col-1">.col-1</div>
    <div class="col-1">.col-1</div>
    <div class="col-1">.col-1</div>
    <div class="col-1">.col-1</div>
  </div>
  <div class="col-grid">
    <div class="col-3">.col-3</div>
    <div class="col-1">.col-1</div>
  </div>
</div>

All HTML headings, <h1> through <h6> are available.

Display alert messages by using the follwing markup with .alert-error, .alert-info, .alert-info or .alert-success classes. To change the icon in the left of alert messages, you can add .icon-NAME class to span elements, more details about the icon-NAME at Font-Awesome

<div class="alert alert-info fade in">
  <a class="close" data-dismiss="alert" href="#">×</a>
  <span class="icon-info-sign"> </span>
  messages goes here...
</div>

Simple HTML Styles

<a href="#">...<a>
<span class="underline">...<span>
<span class="highlight">...<span>

For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Unordered Lists

<ul class="styled">
  <li>...</li>
</ul>

Ordered Lists

<ol>
  <li>...</li>
</ol>

Use the span tag with -success, -warning, -important, -info or .inverse classes.

<span class="label [label-NAME]">Default</span>

<span class="badge [badge-NAME]">1</span>

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-toggle="tab" href="#tab1">tab name 1..</a></li>
  <li><a data-toggle="tab" href="#tab2">tab name 2..</a></li>
</ul>
<div class="tab-content" id="myTabContent">
  <div id="tab1" class="tab-pane fade in active">content 1...</div>
  <div id="tab1" class="tab-pane fade">content 2...</div>
</div>

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Content Area 1
        <i class="icon-chevron-down"></i>
      </a>
    </div>
  <div id="collapseOne" class="accordion-body collapse">
    <div class="accordion-inner">
      content 1...
    </div>
  </div>
</div>
<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Content Area 2
        <i class="icon-chevron-down"></i>
      </a>
    </div>
  <div id="collapseOne" class="accordion-body collapse">
    <div class="accordion-inner">
      content 2...
    </div>
  </div>
</div>

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<pre class="prettyprint linenums">
pre {
  width: 100%;
  margin: 0 0 15px 0;
  padding: 0 10px;
  background-color: #F2F2F2;
}</pre>

Add any of the following classes to the .table base class.
.table-striped, .table-bordered, .table-hover, .table-condensed

Use contextual classes to color table rows.
.success, .error, .warning, .info

<p><span class="dropcap nocolor">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan.</p>
<p><span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan.</p>
<p><span class="dropcap color">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan.</p>

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

Horizontal form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

• Add .form-horizontal to the form
• Wrap labels and controls in .control-group
• Add .control-label to the label
• Wrap any associated controls in .controls for proper alignment

Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only <a> and <button> elements for the best rendering.

Button classes

btn, btn btn-primary, btn btn-info, btn btn-success, btn btn-warning, btn btn-danger, btn btn-inverse, btn btn-link

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

Default progress bar with a vertical gradient.

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

Uses a gradient to create a striped effect. Not available in IE7-8.

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

<div class="progress progress-striped active">
  <div class="bar" style="width: 20%;"></div>
</div>

Default progress bar with a vertical gradient.

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
  </ol>
  
  <div class="carousel-inner">
    <div class="active item">
      <img src=".." />
      <div class="carousel-caption">caption 1...</div>
    </div>
    <div class="item">
      <img src=".." />
      <div class="carousel-caption">caption 2...</div>
    </div>
  </div>
  
  <a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="icon-chevron-left"> </i></a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="icon-chevron-right"> </i></a>
</div>

<iframe src="http://player.vimeo.com/video/70002703" height="361" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

You can use icons by adding class name .icon-[ICON_NAME] to any element, find more details at Font-Awesome