<h3 id="forms-inline">Inline form</h3>
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
<form class="bs-docs-example form-inline">
- <input type="text" class="span3" placeholder="Email">
- <input type="password" class="span3" placeholder="Password">
+ <input type="text" class="col-span-3" placeholder="Email">
+ <input type="password" class="col-span-3" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</form><!-- /example -->
{% highlight html linenos %}
<form class="form-inline">
- <input type="text" class="span3" placeholder="Email">
- <input type="password" class="span3" placeholder="Password">
+ <input type="text" class="col-span-3" placeholder="Email">
+ <input type="password" class="col-span-3" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
<p>This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.</p>
<form class="bs-docs-example form-inline">
- <input class="span3" type="email" placeholder="test@example.com" required>
+ <input class="col-span-3" type="email" placeholder="test@example.com" required>
</form>
{% highlight html linenos %}
-<input class="span3" type="email" placeholder="test@example.com" required>
+<input class="col-span-3" type="email" placeholder="test@example.com" required>
{% endhighlight %}
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
<form class="bs-docs-example form-inline">
<fieldset disabled>
<div>
- <input type="text" class="span4" placeholder="Disabled input">
+ <input type="text" class="col-span-4" placeholder="Disabled input">
</div>
<div>
- <select class="span4">
+ <select class="col-span-4">
<option>Disabled select</option>
</select>
</div>
<form class="form-inline">
<fieldset disabled>
<div>
- <input type="text" class="span4" placeholder="Disabled input">
+ <input type="text" class="col-span-4" placeholder="Disabled input">
</div>
<div>
- <select class="span4">
+ <select class="col-span-4">
<option>Disabled select</option>
</select>
</div>
<span class="input-group-addon">.00</span>
</div>
<br>
- <div class="input-group span3">
+ <div class="input-group col-span-3">
<span class="input-group-addon">$</span>
<input type="text">
<span class="input-group-addon">.00</span>
<span class="input-group-addon">.00</span>
</div>
-<div class="input-group span3">
+<div class="input-group col-span-3">
<span class="input-group-addon">$</span>
<input type="text">
<span class="input-group-addon">.00</span>
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
- <input class="span3" type="text" placeholder=".span3">
+ <input class="col-span-3" type="text" placeholder=".col-span-3">
<select class="span1">
<option>1</option>
<option>2</option>
<option>4</option>
<option>5</option>
</select>
- <select class="span3">
+ <select class="col-span-3">
<option>1</option>
<option>2</option>
<option>3</option>
{% highlight html linenos %}
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
-<input class="span3" type="text" placeholder=".span3">
+<input class="col-span-3" type="text" placeholder=".col-span-3">
<select class="span1">
...
</select>
<select class="span2">
...
</select>
-<select class="span3">
+<select class="col-span-3">
...
</select>
{% endhighlight %}
<p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="row">
- <div class="span4">
- <input type="text" placeholder=".span4">
+ <div class="col-span-4">
+ <input type="text" placeholder=".col-span-4">
</div>
- <div class="span4">
- <input type="text" placeholder=".span4">
+ <div class="col-span-4">
+ <input type="text" placeholder=".col-span-4">
</div>
- <div class="span4">
- <input type="text" placeholder=".span4">
+ <div class="col-span-4">
+ <input type="text" placeholder=".col-span-4">
</div>
</div>
</form>
{% highlight html linenos %}
<div class="row">
- <div class="span4">
- <input type="text" placeholder=".span4">
+ <div class="col-span-4">
+ <input type="text" placeholder=".col-span-4">
</div>
- <div class="span4">
- <input type="text" placeholder=".span4">
+ <div class="col-span-4">
+ <input type="text" placeholder=".col-span-4">
</div>
- <div class="span4">
- <input type="text" placeholder=".span4">
+ <div class="col-span-4">
+ <input type="text" placeholder=".col-span-4">
</div>
</div>
{% endhighlight %}
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<div class="bs-docs-example">
<div class="row">
- <div class="span3">
+ <div class="col-span-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
- <div class="span3">
+ <div class="col-span-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
- <div class="span3">
+ <div class="col-span-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div>
- <div class="span3">
+ <div class="col-span-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
</div><!-- /.bs-docs-example -->
{% highlight html linenos %}
<div class="row">
- <div class="span3">
+ <div class="col-span-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt="">
</a>
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<div class="bs-docs-example">
<div class="row">
- <div class="span4">
+ <div class="col-span-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
</div>
</div>
</div>
- <div class="span4">
+ <div class="col-span-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
</div>
</div>
</div>
- <div class="span4">
+ <div class="col-span-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
</div><!-- /.bs-docs-example -->
{% highlight html linenos %}
<div class="row">
- <div class="span3">
+ <div class="col-span-3">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<div class="caption">
<h2>Example</h2>
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;">
- <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
+ <input type="text" class="col-span-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
</div><!-- /example -->
{% highlight html linenos %}
<input type="text" data-provide="typeahead">