Welcome to the HTML Prototyper's Toolbox!

Built with Twitter's Bootstrap Framework

Don't thank NiceUX, Twitter's @mdo and @fat created the robust prototyping framework that is Bootstrap. The HTML Prototyper's Toolbox simply takes a different approach to using it to make prototyping easier for non-developers.

1 Column with Fluid Background

HTML

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="span12">
        <h1>Some Header</h1>
        <p>Some paragraph text. Booya!</p>
      </div>
    </div>
  </div>
</div>

CSS

.wrapper {
  background: #ddd;
}

1 Column

HTML

<div class="container">
  <div class="row">
    <div class="span12">
      <h1>Some Header</h1>
      <p>Some paragraph text. Booya!</p>
    </div>
  </div>
</div>

2 Columns with Left Sidebar

HTML

<div class="container">
  <div class="row">
    <div class="span4">
      <img src="http://placekitten.com/300/200">
    </div>
    <div class="span8">
      <h1>Some Header</h1>
      <p>Some paragraph text. Booya!</p>
    </div>
  </div>
</div>

4 Columns

HTML

<div class="container">
  <div class="row">
    <div class="span3">
      <img src="http://placekitten.com/220/200">
    </div>
    <div class="span3">
      <img src="http://placekitten.com/220/200">
    </div>
    <div class="span3">
      <img src="http://placekitten.com/220/200">
    </div>
    <div class="span3">
      <img src="http://placekitten.com/220/200">
    </div>
  </div>
</div>

2 Columns with Right Sidebar

HTML

<div class="container">
  <div class="row">
    <div class="span8">
      <h1>Some Header</h1>
      <p>Some paragraph text. Booya!</p>
    </div>
    <div class="span4">
      <img src="http://placekitten.com/300/200">
    </div>
  </div>
</div>