Bootstrap, Responsive Web Development

Hello, world!

...

Level 1 column

Level 2

...

…

My amazing Bootstrap site!

tag has a margin-bottom of 10 pixels, or half the line-height. Headings 11 Figure 2-1. Headings All six standard heading levels have been styled in Bootstrap, with the

at 36 pixels high, and the

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 around any of the elements, and you will get smaller text, in a lighter color. In the case of the

, 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; } Lead body copy 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 para‐ graphs in a section, but can really be used anywhere.

Bacon ipsum dolor sit amet tri-tip pork loin ball tip frankfurter swine boudin me12 | Chapter 2: Bootstrap CSS Figure 2-2. Lead Body Copy Classes Emphasis In addition to using the tag within headings, as discussed above, you can also use it with body copy. When is applied to body text, the font shrinks to 85% of its original size. Bold To add emphasis to text, simply wrap it in a tag. This will add font-weight bold to the selected text. Italics For italics, wrap your content in the tag. “em” derives from the word “emphasis”, and is meant to add stress to your text. You might be thinking to yourself, why not just use the or tags instead of or . In HTML5, is meant to highlight words or phrases without conveying additional importance—for example, key terms or names—while is mostly for voice, technical terms, internal dialogue, etc. For more information about the semantic changes to and , check out W3.org’s article. Emphasis classes Along with and , Boootstrap offers a few other classes that can be used to provide emphasis. These could be applied to paragraphs, or spans. Emphasis Classes.

This content is muted

This content carries a warning class

This content carries an error class

This content carries an info class
Typography | 13
This content carries a success class

This content has emphasis, and can be bold
Figure 2-3. Emphasis Classes Abbreviations The HTML 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 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 title attribute). Abbreviation Example. RSS Figure 2-4. Emphasis Classes 14 | Chapter 2: Bootstrap CSS Add .initialism to an for a slightly smaller font size. Abbreviation Example. RSS Figure 2-5. Emphasis Classes Addresses Adding
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
defaults to display:block; you’ll need to use
tags to add line breaks to the enclosed address text (for example, to split the street address and city onto separate lines). Address Markup.
O'Reilly Media, Inc.
1005 Gravenstein HWY North
Sebastopol, CA 95472
P: (707) 827-7000

Jake Spurlock
[email protected]
Typography | 15 Figure 2-6. Address Tag Blockquotes 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
tag around the text. For best results, and for line breaks, wrap each subsection in a
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 tag, and inside that, add the source’s name wrapped in a tag. When you put it all together, you get something that looks like this: Figure 2-7. Basic Blockquote Blockquote Markup.

That this is needed, desperately needed, is indicated by the incredible uptake of Boot Developer of RSS, Dave Winer
16 | Chapter 2: Bootstrap CSS If you want a
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. Figure 2-8. Pull-Right Blockquote Lists 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. Unordered List Unordered List Markup.
Favorite Outdoor Activites

Backpacking in Yosemite

Hiking in Arches

Delicate Arch

Park Avenue

Biking the Flintstones Trail

Typography | 17 Figure 2-9. Unordered List Example If you have an ordered list that you would like to remove the bullets from, add class="unstyled" to the opening
tag. Personally, I hold a strong aversion to using the
tag, and when I want a single spaced line break, I place each line in an unstyled unor‐ dered list. As an example, you might want a condensed address box, like the illustration above, you could have each line as a
. In my mind, this is the more semantic way to markup the text. Ordered List 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. Ordered List Markup.
Self-Referential Task List

Turn off the internet.
Write the book

... Profit?

Figure 2-10. Ordered List Example 18 | Chapter 2: Bootstrap CSS Definition List 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
element, each list item can consist of both the
and the
elements.
stands for “definition term,” and like a dictionary, this is the term (or phrase) that is being defined. Subsequently, the
is the definition of the
. 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
and then style the
and
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. Definition List Markup.
Common Electronics Parts

LED

A light-emitting diode (LED) is a semiconductor light source.

Servo

