At the core of Bootstrap are a set of basic HTML elements that have been styled in such a way that allow for easy enhancement via classes and user styles.
Starting with Typography, with the default font stack, Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif. These are all standard fonts, and included as defaults on all major cpmputers, falling back to sans-serif, the catch all to tell the browser to use the default font that the user has decided. All body copy has the font-size set at 14 pixels, with the line-height set at 20 pixels. The <p> tag has a margin-bottom of 10 pixels, or half the line-height.
All six standard heading levels have been styled in Bootstrap, with the <h1> at 36 pixels high, and the <h6> down to 12 pixels in height (for reference, body text is 14 pixels in height by default). In addition, to add an inline sub-heading to any of the headings, simply add <small> around any of the elements, and you will get smaller text, in a lighter color.
In the case of the <h1>, the small text is 24 pixels tall, normal font weight (i.e., not bold), and gray instead of black.
h1 small {
font-size:24px;
font-weight:normal;
line-height:1;
color:#999;
}To add some emphasis to a paragraph, add class="lead". This will give you larger font size, lighter weight, and a taller line height. This is usually used for the first few paragraphs in a section, but can really be used anywhere.
<p class="lead">Bacon ipsum dolor sit amet tri-tip pork loin ball tip frankfurter swine boudin meatloaf shoulder short ribs cow drumstick beef jowl. Meatball chicken sausage tail, kielbasa strip steak turducken venison prosciutto. Chuck filet mignon tri-tip ribeye, flank brisket leberkas. Swine turducken turkey shank, hamburger beef ribs bresaola pastrami venison rump.</p>
In addition to using the <small> tag within headings, as discussed above, you can also use it with body copy. When <small> is applied to body text, the font shrinks to 85% of its original size.
To add emphasis to text, simply wrap it in a <strong> tag. This will add font-weight-bold to the selected text.
For italics, wrap your content in the <em> tag. "em" derives from the word "emphasis", and is meant to add stress to your text.
|
Note
|
Heads Up!
You might be thinking to yourself, why not just use the <b> or <i> tags instead of <em> or <strong>. In HTML5, <b> is meant to highlight words or phrases without conveying additional importance—for example, key terms or names—while <i> is mostly for voice, technical terms, internal dialogue, etc. For more information about the semantic changes to <b> and <i>, check out W3.org’s article.
|
Along with <strong> and <em>, Boootstrap offers a few other classes that can be used to provide emphasis. These could be applied to paragraphs, or spans.
<p class="muted">This content is muted</p>
<p class="text-warning">This content carries a warning class</p>
<p class="text-error">This content carries an error class</p>
<p class="text-info">This content carries an info class</p>
<p class="text-success">This content carries a success class</p>
<p>This content has <em>emphasis</em>, and can be <strong>bold</strong></p>
The HTML <abbr> element provides markup for abbreviations or acronyms, like WWW or HTTP. By marking up abbreviations, you can give useful information to browsers, spell checkers, translation systems or search engines. Bootstrap styles <abbr> elements with a light dotted border along the bottom, and reveals the full text on hover (as long as you add that text to the <abbr> title attribute).
<abbr title="Real Simple Syndication">RSS</abbr>
Add .initialism to an <abbr> for a slightly smaller font size.
<abbr title="Real Simple Syndication">RSS</abbr>
Adding <address> elements to your page can help screen readers and search engines locate any physical addresses and phone numbers in the text. It can also be used to mark up email addresses. Since the <address> defaults to display:block; you’ll need to use <br> tags to add line breaks to the enclosed address text (for example, to split the street address and city onto separate lines).
<address>
<strong>O'Reilly Media, Inc.</strong><br>
1005 Gravenstein HWY North<br>
Sebastopol, CA 95472<br>
<abbr title="Phone">P:</abbr> <a href="tel:+17078277000">(707) 827-7000</a>
</address>
<address>
<strong>Jake Spurlock</strong><br />
<a href="mailto:#">[email protected]</a>
</address>
To add blocks of quoted text to your document—or for any quotation that you want to set apart from the main text flow—add the <blockquote> tag around the text. For best results, and for line breaks, wrap each subsection in a <p> tag. Bootstrap’s default styling indents the text, and adds a thick grey border along the left side. To identify the source of the quote, add the <small> tag, and inside that, add the source’s name wrapped in a <cite> tag. When you put it all together, you get something that looks like this:
<blockquote>
<p>That this is needed, desperately needed, is indicated by the incredible uptake of Bootstrap. I use it in all the server software I'm working on. And it shows through in the templating language I'm developing, so everyone who uses it will find it's "just there" and works, any time you want to do a Bootstrap technique. Nothing to do, no libraries to include. It's as if it were part of the hardware. Same approach that Apple took with the Mac OS in 1984.</p>
<small>Developer of RSS, <cite title="Source Title">Dave Winer</cite></small>
</blockquote>|
Note
|
Heads Up!
If you want a <blockquote> with content that is right-aligned, simply add .pull-right to the tag. In addition to the right-aligned text, the entire blockquote is floated to the right. This creates nice pull-quotes in your content.
|
Bootstrap offers support and styling for the three main list types that HTML offers: ordered, unordered, and definition lists. An unordered list is a list that doesn’t have any particular order, and is traditionally styled with bullets.
<h3>Favorite Outdoor Activites</h3>
<ul>
<li>Backpacking in Yosemite</li>
<li>Hiking in Arches
<ul>
<li>Delicate Arch</li>
<li>Park Avenue</li>
</ul>
</li>
<li>Biking the Flintstones Trail</li>
</ul>
If you have an ordered list that you would like to remove the bullets from, add class="unstyled" to the opening <ul> tag.
|
Note
|
Personally, I hold a strong aversion to using the |
An ordered list is a list that falls in some sort of sequential order, and is prefaced by numbers rather then bullets. This is handy when you want to build a list of numbered items, like a task list, guide items, or even a list of comments on a blog post.
<h3>Self-Referential Task List</h3>
<ol>
<li>Turn off the internet.
<li>Write the book</li>
<li>... Profit?</li>
</ul>
The third type of list you get with Bootstrap is the definition list. The definition list differs from the ordered and unordered list in that instead of just having a block level <li> element, each list item can consist of both the <dt> and the <dd> elements. <dt> stands for "definition term," and like a dictionary, this is the term (or phrase) that is being defined. Subsequently, the <dd> is the definition of the <dt>.
A lot of times in markup, you will see people using headings inside an unordered list. This works, but maybe isn’t the most semantic way to markup the text. A better idea would be to create a <dl> and then style the <dt> and <dd> as you would the heading and the text. That being said, out of the box, Bootstrap offers some clean default styles, and an option for a side-by-side layout of each definition.
<h3>Common Electronics Parts</h3>
<dl>
<dt>LED</dt>
<dd>A light-emitting diode (LED) is a semiconductor light source.</dd>
<dt>Servo</dt>
<dd>Servos are small, cheap, mass-produced actuators used for radio control and small robotics.</dd>
</dl>
To change the <dl> to a horizontal layout, with the <dt> on the left side, and the <dd> on the right, simply add class="dl-horizontal" to the opening tag.
|
Note
|
Heads Up!
Horizontal description lists will truncate terms that are too long to fit in the left column with text-overflow. Additionally, in narrower viewports, they will automatically change to the default stacked layout.
|
There are two different key ways to display code with Bootstrap. The first is the <code> tag, and the second is with the <pre> tag. Generally, if you are going to be displaying code inline, then you should use the <code> tag, but if it needs to be displayed as a standalone block element, or if it has multiple lines, then you should use the <pre> tag.
<p>Instead of always using divs, in HTML5, you can use new elements like <code><section></code>, <code><header></code>, and <code><footer></code>. The html should look something like this:</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>|
Note
|
Heads Up!
Make sure that when you use the <pre> and <code> tags, you use the unicode variants for the opening and closing tags. < and >
|
One of my favorite parts of Bootstrap is the nice way that tables are handled. I do a lot of work looking at and building tables, and the clean layout is great feature that’s included in Bootstrap right off the bat. Bootstrap supports the following elements:
| Tag | Description |
|---|---|
|
Wrapping element for displaying data in a tabular format |
|
Container element for table header rows ( |
|
Container element for table rows ( |
|
Container element for a set of table cells ( |
|
Default table cell |
|
Special table cell for column (or row, depending on scope and placement) labels. Must be used within a |
|
Description or summary of what the table holds, especially useful for screen readers |
If you want a nice basic table style with just some light padding and horizontal dividers only, add the base class of .table to any table. The basic layout has a top border on all of the <td> elements.
<table class="table">
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>With the base table markup, and adding the .table class, there are few additional clases that you can add to style the markup. There are three classes, .table-striped, .table-bordered, .table-hover, and .table-condensed.
By adding the .table-striped class, you will get stripes on rows within the <tbody>. This is done via the CSS :nth-child selector which is not available on Internet Explorer 7-8.
If you add the .table-bordered class, you will get borders surrounding every element, and rounded corners around the entire table.
If you add the .table-hover class, when you hover over a row, a light grey background will be added to rows while the user hovers over them.
If you want to style the table rows, you could add the following classes to change the background color.
| Class | Description | Background Color |
|---|---|---|
|
Indicates a successful or positive action. |
Green |
|
Indicates a dangerous or potentially negative action. |
Red |
|
Indicates a warning that might need attention. |
Yellow |
|
Used as an alternative to the default styles. |
Blue |
Another one of the highlights of using Bootstrap is the attention that is paid to forms. As a web developer, one of my least favorite things to do is style forms. Bootstrap makes it easy to do with the simple HTML markup and extended classes for different styles of forms.
The basic form structure comes styled in Bootstrap, without needing to add any extra helper classes. If you use the placeholder, it is only supported in newer browsers. In older ones, no text will be displayed.
<form>
<fieldset>
<legend>Legend</legend>
<label for="name">Label name</label>
<input type="text" id="name" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox" for="checkbox">
<input type="checkbox" id="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>With a few helper classes, you can dynamically update the layout of your form. Bootstrap comes with a few preset styles you can use.
Add .form-search to the form tag, and then .search-query to the <input> for an input box with rounded corners, and an inline submit button.
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
To create a form where all of the elements are inline, and labels are along side, add the class .form-inline to the form tag. To have the label and the input on the same line, use the horizontal form below.
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
Bootstrap also comes with a pre-baked horizontal form; this one stands apart from the others not only in the amount of markup, but also in the presentation of the form. Traditionally you’d use a table to get a form layout like this, but Bootstrap manages to do it without. Even better, if you’re using the responsive CSS, the horizontal form will automatically adapt to smaller layouts by stacking the controls vertically.
To create a form that uses the horizontal layout, do the following:
-
Add a class of
form-horizontalto the parent<form>element -
Wrap labels and controls in a div with class
control-group -
Add a class of
control-labelto the labels -
Wrap any associated controls in a div with class
controlsfor proper alignment
<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">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>Bootstrap natively supports the most common form controls. Chief among them, input, textarea, checkbox and radio, and select.
The most common form text field is the input—this is where users will enter most of the essential form data. Bootstrap offers support for all native HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
<input type="text" placeholder="Text input">|
Note
|
Heads Up!
Both input and textarea default to a nice blue glow when in the :active state.
|
The textarea is used when you need multiple lines of input. You’ll find you mainly modify the rows attribute, changing it to the number of rows that you need to support (fewer rows = smaller box, more rows = bigger box).
:active, and the default textarea<textarea rows="3"></textarea>Checkboxes and radio buttons are great for when you want users to be able to choose from a list of preset options. When building a form, use checkbox if you want the user to select any number of options from a list, and radio if you want to limit them to just one selection.
<label class="checkbox">
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
If you want multiple checkboxes to appear on the same line together, simply add the .inline class to a series of checkboxes or radios.
<label for="option1" class="checkbox inline">
<input id="option1" type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label for="option2" class="checkbox inline">
<input id="option2" type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label for="option3" class="checkbox inline">
<input id="option3" type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>A select is used when you want to allow the user to pick from multiple options, but by default it only allows one. It’s best to use <select> for list options of which the user is familiar such as states or numbers. Use multiple="multiple" to allow the user to select more then one option. If you only want the user to choose one option, use type="radio".
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>In addition to the basic form controls listed in the previous section, Bootstrap offers a few other form components to complement the standard HTML form elements; for example, it lets you easily prepend and append content to inputs.
By adding prepended and appended content to an input field, you can add common elements to the text users input, like the dollar symbol, the @ for a Twitter username or anything else that might be common for your application interface. To use, wrap the input in a div with class input-prepend (to add the extra content before the user input) or input-append (to add it after). Then, within that same <div>, place your extra content inside a <span> with an add-on class, and place the <span> either before or after the <input> element.
<div class="input-prepend">
<span class="add-on">@</span>
<input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
<input class="span2" id="appendedInput" type="text">
<span class="add-on">.00</span>
</div>If you combine both of them, you simply need to add both the .input-prepend and .input-append classes to the parent <div>.
<div class="input-prepend input-append">
<span class="add-on">$</span>
<input class="span2" id="appendedPrependedInput" type="text">
<span class="add-on">.00</span>
</div>Rather then using a <span>, you can instead use <button> with a class of btn to attach (surprise!) a button or two to the input.
<div class="input-append">
<input class="span2" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button>
</div>If you are appending a button to a search form, you will get the same nice rounded corners that you would expect.
<form class="form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Search</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">Search</button>
<input type="text" class="span2 search-query">
</div>
</form>With the default grid system that is inherent in Bootstrap, you can use the .span* system for sizing form controls. In addition to the span column-sizing method, you can also use a handful of classes that take a relative approach to sizing. If you want the input to act as a block level element, you can add .input-block-level and it will be the full width of the container element.
<input class="input-block-level" type="text" placeholder=".input-block-level">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">|
Note
|
Heads Up!
In future versions of Bootstrap, these input classes will be altered to match the button sizes. For example, .input-large will increase the padding and font-size of an input.
|
You can use any .span from .span1 to .span12 for form control sizing.
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
...
</select>
<select class="span2">
...
</select>
<select class="span3">
...
</select>If you want to use multiple inputs on a line, simply use the .controls-row modifier class to apply the proper spacing. It floats the inputs to collapse the white space, and set the correct margins, and like the .row class, it also clears the float.
<div class="controls">
<input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<input class="span1" type="text" placeholder=".span1">
</div>
...If you want to present a form control, but not have it editable, simple add the class .uneditable-input.
<span class="input-xlarge uneditable-input">Some value here</span>At the bottom of a horizontal-form you can place the form actions. Then inputs will correctly line up with the floated form controls.
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn">Cancel</button>
</div>Bootstrap form controls can have either block or inline text that flows with the inputs.
<input type="text"><span class="help-inline">Inline help text</span>
<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>In addition to the :focus state, Bootstrap offers styling for disabled inputs, and classes for form validation.
When an input receives :focus, that is to say, a user clicks into the input, or tabs into it, the outline of the input is removed, and a box-shadow is applied. I remember the firs time that I saw this on Twitter’s site, it blew me away, and I had to dig into the code to see how they did it. In WebKit, this accomlished in the following manner:
input {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: box-shadow linear 0.2s;
}
input:focus {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}The <input> has a small inset box-shadow, this gives the appearence that the input sits lower then the page. When :focus is applied, an 8px light blue code is applied. The webkit-transition tells the browser to apply the effect in a linera manner over 0.2 seconds. Nice and subtle, a great effect.
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">If you need to disable an input, simply add the disabled attribute to not only disable it, but change the styling, and the mouse cursor when it hover over the element.
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Bootstrap includes validation styles for error, warning, info, and success messages. To use, simply add the appropriate class to the surrounding .control-group.
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>One of my favorite features of Bootstrap is the way that buttons are styled. Dave Winer, inventor of RSS, and big fan of Bootstrap has this to say about it:
That this is needed, desperately needed, is indicated by the incredible uptake of Bootstrap. I use it in all the server software I’m working on. And it shows through in the templating language I’m developing, so everyone who uses it will find it’s "just there" and works, any time you want to do a Bootstrap technique. Nothing to do, no libraries to include. It’s as if it were part of the hardware. Same approach that Apple took with the Mac OS in 1984.
scripting.com
I like to think that Bootstrap is doing that, unifying the web, and allowing a unified experience of what an interface can look like across the web. With the advent of Bootstrap, you can spot the sites that have taken it up ususally first by the buttons that they use. A grid layout, and many of the other features fade into the background, but buttons, forms and other uniying elements are a key part of Bootstrap. Maybe I’m the only person that does this, but when I come across a site that is using Bootstrap, I want to give a high five to whomever answers the webmaster email at that domain, as they probably just get it. It reminds me of a few years ago I would do the same thing when I would see wp-content in the HTML of sites that I would visit.
Now, buttons, and links can all look alike with Bootstrap, anything that is given that class of btn will inherit the default look of a grey button with rounded corners. Adding extra classes will add colors to the buttons.
| Buttons | Class | Description |
|---|---|---|
|
|
Standard gray button with gradient |
|
|
Provides extra visual weight and identifies the primary action in a set of buttons |
|
|
Used as an alternative to the default styles |
|
|
Indicates a successful or positive action |
|
|
Standard gray button with gradient |
|
|
Indicates a dangerous or potentially negative action |
|
|
Alternate dark gray button, not tied to a semantic action or use |
|
|
Deemphasize a button by making it look like a link while maintaining button behavior |
|
Note
|
Heads Up!
There are issues with Internet Explorer 9 not cropping background gradients on rounded corners, so buttons aren’t shown. Also, Internet Exporer doesn’t work well with disabled button elements. The rendered text is gray with a nasty text-shadow that hasn’t been fixed.
|
If you need larger or smaller buttons, simply add .btn-large, .btn-small, or .btn-mini to links or buttons.
<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>If you want to create buttons that display like a block level element, simply add the btn-block class. These buttons will display at 100% width.
<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>For anchor elements, simply add the class of .disabled to the tag, and the link will drop back in color, and will lose the gradient.
|
Note
|
Heads Up!
The .disabled class is being used much like the .active class. So, no .btn prefix, and remember, this is only for looks, to truly disable the link, you will want to use some javascript to really disable the link.
|
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>For a button, simply add the disabled attribute to the button. This will actually disable the button, so javascript is not directly needed.
<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>Images have three classes to apply some simple styles. They are .img-rounded that adds border-radius:6px to give the image rounded corners, .img-circle that adds makes the entire image a circle by adding border-radius:500px making the image round, and lastly, ing-polaroid, that adds a bit of padding and a grey border.
<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">Bootstrap bundles 140 icons into one sprite that can be used with buttons, links, navigation, and and form fields. The icons are provided by Glyphicons.
Users of Bootstrap are fortunate to use the Glyphicons free of use on Bootstrap projects. The developers have asked that you use a link back to Glyphicons when practical.
Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.
http://getbootstrap.com
To use the icons, simply use an <i> tag with the namespaced .icon- class. For example, if you wanted to use the edit icon, you would simply add the .icon-edit class to the <i> tag.
<i class="icon-edit"></i>If you want to use the white icon, simply add the .icon-white class to the tag.
<i class="icon-edit icon-white"></i>Using button groups, conbined with icons, you can create nice interface elements with minimal markup.
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
</div>When you are using icons next to a string of text, make sure to add a space to provide the proper alignment of the image. More of navigation code will be covered in the next chapter.
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
<li><a href="#"><i class="icon-book"></i> Library</a></li>
<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
<li><a href="#"><i class="i"></i> Misc</a></li>
</ul>