<section> should be wrapped as inline.
-For example, <code><section></code> should be wrapped as inline. -+{% highlight html linenos %} +For example,
<section> should be wrapped as inline.
+{% endhighlight %}
Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
<p>Sample text here...</p>
-<pre> - <p>Sample text here...</p> -</pre> -+{% highlight html linenos %} +
<p>Sample text here...</p>+{% endhighlight %} +
You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
-<table class="table"> - … -</table> -+{% highlight html linenos %} +
-<table class="table table-striped"> - … -</table> -+{% highlight html linenos %} +
.table-borderedAdd borders and rounded corners to the table.
@@ -704,11 +703,11 @@ For example, <code><section></code> should be wrapped --<table class="table table-bordered"> - … -</table> -+{% highlight html linenos %} +
.table-hoverEnable a hover state on table rows within a <tbody>.
-<table class="table table-hover"> - … -</table> -+{% highlight html linenos %} +
.table-condensedMakes tables more compact by cutting cell padding in half.
@@ -782,11 +782,12 @@ For example, <code><section></code> should be wrapped --<table class="table table-condensed"> - … -</table> -+{% highlight html linenos %} +
+{% highlight html linenos %}
...
- <tr class="success">
- <td>1</td>
- <td>TB - Monthly</td>
- <td>01/04/2012</td>
- <td>Approved</td>
- </tr>
+
+ 1
+ TB - Monthly
+ 01/04/2012
+ Approved
+
...
-
+{% endhighlight %}
+
-<table> - <caption>...</caption> - <thead> - <tr> - <th>...</th> - <th>...</th> - </tr> - </thead> - <tbody> - <tr> - <td>...</td> - <td>...</td> - </tr> - </tbody> -</table> -+{% highlight html linenos %} +
| ... | +... | +... | +
|---|---|---|
| ... | +... | +... | +
-<form> - <fieldset> - <legend>Legend</legend> - <label>Label name</label> - <input type="text" placeholder="Type something…"> - <span class="help-block">Example block-level help text here.</span> - <div class="checkbox"> - <label> - <input type="checkbox"> Check me out - </label> - </div> - <button type="submit" class="btn">Submit</button> - </fieldset> -</form> -+{% highlight html linenos %} + +{% endhighlight %}
-<form class="form-inline"> - <input type="text" class="span3" placeholder="Email"> - <input type="password" class="span3" placeholder="Password"> - <div class="checkbox"> - <label> - <input type="checkbox"> Remember me - </label> - </div> - <button type="submit" class="btn">Sign in</button> -</form> -+{% highlight html linenos %} + +{% endhighlight %}
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:
@@ -1074,32 +1072,32 @@ For example, <code><section></code> should be wrapped --<form class="form-horizontal"> - <div class="control-group"> - <label class="control-label" for="inputEmail">Email</label> - <div class="controls"> - <input type="text" id="inputEmail" placeholder="Email"> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="inputPassword">Password</label> - <div class="controls"> - <input type="password" id="inputPassword" placeholder="Password"> - </div> - </div> - <div class="control-group"> - <div class="controls"> - <div class="checkbox"> - <label> - <input type="checkbox"> Remember me - </label> - </div> - <button type="submit" class="btn">Sign in</button> - </div> - </div> -</form> -+{% highlight html linenos %} + +{% endhighlight %}
-<input type="text" placeholder="Text input"> -+{% highlight html linenos %} + +{% endhighlight %}
Form control which supports multiple lines of text. Change rows attribute as necessary.
-<textarea rows="3"></textarea> -+{% highlight html linenos %} + +{% endhighlight %}
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
@@ -1148,27 +1146,21 @@ For example, <code><section></code> should be wrapped -
-<div class="checkbox">
- <label>
- <input type="checkbox" value="">
+{% highlight html linenos %}
+
+
+
-<div class="radio">
- <label>
- <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+
+
+
+{% endhighlight %}
Inline checkboxes
Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.
@@ -1183,17 +1175,17 @@ For example, <code><section></code> should be wrapped
3
-
-<label class="checkbox-inline">
- <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
-</label>
-<label class="checkbox-inline">
- <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
-</label>
-<label class="checkbox-inline">
- <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
-</label>
-
+{% highlight html linenos %}
+
+
+
+{% endhighlight %}
Selects
Use the default option or specify a multiple="multiple" to show multiple options at once.
@@ -1214,23 +1206,23 @@ For example, <code><section></code> should be wrapped
-
-<select>
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
-</select>
+{% highlight html linenos %}
+
-<select multiple="multiple">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
-</select>
-
+
+{% endhighlight %}
@@ -1242,9 +1234,9 @@ For example, <code><section></code> should be wrapped
--<input id="focusedInput" type="text" value="This is focused..."> -+{% highlight html linenos %} + +{% endhighlight %}
Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.
-<input class="span3" type="email" required> -+{% highlight html linenos %} + +{% endhighlight %}
Add the disabled attribute on an input to prevent user input and trigger a slightly different look.
-<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> -+{% highlight html linenos %} + +{% endhighlight %}
Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.
-<form class="form-inline"> - <fieldset disabled> - <input type="text" class="span4" placeholder="Disabled input"> - <select class="span4"> - <option>Disabled select</option> - </select> - <div class="checkbox"> - <label> - <input type="checkbox"> Can't check this - </label> - </div> - <button type="submit" class="btn btn-primary">Submit</button> - </fieldset> -</form> -+{% highlight html linenos %} + +{% endhighlight %}
Bootstrap includes validation styles for error, warning, info, and success messages. To use:
@@ -1330,26 +1326,26 @@ For example, <code><section></code> should be wrapped --<div class="control-group has-warning"> - <label class="control-label" for="inputWarning">Input with warning</label> - <div class="controls"> - <input type="text" class="input-with-feedback" id="inputWarning"> - </div> -</div> -<div class="control-group has-error"> - <label class="control-label" for="inputError">Input with error</label> - <div class="controls"> - <input type="text" class="input-with-feedback" id="inputError"> - </div> -</div> -<div class="control-group has-success"> - <label class="control-label" for="inputSuccess">Input with success</label> - <div class="controls"> - <input type="text" class="input-with-feedback id="inputSuccess""> - </div> -</div> -+{% highlight html linenos %} +
-<div class="input-group span9">
- <span class="input-group-addon">@</span>
- <input type="text" placeholder="Username">
-</div>
+{% highlight html linenos %}
+
+ @
+
+
-<div class="input-group span6">
- <input type="text">
- <span class="input-group-addon">.00</span>
-</div>
+
+
+ .00
+
-<div class="input-group span3">
- <span class="input-group-addon">$</span>
- <input type="text">
- <span class="input-group-addon">.00</span>
-</div>
-
+Add the relative form sizing classes to the `.input-group-addon`.
@@ -1412,20 +1408,22 @@ For example, <code><section></code> should be wrapped --<div class="input-group span9"> - <span class="input-group-addon input-large">@</span> - <input type="text" class="input-large" placeholder="Username"> -</div> -<div class="input-group span9"> - <span class="input-group-addon">@</span> - <input type="text" placeholder="Username"> -</div> -<div class="input-group span9"> - <span class="input-group-addon input-small">@</span> - <input type="text" class="input-small" placeholder="Username"> -</div> -+{% highlight html linenos %} +
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
-<div class="input-group span7">
- <span class="input-group-btn">
- <button class="btn" type="button">Go!</button>
- </span>
- <input type="text">
-</div>
+{% highlight html linenos %}
+
+
+
+
+
+
-<div class="input-group span7">
- <input type="text">
- <span class="input-group-btn">
- <button class="btn" type="button">Go!</button>
- </span>
-</div>
-
+
-<div class="input-group span7">
- <div class="input-group-btn btn-group">
- <button class="btn dropdown-toggle" data-toggle="dropdown">
- Action
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- ...
- </ul>
- </div>
- <input type="text">
-</div>
+{% highlight html linenos %}
+
+
+
+
+
+
+
-<div class="input-group span7">
- <input type="text">
- <div class="input-group-btn btn-group">
- <button class="btn dropdown-toggle" data-toggle="dropdown">
- Action
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- ...
- </ul>
- </div>
-</div>
-
+-<div class="input-prepend"> - <div class="btn-group">...</div> - <input type="text" class="span3"> -</div> -<div class="input-append"> - <input type="text" class="span3"> - <div class="btn-group">...</div> -</div> -+{% highlight html linenos %} +
Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.
-<input class="input-large" type="text" placeholder=".input-large"> -<input type="text" placeholder="Default input"> -<input class="input-small" type="text" placeholder=".input-small"> -+{% highlight html linenos %} + + + +{% endhighlight %}
Use .span1 to .span12 for setting widths on inputs that match Bootstrap's grid system.
-<input class="span1" type="text" placeholder=".span1">
-<input class="span2" type="text" placeholder=".span2">
-<input class="span3" type="text" placeholder=".span3">
-<select class="span1">
+{% highlight html linenos %}
+
+
+
+
+
+
+
+{% endhighlight %}
+
If you need multiple inputs on the same line, wrap them in the standard grid markup (with .row and .span* classes). Each input should have it's own column and will expand to fill the available width automatically.
-<div class="row"> - <div class="span4"> - <input type="text" placeholder=".span4"> - </div> - <div class="span4"> - <input type="text" placeholder=".span4"> - </div> - <div class="span4"> - <input type="text" placeholder=".span4"> - </div> -</div> -+{% highlight html linenos %} +
Present data in a form that's not editable without using actual form markup.
--<span class="input-xlarge uneditable-input">Some value here</span> -+{% highlight html linenos %} +Some value here +{% endhighlight %}
End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.
-<div class="form-actions"> - <button type="submit" class="btn btn-primary">Save changes</button> - <button type="button" class="btn">Cancel</button> -</div> -+{% highlight html linenos %} +
Inline and block level support for help text that appears around form controls.
@@ -1688,18 +1694,20 @@ For example, <code><section></code> should be wrapped --<input type="text"><span class="help-inline">Inline help text</span> -+{% highlight html linenos %} + +Inline help text +{% endhighlight %}
-<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> -+{% highlight html linenos %} + +A longer block of help text that breaks onto a new line and may extend beyond one line. +{% endhighlight %} @@ -1785,24 +1793,25 @@ For example, <code><section></code> should be wrapped -
-<p> - <button class="btn btn-large btn-primary" type="button">Large button</button> - <button class="btn btn-large" type="button">Large button</button> -</p> -<p> - <button class="btn btn-primary" type="button">Default button</button> - <button class="btn" type="button">Default button</button> -</p> -<p> - <button class="btn btn-small btn-primary" type="button">Small button</button> - <button class="btn btn-small" type="button">Small button</button> -</p> -<p> - <button class="btn btn-mini btn-primary" type="button">Mini button</button> - <button class="btn btn-mini" type="button">Mini button</button> -</p> -+{% highlight html linenos %} +
+ + +
++ + +
++ + +
++ + +
+{% endhighlight %} +Create block level buttons—those that span the full width of a parent— by adding .btn-block.
-<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> -<button class="btn btn-large btn-block" type="button">Block level button</button> -+{% highlight html linenos %} + + +{% endhighlight %}
Make buttons look unclickable by fading them back 50%.
+Add the disabled attribute to <button> buttons.
+ + +
+{% highlight html linenos %} + + +{% endhighlight %} +Add the .disabled class to <a> buttons.
-<a href="#" class="btn btn-large btn-primary disabled">Primary link</a> -<a href="#" class="btn btn-large disabled">Link</a> -+{% highlight html linenos %} +Primary link +Link +{% endhighlight %}
We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
Add the disabled attribute to <button> buttons.
- - -
--<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button> -<button type="button" class="btn btn-large" disabled>Button</button> --
Use the .btn class on an <a>, <button>, or <input> element.
-<a class="btn" href="">Link</a> -<button class="btn" type="submit">Button</button> -<input class="btn" type="button" value="Input"> -<input class="btn" type="submit" value="Submit"> --
As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.
As a best practice, we highly recommend matching using the <button< element whenever possible to ensure matching cross-browser rendering.
-<img src="..." class="img-rounded"> -<img src="..." class="img-circle"> -<img src="..." class="img-thumbnail"> -+{% highlight html linenos %} +
Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:
-<i class="glyphicon-search"></i> -+{% highlight html linenos %} + +{% endhighlight %}
Want to change the icon color? Just change the color of the parent element.
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
@@ -2089,87 +2098,86 @@ For example, <code><section></code> should be wrapped-<div class="btn-toolbar"> - <div class="btn-group"> - - <a class="btn" href="#"><i class="glyphicon-align-left"></i></a> - <a class="btn" href="#"><i class="glyphicon-align-center"></i></a> - <a class="btn" href="#"><i class="glyphicon-align-right"></i></a> - <a class="btn" href="#"><i class="glyphicon-align-justify"></i></a> - </div> -</div> -+{% highlight html linenos %} + +{% endhighlight %}
-<div class="btn-group"> - <a class="btn btn-primary" href="#"><i class="glyphicon-user icon-white"></i> User</a> - <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#"><i class="glyphicon-pencil"></i> Edit</a></li> - <li><a href="#"><i class="glyphicon-trash"></i> Delete</a></li> - <li><a href="#"><i class="glyphicon-ban-circle"></i> Ban</a></li> - <li class="divider"></li> - <li><a href="#"><i class="i"></i> Make admin</a></li> - </ul> -</div> -+{% highlight html linenos %} +
-<a class="btn btn-large" href="#"><i class="glyphicon-star"></i> Star</a> -+{% highlight html linenos %} + Star +{% endhighlight %}
-<a class="btn btn-small" href="#"><i class="glyphicon-star"></i></a> -+{% highlight html linenos %} + +{% endhighlight %}
-<ul class="nav nav-list"> - <li class="active"><a href="#"><i class="glyphicon-home icon-white"></i> Home</a></li> - <li><a href="#"><i class="glyphicon-book"></i> Library</a></li> - <li><a href="#"><i class="glyphicon-pencil"></i> Applications</a></li> - <li><a href="#"><i class="i"></i> Misc</a></li> -</ul> -+{% highlight html linenos %} + +{% endhighlight %}
-<div class="control-group"> - <label class="control-label" for="inputIcon">Email address</label> - <div class="controls"> - <div class="input-group"> - <span class="input-group-addon"><i class="glyphicon-envelope"></i></span> - <input class="span2" id="inputIcon" type="text"> - </div> - </div> -</div> -+{% highlight html linenos %} +