Welcome to the HTML Prototyper's Toolbox!

Built with Bootstrap, from Twitter, the HTML prototyper's toolbox is a set of layouts that NiceUX uses to speed up their prototyping process.

For additional documentation, please visit Twitter's Bootstrap documentation.

Download A New ToolkitDownload A New Starter Page

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.

Twitter from Bootstrap home page image

1 Column with Fluid Background

One column layout with a 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

One column layout

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

Two columns layout 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

Four columns layouts

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

Two columns layout 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>