Servos are small, cheap, mass-produced actuators used for radio control and small rob
Figure 2-11. Definition List Example To change the
to a horizontal layout, with the
on the left side, and the
on the right, simply add class="dl-horizontal" to the opening tag. Figure 2-12. Horizontal Definition List Example Typography | 19 Horizontal description lists will truncate terms that are too long to fit in the left column with text-overflow. Additionally, in narrower view‐ ports, they will automatically change to the default stacked layout. Code There are two different key ways to display code with Bootstrap. The first is the tag, and the second is with the tag. Generally, if you are going to be displaying code inline, then you should use the tag, but if it needs to be displayed as a standalone block element, or if it has multiple lines, then you should use the tag. Instead of always using divs, in HTML5, you can use new elements like <section> <article> <h1>Article Heading</h1> </article> Make sure that when you use the and tags, you use the unicode variants for the opening and closing tags. < and > Tables 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: Table 2-1. Table Elements Bootsrap Supports Tag Description Wrapping element for displaying data in a tabular format Container element for table header rows () to label table columns Container element for table rows () in the body of the table Container element for a set of table cells (. This is done via the CSS :nth-child selector which is not available on Internet Explorer 7-8. Tables | 21 Figure 2-14. Striped Table Class Bordered Table If you add the .table-bordered class, you will get borders surrounding every element, and rounded corners around the entire table. Figure 2-15. Bordered Table Class Hover 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. Figure 2-16. Hover Table Class Condensed Table If you add the .table-condensed class, padding is cut in half on rows to condense the table. Useful if you want denser information. 22 | Chapter 2: Bootstrap CSS Figure 2-17. Condensed Table Class Table Row Classes If you want to style the table rows, you could add the following classes to change the background color. Table 2-2. Optional Table Row Classes Class Description Background Color .success Indicates a successful or positive action. Green .error Indicates a dangerous or potentially negative action. Red .warning Indicates a warning that might need attention. Yellow .info Used as an alternative to the default styles. Blue Figure 2-18. Table Row Classes Example Forms 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. Forms | 23 Figure 2-19. Basic Form Basic Form Structure. Legend Label name Example block-level help text here. Check me out Optional Form Layouts With a few helper classes, you can dynamically update the layout of your form. Bootstrap comes with a few preset styles you can use. Search Form Add .form-search to the form tag, and then .search-query to the for an input box with rounded corners, and an inline submit button. Basic Form Structure. 24 | Chapter 2: Bootstrap CSS Figure 2-20. Search Form Inline 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. Inline Form Code. Remember me Figure 2-21. Inline Form Example Horizontal 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-horizontal to the parent element • Wrap labels and controls in a div with class control-group • Add a class of control-label to the labels • Wrap any associated controls in a div with class controls for proper alignment Forms | 25 Figure 2-22. Horizontal Form Example Horizontal Form Code. Email Password Remember me Supported Form Controls Bootstrap natively supports the most common form controls. Chief among them, in put, textarea, checkbox and radio, and select. Inputs 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. 26 | Chapter 2: Bootstrap CSS Figure 2-23. Input Example Input Code. Both input and textarea default to a nice blue glow when in the :ac tive state. Textarea 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). Figure 2-24. Both the :active, and the default textarea Textarea Example. Checkboxes and radios 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. Forms | 27 Figure 2-25. Radio and Checkbox example Radio and Checkbox Code Example. Option one is this and that—be sure to include why it's great Option one is this and that—be sure to include why it's great Option two can be something else and selecting it will deselect option one Figure 2-26. Inline Checkboxes If you want multiple checkboxes to appear on the same line together, simply add the .inline class to a series of checkboxes or radios. 1 2 3 28 | Chapter 2: Bootstrap CSS Selects 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 Extending Form Controls 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. Prepended and Appended 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) Forms | 29 or input-append (to add it after). Then, within that same , place your extra content inside a with an add-on class, and place the either before or after the element. Figure 2-28. Prepend and Append Example Prepend and Append Code Example. @ .00 If you combine both of them, you simply need to add both the .input-prepend and .input-append classes to the parent . Figure 2-29. Using both the append and prepend Append and Prepend Code Example. $ .00 Rather then using a , you can instead use If you are appending a button to a search form, you will get the same nice rounded corners that you would expect. Figure 2-31. Append Button to Search Form Form Control Sizing 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. Figure 2-32. Block Level Input Forms | 31 Relative Input Controls 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. Grid Sizing You can use any .span from .span1 to .span12 for form control sizing. 32 | Chapter 2: Bootstrap CSS 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. Figure 2-33. Control Row ... Uneditable Text If you want to present a form control, but not have it editable, simple add the class .uneditable-input. Forms | 33 Figure 2-34. Uneditable Input Some value here Form Actions At the bottom of a horizontal-form you can place the form actions. Then inputs will correctly line up with the floated form controls. Figure 2-35. Form Controls Help Text Bootstrap form controls can have either block or inline text that flows with the inputs. Figure 2-36. Inline Help Inline help text Figure 2-37. Block Help A longer block of help text that breaks onto a new li34 | Chapter 2: Bootstrap CSS Form Control States In addition to the :focus state, Bootstrap offers styling for disabled inputs, and classes for form validation. Input Focus 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 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. Figure 2-38. Focused Input Disabled Input 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. Figure 2-39. Disabled Input Input with warning Something may have gone wrong Input with error Please correct the error Input with success Woohoo! Buttons 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 36 | Chapter 2: Bootstrap CSS 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. — Dave Winer 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 Boot‐ strap, 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. Table 2-3. Button Color Examples Buttons Class Description btn Standard gray button with gradient btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons btn btn-info Used as an alternative to the default styles btn-success Indicates a successful or positive action btn btn-warning Standard gray button with gradient btn btn-danger Indicates a dangerous or potentially negative action btn btn-inverse Alternate dark gray button, not tied to a semantic action or use btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior Buttons | 37 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. Button Sizes If you need larger or smaller buttons, simply add .btn-large, .btn-small, or .btn mini to links or buttons. Figure 2-41. Different Button Sizes 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. 38 | Chapter 2: Bootstrap CSS Figure 2-42. Block Level Button Disabled Button Styling 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. 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. Figure 2-43. Disabled Link Primary linkLink For a button, simply add the disabled attribute to the button. This will actually disable the button, so javascript is not directly needed. Figure 2-44. Disabled Button Buttons | 39 Images 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. Figure 2-45. Images Icons Bootstrap bundles 140 icons into one sprite that can be used with buttons, links, navi‐ gation, and and form fields. The icons are provided by Glyphicons. 40 | Chapter 2: Bootstrap CSS Glyphicon Attribution 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 de‐ Icons | 41 velopers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical. — Bootstrap Documentation http://getbootstrap.com Usage To use the icons, simply use an 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 tag. If you want to use the white icon, simply add the .icon-white class to the tag. Button Groups Using button groups, conbined with icons, you can create nice interface elements with minimal markup. Navigation 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. Home Library 42 | Chapter 2: Bootstrap CSS Applications Misc Icons | 43 CHAPTER 3 Bootstrap Layout Components In addtion to all of the markup provided in the previous chapter, Bootstrap provides a toolkit of flexible components that can be used in designing application interfaces, web features and more. Each of the plugins are available in a seperate Javascript file, com‐ bined all together, or, using the Bootstrap customizer, you can pick and choose which plugins you want. Personally, on the projects that I build, I lump them all together. That way I have options. Dropdown Menus Dropdown menus are a toggleable, contextual menu for displaying links in a list format. The dropdowns can be used on a variety of different elements, navs, buttons, and more. You can have a single dropdown, or extend the dropdown into another sub-menu. Figure 3-1. Basic Dropdown Menu Action Another action Something else here 45 Separated link Options Right align the dropdown Add .pull-right to a .dropdown-menu to right-align the dropdown menu to the parent object. ... If you would like to add a second layer of dropdowns, simply add .dropdown submenu to any in an existing dropdown menu for automatic styling. Dropdown Submenu ... More options ... Button Groups Button groups allow multiple buttons to be stacked together. This is useful like the example below when you want to place items like alignment buttons together. Simply, to create a button group, simply wrap a series of anchors or buttons with a class of .btn with a that has .btn-group as a class. 46 | Chapter 3: Bootstrap Layout Components Figure 3-2. Inline Button Group Inline Button Group Code Example. If you have multiple button groups that you want to align on a single line, wrap multiple .btn-group with .btn-toolbar. For more information about using icons with buttons, follow the examples in chapter 2. Figure 3-3. Button Toolbar Button Toolbar Code Example. To make the buttons stack, simply add .btn-group-vertical to the .btn-group class. Button Groups | 47 Figure 3-4. Vertical Button Group Vertical Button Group Code. ... Button Groups as Radio and Checkboxes To have the checkboxes function as radio buttons where only one can be selected at a time, or checkboxes where multiple can be selected, you simply need to add some extra markup and the Bootsrap JavaScript will provide the rest. This will be covered in detail in chapter 4. To use a button with a dropdown, they must be individually wrapped in their own btn-group within a btn-toolbar for proper rendering. Buttons With Dropdowns To add a dropdown to a button, simply wrap a button and a dropdown menu in a .btn group. You can also use a to act as an indicator that the button is a dropwdown. Figure 3-5. Button with a Dropdown 48 | Chapter 3: Bootstrap Layout Components Button Dropdown Code. Action Another action Something else here Separated link You can use the dropdowns with any button size, .btn-large .btn, .btn-small and .btn-mini. Figure 3-6. Button Dropdown Sizes Split Button Dropdowns Using the same general styles of the dropdown button, but adding a primary action along with the dropdown, split buttons have the primary action on the left, and the a toggle on the right for the dropdown. Figure 3-7. Split Button Dropdown Split Button Dropdown Code Example. Buttons With Dropdowns | 49 http://jsfiddle.net/vSHkJ/embedded/result/ Dropup Menus Menus can also be built to dropup, rather then down. To make this change, simply add .dropup to the .btn-group container. To have the button pullup from the right hand side, add .pull-right to the .dropdown-menu. Take notice, the caret is now poin‐ ted up, as the menu will be going up instead of down. Figure 3-8. Dropup Menu Dropup Menu Code Example. http://jsfiddle.net/DyfSZ/3/embedded/result/ 50 | Chapter 3: Bootstrap Layout Components Navigation Elements Bootstrap provides a few different opportunities for styling naviagation elements. All of them share the same markup and base class .nav. Bootstrap also provides a helper class, .active. In principal, it generally adds distinction to the current element, and sets it apart from the the rest of the navigation elements. You could add this class to the home page links, or add it to the links of the page that you are currently on. Tabular Navigation To create a tabbed navigation menu, start with a basic unordered list with the base class of .nav and add .nav-tabs. Figure 3-9. Tabbed Navigation Tabbed Navigation Code Example. Home Profile Messages Basic Pills Navigation To turn the tabs into pills, instead of using the .nav-tabs use .nav-pills. Figure 3-10. Tabbed Navigation Tabbed Navigation Code Example. Home Navigation Elements | 51 Profile Messages Disabled Class For each of the .nav classes, if you add the .disabled class, it will create gray link that also disables the hover state. The link is still clickable unless the href is removed, with javascript or some other method. Figure 3-11. Disabled Navigation Disabled Navigation Code Example. ... Home ... Stackable Navs Both tabs and pills are horizontal by default, to make them stackable, just add the .nav stacked class to make them appear vertically stacked. Figure 3-12. Stacked Tabs Stacked Tabs Code Example. ... 52 | Chapter 3: Bootstrap Layout Components Figure 3-13. Stacked Pills Stacked Pills Code Example. ... Dropdowns Navigation menus share a similir syntax to dropdown menus. By default, you have a list item that has an anchor that works in conjuntion with some data- attributes to trigger an unodered list with a .dropdown-menu class. Figure 3-14. Tabbed Navigation with a Dropdown Menu Tabbed Navigation Dropdown Code Example. Dropdown Action Another action Something else here Separated link Navigation Elements | 53 To do the same thing with pills, simply swap the .nav-tabs class with .nav-pills. Figure 3-15. Pill Navigation with Dropdowns Pill Navigation Dropdown Code Example. Dropdown Navigation Lists Navigation lists are useful when you need to display a group of navigation links. This type of interface element is common when building admin interfaces in websites. In the MAKE admin interface, I have one of these on the sidebar of every page with quick links to common pages. A form of this is what that Bootstrap developers use for their docu‐ mentation. Like all of the lists that we have discusses thus far, this is simply an unordered list with the .nav class, and to give it it’s specific styling, we add the .nav-list class. 54 | Chapter 3: Bootstrap Layout Components Figure 3-16. Navigation List Navigation List Code Example. List Header Home Blog Contact Horizontal Divider To create a divider, much like an , use an empty with a class of .divider. Horizontal Divider. ... .... Tabbable Navigation Not only can you create a tabbed navigation, but by using the JavaScript plugin, you can also add some interaction by making them tab able to open different windows of content. To make navigation tabs tabbable, create a .tab-pance with a unique ID for every tab, and then wrap them in `.tab-content. Navigation Elements | 55 Figure 3-17. Tabbable Navigation Example Tabble Navigation Code Example. Meats More Meats Bacon ipsum dolor sit amet jerky flank... Beef ribs, turducken ham hock... http://jsfiddle.net/JUqAT/embedded/result/ If you want to make the tabs fade when switching, add .fade to each .tab-pane. Tab Position The tabs are fully positionable, you can have them above, below, or on the sides of the content. Figure 3-18. Bottom Tabs Bottom Tab Code Example. 56 | Chapter 3: Bootstrap Layout Components I'm in section A. I'm in section B. I'm in section C. Section 1 Section 2 Section 3 Tabs on the left get the .tabs-left class. Figure 3-19. Left Tabs Left Tab Code Example. I'm in section A. I'm in section B. I'm in section C. Section 1 Section 2 Section 3 Tabs on the right get the .tabs-right class. Navigation Elements | 57 Figure 3-20. Right Tabs Right Tab Code Example. I'm in section A. I'm in section B. I'm in section C. Section 1 Section 2 Section 3 As a footnote here to the tabbable elements, you can use the markup here to control a varierty of things, perhaps outside of the scope of the default usage mechanism. On MAKE’s site, I used this to control the navigation, and subnavigation. When you click on the navigation menu, the sub navigation would change and show different links. Navbar The Navbar is a nice feature, and one of the prominant features of Bootstrap sites. At the core, the navbar includes styling for site names, and basic navigation. It can later be extended by adding form specific controls, and specialized dropdowns. To be sure that the navbar is constrained to the width of the content of the page, either place it inside of a .span12 or the .container class. 58 | Chapter 3: Bootstrap Layout Components Figure 3-21. Basic Navbar Example Basic Navbar Code Example. Title Home Link Link In the code above, note the .brand class, this will give the text a lighter font-weight and slightly larger size. Brand Class Example. Project name Nav Links To add links to the navbar, simply add an unordered list with the class of .nav. If you want to add a divider to your links, you can do that by adding an empty list-item with a class of .divider-vertical. Figure 3-22. Nav Links Navbar Links Code Example. Home First Link Second Link Third Link Navbar | 59 Forms Instead of using the default, class based forms from chapter 2, forms that are in the navbar use the .navbar-form class. This ensures that the forms margins are properly set, and match the nav stylings. Of note, .pull-left, and .pull-right helper classes may help move the form in the proper position. Figure 3-23. Default Navbar Form Default Navbar Form Styling. or ) that appears on a single row 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 elements. 20 | Chapter 2: Bootstrap CSS Figure 2-13. Basic Table Class Table Base Class Example. ... ... ... ... ... Optional Table Classes 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. Striped Table By adding the .table-striped class, you will get stripes on rows within the