EditArticle

Edit Article XML Content

<?xml version="1.0"?> <document> <header> <issuecode> </issuecode> <articlecode> </articlecode> <zone> </zone> <title>Bootstrap 3-What’s It All About?</title> <authors> <author> <name>Jim Duffy</name> <email>jduffy@takenote.com</email> <bio> Jim Duffy is founder and CEO of TakeNote Technologies, an award-winning training, consulting, and software development company specializing in .NET software developer training and helping clients create business solutions with Microsoft enterprise technologies. Jim’s expertise is with .NET technologies, ASP.NET, HTML5, SQL Server, and Visual FoxPro-to-.NET conversions. He has a BS degree in Computer and Information Systems and over 25 years of programming and training experience. He’s an energetic trainer, skilled developer, and has been published in leading developer-oriented publications. Jim is a Microsoft Regional Director, a Microsoft MVP, an ASPInsider, and is an entertaining and popular speaker at regional user groups and international developer conferences. You can find additional information about Jim, TakeNote Technologies, links to his blog, training information, consulting information, and software development services at http://www.takenote.com. </bio> </author> <photo>UNKNOWNIMAGE</photo> <author> <name>Scott Lenck</name> <email>Scott.Lenck@hyperlenck.com</email> <phone> </phone> <bio> Scott Lenck is an application developer at The Walt Disney Company and has been with the company for over 2 years. He graduated with a BS in Computer Science from the University of Central Florida. Scott has a working knowledge of robotics due to his time volunteering to mentor a FIRST (http://www.usfirst.org/) robotics team while attending UCF. </bio> <photo>UNKNOWNIMAGE</photo> </author> </authors> <copyright>2013 - CoDe Magazine and EPS Software Corp.</copyright> <owner>CoDe Magazine</owner> </header> <body> Bootstrap is an incredibly popular open-source toolkit containing CSS, fonts, and JavaScript extensions to help enrich interface components on a website or Web application. The included CSS enhances and extends standard interface controls when accompanied with the calls to certain CSS classes. Fonts from Glyphicons.com are included in the toolkit, with 180 icons that you can use. The JavaScript extensions are in the form of jQuery plug-ins and offer additional interface elements along with extending the functionality of standard interface elements. The toolkit includes the distribution files, templates, examples, and all the source files needed to further develop against the toolkit. Throughout this article, however, I will stick with only the distribution folder. <pullquote>Bootstrap is an incredibly popular open-source toolkit containing CSS, fonts, and JavaScript extensions to help enrich interface components on a website or Web application.</pullquote> Although compatible with the latest versions of all major browsers, Bootstrap has only partial compatibility with some older versions of browsers because the toolkit uses various properties only available with CSS3-enabled browsers. Fortunately, this only affects some of the extensions of the toolkit and doesn’t affect the actual functionality of the interface components themselves. Bootstrap allows richly stylized websites to be seen clearly whether on a desktop computer, tablet, or mobile phone. Due to Bootstrap’s responsive design support, the layout of websites adjusts dynamically based on the characteristics of the device. With this functionality available, the time to create a complete website with full device support is greatly decreased by taking away the need to develop a mobile-only version of the same website. <pullquote>The time to create a complete website with full device support is greatly decreased by taking away the need to develop a mobile-only version of the same website.</pullquote> The following components are some of the core interface components available to use after attaching Bootstrap to a website. <h3>Grid System</h3> One of the most important components within the Bootstrap toolkit, the grid system, allows alignment of columns within divisions with the .row class. Defined by device type (Mobile, Tablet, Desktop) to help customize responsiveness of a website’s layout, the length of these columns in a row must add up to 12. The following example defines a grid of four equal-width columns. <codesnippet> <h3>Four columns</h3></codesnippet> <codesnippet><div»class="row"></codesnippet> <codesnippet>»»»»<div»class="col-md-3">Column»1»content</div></codesnippet> <codesnippet>»»»»<div»class="col-md-3">Column»2»content</div></codesnippet> <codesnippet>»»»»<div»class="col-md-3">Column»3»content</div></codesnippet> <codesnippet>»»»»<div»class="col-md-3">Column»4»content</div></codesnippet> <codesnippet></div></codesnippet> Described in detail later in this article, the grid system underwent a major update in Bootstrap 3.0. <h3>Typography</h3> Bootstrap adds functionality to already-existing HTML text-based controls but also adds additional text-based controls to enhance the way text is displayed. The added text-based controls contained in the toolkit allow modification of font styles and, although the usability of HTML-based counterparts doesn’t change, it’s recommended to use these new font controls so that Bootstrap can style them properly. In addition, Bootstrap includes classes to emphasize text using color and to align text within a text control. The following example, demonstrated by Figure 1, shows some of these additional controls and classes to emphasize and align text in different ways. <figure id="1" src="Figure_01.tif"> Figure 1: You can use color and alignment to emphasize text. </figure> <codesnippet> <! --»Font»Emphasis»-- > </codesnippet> <codesnippet> <small>Fine»print»text»</small></codesnippet> <codesnippet> <strong>»Bold»text»</strong></codesnippet> <codesnippet> <em>»Italicized»text</em></codesnippet> <codesnippet> <! --»Color»Emphasis»-- > </codesnippet> <codesnippet> <p»class="text-muted">Muted»text</p></codesnippet> <codesnippet> <p»class="text-primary">Primary»text</p></codesnippet> <codesnippet> <p»class="text-success">Success»Text</p></codesnippet> <codesnippet> <p»class="text-info">Info»Text</p></codesnippet> <codesnippet> <p»class="text-warning">Warning»Text</p></codesnippet> <codesnippet> <p»class="text-danger">Danger»Text</p></codesnippet> <codesnippet> <! --»Text»Alignment»-- > </codesnippet> <codesnippet> <p»class="text-left">Left»aligned»text.</p></codesnippet> <codesnippet> <p»class="text-center">Center»aligned»text.</p></codesnippet> <codesnippet> <p»class="text-right">Right»aligned»text.</p></codesnippet> <h3>Form</h3> The form-related classes within Bootstrap allow clean grouping and styling when requesting data entry from the end user. The toolkit contains three form types: basic, horizontal, and inline. In a basic form, all form-based input controls have a width of 100% and can be grouped together for optimal white spacing within the group. Unlike the basic form, using the horizontal form makes the description label and the input control exist on the same line. Condensed into a single line, an inline form is optimal for use when real estate on a website is scarce. The example in Listing 1 uses the horizontal form and the result can be seen in Figure 2. <figure id="2" src="Figure_02.tif"> Figure 2: Horizontal forms provide a quick and consistent way to create data entry screens.</figure> <h3>Buttons</h3> Bootstrap supplies stylized buttons to help differentiate the actions of multiple buttons that may appear on a website. To use the button functionality, the class property within an HTML button tag must contain the .btn class along with a desired button style type and an optional button size. The example in Listing 2 shows a variety of examples using the different style and sizes demonstrated in Figure 3. <figure id="3" src="Figure_03.tif"> Figure 3: Bootstrap’s button functionality makes quick work of adding buttons to your forms. </figure> <h3>Images</h3> Bootstrap’s image formatting classes help display images in different layout styles. The following example shows the Bootstrap logo on a page as a rectangle with rounded corners, as a circle, and as a thumbnail. This example is exhibited within a browser in Figure 4. <figure id="4" src="Figure_04.tif"> Figure 4: You can display images using one of the three the image classes.</figure> <codesnippet> <img»src="bootstrap.png"»class="img-rounded"></codesnippet> <codesnippet> <img»src="bootstrap.png"»class="img-circle"></codesnippet> <codesnippet> <img»src="bootstrap.png"»class="img-thumbnail"></codesnippet> <h3>Glyphicons</h3> The 180 icons from Glyphicons provide a professional look and feel across your site. Icons are specified by class and can be used anywhere plain text appears. Demonstrated in Figure 5, the following code displays a variety of icon buttons. <figure id="5" src="Figure_05.tif"> Figure 5: Icons can be used within text, buttons, or anywhere else you want to display one.</figure> <codesnippet><button»type="button"»class="btn»btn-default"></codesnippet> <codesnippet>»»<span»class="glyphicon»glyphicon-tag"></codesnippet> <codesnippet>»»Tag</codesnippet> <codesnippet></button></codesnippet> <codesnippet><button»type="button"»class="btn»btn-default"></codesnippet> <codesnippet>»»<span»class="glyphicon»glyphicon-stop"></codesnippet> <codesnippet>»»Stop</codesnippet> <codesnippet></button></codesnippet> <codesnippet><button»type="button"»class="btn»btn-default"></codesnippet> <codesnippet>»»<span»class="glyphicon»glyphicon-gift"></codesnippet> <codesnippet>»»Gift</codesnippet> <codesnippet></button></codesnippet> <h3>Navs</h3> Used to help with creation of menus, calling .nav classes within unordered lists can occur in one of two ways: tabs or pills. Called within the list items in the unordered lists, active and disabled classes allow for additional interface functionality of a Nav control. Displayed in Figure 6, the following example shows the difference between tab and pill Navs along with the active and disable functionality of the list items. <figure id="6" src="Figure_06.tif"> Figure 6: You can use navs and pills to implement site navigation features </figure> <codesnippet> <ul»class="nav»nav-tabs"></codesnippet> <codesnippet>»»<li»class="active"><a»href="#">Home</a></li></codesnippet> <codesnippet>»»<li><a»href="#">Help</a></li></codesnippet> <codesnippet>»»<li»class="disabled"><a»href="#">Dropdown</a></li></codesnippet> <codesnippet> </ul></codesnippet> <codesnippet> <ul»class="nav»nav-pills"></codesnippet> <codesnippet>»»<li»class="active"><a»href="#">Home</a></li></codesnippet> <codesnippet>»»<li><a»href="#">Help</a></li></codesnippet> <codesnippet>»»<li»class="disabled"><a»href="#">Dropdown</a></li></codesnippet> <codesnippet> </ul></codesnippet> <h3>Drop-Down Menus</h3> Bootstrap allows for any type of menu to include a drop-down menu. These drop-down menus help group together similar menu items into a single list. To build on the Nav code example, the following example changes the disabled menu item into a drop-down menu. <codesnippet> <ul»class="nav»nav-tabs"></codesnippet> <codesnippet>»»<li»class="active"><a»href="#">Home</a></li></codesnippet> <codesnippet>»»<li><a»href="#">Help</a></li></codesnippet> <codesnippet>»»<li»class="dropdown"></codesnippet> <codesnippet>»»»»<a»class="dropdown-toggle"»</codesnippet> <codesnippet>»»»»»»data-toggle="dropdown"»href="#"></codesnippet> <codesnippet>»»»»»»Dropdown»<span»class="caret"></span></codesnippet> <codesnippet>»»»»</a></codesnippet> <codesnippet>»»»»<ul»class="dropdown-menu"></codesnippet> <codesnippet>»»»»»»<li><a»href="#">Item»1</a></li></codesnippet> <codesnippet>»»»»»»<li><a»href="#">Item»2</a></li></codesnippet> <codesnippet>»»»»</ul></codesnippet> <codesnippet>»»</li></codesnippet> <codesnippet> </ul></codesnippet> To allow for the drop-down menu to work properly, placement of the following JavaScript code needs to occur below the location of bootstrap.js file referenced in the webpage: <codesnippet> <script></codesnippet> <codesnippet>»»$('.dropdown-toggle').dropdown()</codesnippet> <codesnippet> </script></codesnippet> Figure 7 displays the previous code example for a dropdown within the Nav menu. <figure id="7" src="Figure_07.tif"> Figure 7: You can use Drop Downs to group menu items together.</figure> <h3>Modals</h3> The Modal functionality included with Bootstrap allows users to perform an action, such as a button click, to display an interactive dialog box. Any type of functionality can be populated into this dialog box. Whether it contains a form control, simple text, or any other types of controls, Modals provide a sleek form of workflow through a website. Listing 3 displays the code of the modal seen in Figure 8. <figure id="8" src="Figure_08.tif"> Figure 8: Use modals to control workflow though your site.</figure> Now, take a look at some of the differences between Bootstrap 2.x and Bootstrap 3. <h2>Bootstrap 3: Change Has Arrived</h2> Bootstrap 3.0 introduces significant changes. Some of these changes are more impactful than others but nonetheless, you will be doing some work to upgrade your site from a prior version of Bootstrap. Bootstrap 3 is a full-point upgrade, so don’t expect to drop in the new style sheet and JavaScript files and have everything work as expected. It won’t. Fortunately, there are a number of resources on the Web to help with an automatic migration-but I’m getting ahead of myself. Let’s start with a look at what’s new and how it will impact your existing Bootstrap sites. <pullquote>Bootstrap 3 is a full-point upgrade, so don’t expect to drop in the new CSS and JavaScript files and have everything work as expected. It won’t.</pullquote> <h3>Mobile First</h3> The most significant change isn’t a technical one but a change in design perspective. Bootstrap 3 adopts the “mobile first” responsive Web design practice as the overriding theme throughout the framework. Mobile first means exactly what is says. It’s a paradigm shift that focuses on designing the user interface for smaller mobile screens before designing it for larger desktop screens. Instead of trying to take a desktop design and shrink, squeeze, and compress it down for mobile screens, mobile first flips things around and does the exact opposite. You have limited real estate on a smart phone screen, so mobile first makes you focus on the design that puts the most critical and important content on that small screen. As the screen size increases, to a tablet screen, for example, your design grows and begins to accommodate more content and information. As the screen size maxes out on a large desktop screen, your design accommodates all the content and information for the page. Adopting the mobile first approach means no longer having to make desktop and mobile versions of the same page. <pullquote>Mobile first means exactly what is says. It’s a paradigm shift that focuses on designing the user interface for smaller mobile screens before designing it for larger desktop screens.</pullquote> Although embracing the mobile first approach is new in Bootstrap 3, responsive design features exist in prior versions of Bootstrap but they required adding the bootstrap-responsive.css file. That requirement goes away with Bootstrap 3 because all responsive classes and styles are included in the core bootstrap.css file. This means that Web page elements like textboxes, paragraphs, buttons, images, and so on automatically scale based on the size of the viewing area from small smartphone screens, to mini- and full-size tablets, to larger desktop monitors. Before you ask, yes, you can disable the responsive capabilities if you need to build a fixed-width page. <h3>Getting Bootstrap 3</h3> The getting started page (http://getbootstrap.com/getting-started/) offers a few different ways to get Bootstrap 3. The easiest is to download the compiled and minified version, which includes the CSS, JavaScript, and fonts. You can also download the latest source files from GitHub or Clone/fork your own version from GitHub. <h3>Getting Your Pages Ready for Bootstrap 3</h3> All you need to do is add a viewport meta tag to your <head> tag to make sure rendering and touch zooming works properly. <codesnippet><meta»name="viewport"»</codesnippet> <codesnippet>»»»»content="width=device-width,»initial-scale=1.0"></codesnippet> <h3>Using the New Grid</h3> The new grid system stands out as the most obvious change in Bootstrap 3 so I’ll start with that first. Gone are the days of working with the grid in either fixed-width column mode or in a fluid, responsive mode. The new grid is fluid, mobile first-centric and percent-based. This means that instead of working with a fixed-width grid (940 pixels), you now work with a grid that is designed with a mobile-based layout and then scale everything out from there. Let’s take a look at the changes you need to make in your HTML code. In prior versions, rows were specified with the .row class or .row-fluid class for fluid grids and columns that you defined with a span* class prefix. Twelve was-and still is-the magic number that the span classes had to add up to. <codesnippet></codesnippet> <codesnippet><div class="row"></codesnippet> <codesnippet> <div class="span4">One</div></codesnippet> <codesnippet> <div class="span8">Two</div></codesnippet> <codesnippet></div></codesnippet> <codesnippet> </codesnippet> <codesnippet><div class="row-fluid"></codesnippet> <codesnippet> <div class="span6">Three</div></codesnippet> <codesnippet> <div class="span6">Four</div></codesnippet> <codesnippet></div></codesnippet> The Bootstrap 3 grid is 100% fluid and only requires the use of the .row class. The 12-column structure from prior versions remains the same but the columns are not fixed width. Instead of a span* prefix on column classes, you now use one of four new device-specific column class prefixes. These new column classes provide support for smart phones, tablet, desktops, and large desktops. Table 1 lists grid options for each screen size including container width, maximum column width, and the CSS class prefix to use with each. Let’s take a look at a sample grid with three columns of equal width. The columns are defined with the .col-md- class prefix so the columns appear across the page for screens 970 pixels or wider, and stacked on smaller devices. <codesnippet></codesnippet> <codesnippet> <h3>Three columns</h3></codesnippet> <codesnippet><div»class="row"></codesnippet> <codesnippet>»»»»<div»class="col-md-4">.col-md-4</div></codesnippet> <codesnippet>»»»»<div»class="col-md-4">.col-md-4</div></codesnippet> <codesnippet>»»»»<div»class="col-md-4">.col-md-4</div></codesnippet> <codesnippet></div></codesnippet> Figure 9 demonstrates how the above code looks in a desktop browser. <figure id="9" src="Figure_09.tif"> Figure 9: Grid columns display horizontally on wide screens.</figure> Figure 10 displays how the same code looks in a smart phone. Notice the lack of gutters on either side of the stacked columns in Figure 10. <figure id="10" src="Figure_10.tif"> Figure 10: Grids columns stack on smart phone screens.</figure> Column offsetting has changed in Bootstrap 3 as well. You will need to replace any offset* class references with the new offset-* classes. <codesnippet></codesnippet> <codesnippet> <div class="row"></codesnippet> <codesnippet> <div class="span4">...</div></codesnippet> <codesnippet> <div class="span3 offset2">...</div></codesnippet> <codesnippet> </div></codesnippet> <codesnippet>»</codesnippet> <codesnippet></codesnippet> <codesnippet> <div class="row"></codesnippet> <codesnippet> <div class="col-md-4">.col-md-4</div></codesnippet> <codesnippet> <div class="col-md-4 col-md-offset-4">Offset»column</codesnippet> <codesnippet>»»</div></codesnippet> <codesnippet> </div></codesnippet> Nesting columns has changed in Bootstrap 3. Bootstrap 2.x nested columns added up to the number of columns in the hosting span. In the code snippet below, the two nested columns of span6 and span3 add up to the parent row with span9. <codesnippet></codesnippet> <codesnippet> <div class="row"></codesnippet> <codesnippet> <div class="span9">Level 1 column</codesnippet> <codesnippet> <div class="row"></codesnippet> <codesnippet> <div class="span6">Level 2</div></codesnippet> <codesnippet> <div class="span3">Level 2</div></codesnippet> <codesnippet> </div></codesnippet> <codesnippet> </div></codesnippet> <codesnippet> </div></codesnippet> In Bootstrap 3, nested columns need to add up to 12 and not the number of columns in the hosting span like in Bootstrap 2.x. In the code snippet below, the nested columns add up to 12 and not 9 like the Bootstrap 2 code. <codesnippet></codesnippet> <codesnippet> <div class="row"></codesnippet> <codesnippet> <div class="col-md-9">Level 1</codesnippet> <codesnippet> <div class="row"></codesnippet> <codesnippet> <div class="col-md-6">Level 2</div></codesnippet> <codesnippet> <div class="col-md-6">Level 2</div></codesnippet> <codesnippet> </div></codesnippet> <codesnippet> </div></codesnippet> <codesnippet> </div></codesnippet> <h3>More New Pieces and Parts</h3> Bootstrap 3 only has a few truly new components because the focus was primarily on flat and mobile-first design features. There are a number of new classes that implement the mobile-first design paradigm. Table 2 lists the new elements, both components and classes. There are a few new components you will want to familiarize yourself with, specifically the Panel, the List Group, and the Jumbotron. <h3>Panels</h3> Panels are containers to put content in. At their simplest, they apply basic border and padding around your content. Figure 11 gives you an idea of what the new panel does. Panels are implemented with a starting class of .panel, followed by additional type and formatting classes. <figure id="11" src="Figure_11.tif"> Figure 11: Use Panels to group and organize content.</figure> Panels can have a heading and a footer section. <codesnippet> <div class="panel panel-primary"></codesnippet> <codesnippet> <div class="panel-heading"></codesnippet> <codesnippet>»» <h3 class="panel-title">Panel title</h3></codesnippet> <codesnippet> </div></codesnippet> <codesnippet>»»»»<div class="panel-body">Panel content</div></codesnippet> <codesnippet> <div class="panel-footer">Panel Footer</div></codesnippet> <codesnippet> </div></codesnippet> Additional .panel- classes are available to further customize the appearance of the panel component based on the usage type you have in mind. <codesnippet><div class="panel panel-success"></codesnippet> <codesnippet><div class="panel panel-warning"></codesnippet> <codesnippet><div class="panel panel-danger"></codesnippet> <codesnippet><div class="panel panel-info"></codesnippet> Listing 4 contains the code that created the page you saw in Figure 11. <h3>List Groups</h3> List groups provide a way to display mobile-like lists. You implement them with the .list-group class and associated items of .list-group-item class. <codesnippet><ul class="list-group"></codesnippet> <codesnippet> <li class="list-group-item">Microsoft</li></codesnippet> <codesnippet> <li class="list-group-item»active">Google</li></codesnippet> <codesnippet> <li class="list-group-item">Apple</li></codesnippet> <codesnippet> <li class="list-group-item">Amazon</li></codesnippet> <codesnippet></ul></codesnippet> Figure 12 gives you an idea of what the new list group component does. <figure id="12" src="Figure_12.tif"> Figure 12: List Groups provide list items to select from. </figure> The badge class adds the ability to add badges to the right of a list group item. <codesnippet><ul class="list-group"></codesnippet> <codesnippet> <li class="list-group-item">Microsoft</codesnippet> <codesnippet>» class="badge">37</codesnippet> <codesnippet> </li></codesnippet> <codesnippet> <li class="list-group-item">Google</codesnippet> <codesnippet> class="badge">25</codesnippet> <codesnippet> </li> </codesnippet> <codesnippet></ul></codesnippet> Figure 13 displays a list group with badges. <figure id="13" src="Figure_13.tif"> Figure 13: Add a Badge to a List Group to provide information about list items. </figure> What would a list be if the items weren’t linked to something else? Anchor tags can be used in place of list items and that means swapping out the unordered list tag for a div tag. <codesnippet><div class="list-group"></codesnippet> <codesnippet> <a href="#" class="list-group-item">Microsoft</codesnippet> <codesnippet> class="badge">37</codesnippet> <codesnippet> </a></codesnippet> <codesnippet> <a href="#" class="list-group-item">Google</codesnippet> <codesnippet> class="badge">25</codesnippet> <codesnippet> </a></codesnippet> <codesnippet></div></codesnippet> You are not limited to simple HTML within a list group. Additional classes allow you further customize the contents of each list group with classes to optionally mark a specific item as active, add an item heading, footer, and item text. <codesnippet><div class="list-group"></codesnippet> <codesnippet><a href="#" class="list-group-item active"></codesnippet> <codesnippet> <h2 class="list-group-item-heading">Microsoft</h2></codesnippet> <codesnippet> class="list-group-item-text">This is text that»is</codesnippet> <codesnippet>»»»»»»being used to demonstrate list groups.»</codesnippet> <codesnippet> <h4 class="list-group-item-footer">This is the </codesnippet> <codesnippet>»»»»»»footer!</h4></codesnippet> <codesnippet></a></codesnippet> Figure 14 displays a list group which takes advantage of the more complex capabilities of the list group component. Listing 5 displays the code used to create the page in Figure 14. <figure id="14" src="Figure_14.tif"> Figure 14: List Groups can display information beyond a simple list item title. </figure> <h3>Jumbotron</h3> The new .jumbotron class replaces the Bootstrap 2.x .hero unit class. Like the .hero-unit class, you use the .jumbotron class to display highlighted content on your site. Jumbotron differs from the .hero-unit class in that it provides a container class that limits the width of the jumbotron. Omitting the container class causes the jumbotron to span the entire width of your viewport. The following code highlights the difference between the .hero-unit and .jumbotron classes. <codesnippet></codesnippet> <codesnippet> <div class="hero-unit"></codesnippet> <codesnippet> <h1>Heading</h1></codesnippet> <codesnippet> <p><a class="btn btn-primary btn-large">Info</a></p></codesnippet> <codesnippet> </div></codesnippet> <codesnippet>»</codesnippet> <codesnippet></codesnippet> <codesnippet> <div class="jumbotron"></codesnippet> <codesnippet> <div class="container"></codesnippet> <codesnippet> <h1>This»is»Jumbotron»content!</h1></codesnippet> <codesnippet>» <p><a class="btn btn-primary btn-lg">Info</a></p></codesnippet> <codesnippet> </div></codesnippet> <codesnippet> </div></codesnippet> <h2>Existing Element Updates</h2> The majority of the changes in Bootstrap 3 revolve around the class changes made to support the mobile-first focus and the responsive design paradigm. <h3>Forms</h3> One update in the forms-related classes is that field input controls now default to a width of 100%. This was done to insure that data entry forms look correct on mobile devices. Two new classes, .form-group and .form-control, affect how <input>, <textarea>, and <select> elements are styled. Wrapping them with .form-control sets their width to 100% by default. Wrapping all labels and controls in a .form-group class optimally spaces all the elements. <codesnippet><form role="form"></codesnippet> <codesnippet> <div class="form-group"></codesnippet> <codesnippet> <label for="txtEmail">Email address</label></codesnippet> <codesnippet> <input type="email" class="form-control" </codesnippet> <codesnippet>»»»»»»»id="txtEmail" </codesnippet> <codesnippet>»»»»»»»placeholder="Enter email"></codesnippet> <codesnippet> </div></codesnippet> The new .input-group and .input-group-add-on classes provides the ability to extend text-based form controls by adding text or buttons before, after, or on both sides. Figure 15 gives you an idea of what the .input-group-addon class does. <figure id="15" src="Figure_15.tif"> Figure 15: Enhance your text-based controls by pre-pending and appending text and buttons. </figure> These new classes replace the Bootstrap 2.x .input-append, .input-prepend, and .add-on classes. <codesnippet><div class="input-group"></codesnippet> <codesnippet> class="input-group-addon">$</codesnippet> <codesnippet> <input type="text" class="form-control"></codesnippet> <codesnippet> class="input-group-addon">.00</codesnippet> <codesnippet></div></codesnippet> You can add the .input-group-lg and .input-group-sm classes to the .item-group to automatically resize all the controls without having to size each element. <codesnippet><div class="input-group input-group-lg"></codesnippet> <codesnippet> class="input-group-addon">@</codesnippet> <codesnippet> <input type="text" </codesnippet> <codesnippet>»»»»»class="form-control" placeholder="Username"></codesnippet> <codesnippet></div></codesnippet> <codesnippet>»</codesnippet> <codesnippet><div class="input-group input-group-sm"></codesnippet> <codesnippet> class="input-group-addon">$</codesnippet> <codesnippet> <input type="text" class="form-control"></codesnippet> <codesnippet> class="input-group-addon">.00</codesnippet> <codesnippet></div></codesnippet> <h3>Checkbox and Radio Button</h3> In Bootstrap 2.x, checkboxes were wrapped in a <label> with a checkbox class. In Bootstrap 3, a <div> is now used to wrap the <label>, which still wraps the checkbox. <codesnippet></codesnippet> <codesnippet> <label class="checkbox"></codesnippet> <codesnippet> <input type="checkbox" value="">I agree.</codesnippet> <codesnippet> </label></codesnippet> <codesnippet> </codesnippet> <codesnippet></codesnippet> <codesnippet> <div class="checkbox"></codesnippet> <codesnippet> <label></codesnippet> <codesnippet> <input type="checkbox" value="">I agree.</codesnippet> <codesnippet> </label></codesnippet> <codesnippet> </div></codesnippet> Radio buttons worked the same way in Bootstrap 2.x and received the same update in Bootstrap 3. <codesnippet></codesnippet> <codesnippet> <label class="radio"></codesnippet> <codesnippet> <input type="radio" name="optionsRadios" id="Radio3" </codesnippet> <codesnippet>»»»»value="option1">This is radio button #1</codesnippet> <codesnippet> </label></codesnippet> <codesnippet>»</codesnippet> <codesnippet></codesnippet> <codesnippet> <div class="radio"></codesnippet> <codesnippet> <label></codesnippet> <codesnippet> <input type="radio" name="optionsRadios" id="Radio4"</codesnippet> <codesnippet>»»»»»value="option1">This is radio button #1</codesnippet> <codesnippet> </label></codesnippet> <codesnippet> </div></codesnippet> <h3>Modals</h3> Modals have undergone some fairly minor changes. You no longer need to specify the .hide class in the modal declaration line like you did in Bootstrap 2.x because modal dialogs are hidden now by default. <codesnippet></codesnippet> <codesnippet> <div class="modal hide fade"></codesnippet> <codesnippet> <div class="modal-header"></div></codesnippet> <codesnippet> <div class="modal-body"></div></codesnippet> <codesnippet> <div class="modal-footer"></div></codesnippet> <codesnippet> </div></codesnippet> Two additional classes have been added, .modal-content and .modal dialog. These new classes provide increased customization options for modals. The .modal-header, .modal-body, and .modal-footer are all wrapped inside of .modal-content. The .modal-content class is wrapped inside of .modal-dialog. <codesnippet></codesnippet> <codesnippet> <div class="modal fade"></codesnippet> <codesnippet> <div class="modal-dialog"></codesnippet> <codesnippet> <div class="modal-content"></codesnippet> <codesnippet> <div class="modal-header"></div></codesnippet> <codesnippet> <div class="modal-body"></div></codesnippet> <codesnippet> <div class="modal-footer"></div></codesnippet> <codesnippet> </div></codesnippet> <codesnippet> </div></codesnippet> <codesnippet> </div></codesnippet> <h3>Typography</h3> The most noticeable change in the typography features is the use of a semi-bold Helvetica font for headings. Changes were also made in the emphasis classes. The .muted class was renamed to .text-muted. <codesnippet></codesnippet> <codesnippet> <p class="muted">This is muted text.</p></codesnippet> <codesnippet>»</codesnippet> <codesnippet></codesnippet> <codesnippet> <p class="text-muted">This is muted text.</p></codesnippet> The .text-error class has been renamed to .text-danger. <codesnippet></codesnippet> <codesnippet> <p class="text-error">Danger, Will Robinson!</p></codesnippet> <codesnippet>»</codesnippet> <codesnippet></codesnippet> <codesnippet> <p class="text-danger">Danger, Will Robinson!</p></codesnippet> <h3>Navbar</h3> Navbars provide navigation headers for your site. They have benefited from the focus on responsive design by starting out collapsed on mobile devices and expanding horizontally as the display screen widens. One primary difference is that navbars now use the HTML5 <nav> tag. The .navbar-inner class has been deprecated, so you need to remove any .navbar-inner <div> tags. The .brand class has been changed to .navbar-brand, so you need to change any .brand <div> tags. <codesnippet></codesnippet> <codesnippet> <div class="navbar"></codesnippet> <codesnippet> <div class="navbar-inner"></codesnippet> <codesnippet> <a class="brand" href="#">Title</a></codesnippet> <codesnippet> <ul class="nav"></codesnippet> <codesnippet> <li class="active"><a href="#">Home</a></li></codesnippet> <codesnippet> <li><a href="#">Link</a></li></codesnippet> <codesnippet> <li><a href="#">Link</a></li></codesnippet> <codesnippet> </ul></codesnippet> <codesnippet> </div></codesnippet> <codesnippet> </div></codesnippet> Navbars require a .navbar-header to wrap the new .navbar-brand and .navbar-toggle classes. You also need to add the .navbar-nav class where you use .nav. Refer to Listing 6 for a complete implementation of the .navbar class. <h3>Images, Icons, and Buttons</h3> The Bootstrap 2 .img-polaroid class has been replaced with the .img-thumbnail in Bootstrap 3. <codesnippet></codesnippet> <codesnippet> <img src="..." class="img-polaroid"></codesnippet> <codesnippet>»</codesnippet> <codesnippet></codesnippet> <codesnippet> <img src="..." alt="..." class="img-thumbnail"></codesnippet> Images are not responsive by default and the new .img-responsive class makes images responsive-friendly by setting the max-width to 100% and height to auto. This resizes the image to the size of the parent element. In Bootstrap 3, images are placed using a tag instead of using an tag like they were in the prior version. All icons also require using the Glyphicon base class and then the specific class for the icon you’re using. <codesnippet></codesnippet> <codesnippet> <a class="btn" href="#"><i class="icon-search"></i></a></codesnippet> <codesnippet>»</codesnippet> <codesnippet></codesnippet> <codesnippet> <a class="btn" href="#"></codesnippet> <codesnippet>»»»<span class="glyphicon glyphicon-search"></span></codesnippet> <codesnippet> </a></codesnippet> The button class structure changes are not all that complex, but they’re changes you definitely need to be aware of. The .btn-mini, .btn-small, and .btn-large classes have been replaced by .btn-xs, .btn-sm, and .btn-lg respectively. Default buttons now have their own class, .btn-default, and the .btn-inverse class has been removed. The code in Listing 7 shows the Bootstrap 2.x button classes and their Bootstrap 3.0 equivalents. Figure 16 illustrates the visual changes that occurred in the update from v2.x to v3.0. <figure id="16" src="Figure_16.tif"> Figure 16: Buttons have undergone a few visual changes from the prior version. </figure> <h3>Carousel</h3> Only minor changes are needed to existing carousel controls. The changes consist of using the new Glyphicon chevron images as the next and previous buttons. <codesnippet> <a class="left carousel-control" </codesnippet> <codesnippet>»»»href="#carousel-example-generic" data-slide="prev"></codesnippet> <codesnippet>»»»»»<span class="glyphicon glyphicon-chevron-left"></codesnippet> <codesnippet>»»»»»</span></codesnippet> <codesnippet> </a></codesnippet> <codesnippet> <a class="right carousel-control" </codesnippet> <codesnippet>»»»»href="#carousel-example-generic" data-slide="next"></codesnippet> <codesnippet> <span class="glyphicon glyphicon-chevron-right"></codesnippet> <codesnippet>»»»»</span></codesnippet> <codesnippet> </a></codesnippet> <h3>Responsive Utilities</h3> If you’re using the responsive utilities on your Bootstrap 2.x site, you’re going to need to update those class references as well. Table 3 lists the responsive utility class changes in Bootstrap 3. <h3>Some Things Had To Go</h3> “Out with the old and in with the new,” is how the saying goes. That also applies to Bootstrap 3. There are a number of elements from the prior version that have been depreciated. Table 4 lists the Bootstrap 2.x items that were removed along with the corresponding Bootstrap 3 replacement. <h3>Summary</h3> I have come to the end of the article and I didn’t have the space to cover every new Bootstrap 3 feature, but I did cover quite a few. By now, I’m sure you’re realizing that you’ve got some work to do updating your Bootstrap 2.x sites to Bootstrap 3. Fortunately there are a number of resources and tools available to help you do just that. The first place to start will be the Bootstrap site itself. The documentation has been updated to include information about migrating from 2.x to 3.0 (http://getbootstrap.com/getting-started/#migration). Here is a list of online tools that will help you migrate your Bootstrap 2.x code over to Bootstrap 3. </body> <sidebars> <sidebar page="" title="Bootstrap Website"> You’ll find links to download Bootstrap 3 and links to documentation and samples on the http://getbootstrap.com website. </sidebar> <sidebar page="" title="Migration Resources"> Here’s a list of resources to help you migrate from Bootstrap 2.x to Bootstrap 3. Bootply Migration Tool http://upgrade-bootstrap.bootply.com/ Bootstrap Updater http://code.divshot.com/bootstrap3_upgrader/ Bootstrap Migrator http://twitterbootstrapmigrator.w3masters.nl/ Bootstrap 3 Updater http://bootstrap3.kissr.com/ </sidebar> <sidebar page="" title="Bootstrap Themes"> There are a number of Bootstrap theme resources available. Some provide free themes and others sell them, usually at a very nominal cost. Make sure that any theme you download is compatible with Bootstrap 3 before you download it. http://wrapbootstrap.com/ http://bootswatch.com/ http://bootstrapthemes.com/ </sidebar> <sidebar page="" title="Bootstrap’s Origins"> Developed by Mark Otto and Jacob Thorton from Twitter, Bootstrap’s inspiration came from the desire to promote uniformity across internal tools. Prior to Bootstrap’s creation, software engineers at Twitter used various libraries to develop interface-based tools against and, as a result, these tools became hard to sustain due to inconsistencies between the different libraries used. These inconsistencies led to the creation of a toolkit for commonly used interface components. Initially deployed and shown during Twitter’s first Hackweek, Bootstrap assisted software engineers by providing a toolkit encompassing all the interface components frequently used by the company. Bootstrap’s creation encouraged consistency and quicker development of internal tools due to the standardization of interface components instead of reinventing the wheel during each tool’s development. After a successful deployment within the company, Twitter released Bootstrap to the public through an open-source project in August 2011. In the course of multiple releases since the initial open-source launch, Bootstrap grew into the most popular GitHub development project available for download and, launched in August 2013, Bootstrap 3.0 became the latest stable release of the toolkit. </sidebar> </sidebars> <figures> </figures> <tables> <table page="" id="1"> <tablecaption>Table 1: Grid options with container, columns, and CSS class settings.</tablecaption> <tr> <th> </th> <th> Extra Small Devices Phones (< 768px) </th> <th> Small Devices Tablets (>=768px) </th> <th> Medium Devices Desktops (>=922px) </th> <th> Large Devices Desktops (>=1200px) </th> </tr> <tr> <td> Max Container Width </td> <td> None (auto) </td> <td> 750px </td> <td> 970px </td> <td> 1170px </td> </tr> <tr> <td> Number of Columns </td> <td> 12 </td> <td> 12 </td> <td> 12 </td> <td> 12 </td> </tr> <tr> <td> Max Column Width </td> <td> Auto </td> <td> 60px </td> <td> 78px </td> <td> 95px </td> </tr> <tr> <td> Class Prefix </td> <td> col-xs- </td> <td> col-sm- </td> <td> col-md- </td> <td> col-lg- </td> </tr> </table> <table page="" id="2"> <tablecaption>Table 2: New Bootstrap 3.0 Classes & Elements</tablecaption> <tr> <th> Element </th> <th> Description </th> </tr> <tr> <td> Panels </td> <td> .panel .panel-body .panel-title .panel-heading .panel-footer .panel-collapse </td> </tr> <tr> <td> List groups </td> <td> .list-group .list-group-item .list-group-item-text .list-group-item-heading </td> </tr> <tr> <td> Jumbotron </td> <td> .jumbotron </td> </tr> <tr> <td> Glyphicons </td> <td> .glyphicon </td> </tr> <tr> <td> Large grid (>1200 px wide) </td> <td> .col-lg-* </td> </tr> <tr> <td> Medium grid (>992 px wide) </td> <td> .col-md-* </td> </tr> <tr> <td> Small grid (>768 px wide) </td> <td> .col-sm-* </td> </tr> <tr> <td> Tiny grid (<768 px wide) </td> <td> .col-xs-* </td> </tr> <tr> <td> Column Offsets </td> <td> .col-sm-offset-* .col-md-offset-* .col-lg-offset-* </td> </tr> <tr> <td> Column Push </td> <td> .col-sm-push-* .col-md-push-* .col-lg-push-* </td> </tr> <tr> <td> Colum Pull </td> <td> .col-sm-pull-* .col-md-pull-* .col-lg-pull-* </td> </tr> <tr> <td> Thumbnail image </td> <td> .img-thumbnail </td> </tr> <tr> <td> Responsive images </td> <td> .img-responsive </td> </tr> <tr> <td> Modal </td> <td> .modal-dialog .modal-content </td> </tr> <tr> <td> Alert links </td> <td> .alert-link </td> </tr> <tr> <td> Well sizes </td> <td> .well-sm .well-lg </td> </tr> <tr> <td> Navbar </td> <td> .navbar-default .navbar-text .navbar-btn </td> </tr> <tr> <td> Navbar header </td> <td> .navbar-header </td> </tr> <tr> <td> Justified tabs / pills </td> <td> .nav-justified </td> </tr> <tr> <td> Form controls </td> <td> .form-control .form-group </td> </tr> <tr> <td> Button group sizes </td> <td> .btn-group-xs .btn-group-sm .btn-group-lg </td> </tr> <tr> <td> Input groups </td> <td> .input-group .input-group-addon .input-group-btn </td> </tr> <tr> <td> Inline controls </td> <td> .checkbox-inline .radio-inline </td> </tr> <tr> <td> Contextual panels </td> <td> .panel-success .panel-danger .panel-warning .panel-info </td> </tr> <tr> <td> Contextual table rows </td> <td> .success .danger .warning .active </td> </tr> </table> <table page="" id="3"> <tablecaption>Table 3: Responsive utility changes in Bootstrap 3</tablecaption> <tr> <th> Bootstrap 2.x </th> <th> Bootstrap 3 </th> </tr> <tr> <td> .visible-phone </td> <td> .visible-sm </td> </tr> <tr> <td> .visible-tablet </td> <td> .visible-md </td> </tr> <tr> <td> .visible-desktop </td> <td> .visible-lg </td> </tr> <tr> <td> .hidden-phone </td> <td> .hidden-sm </td> </tr> <tr> <td> .hidden-tablet </td> <td> .hidden-md </td> </tr> <tr> <td> .hidden-desktop </td> <td> .hidden-lg </td> </tr> </table> <table page="" id="4"> <tablecaption>Table 4: Classes and Components Removed in Bootstrap 3</tablecaption> <tr> <th> Element </th> <th> Removed From Bootstrap 2.x </th> <th> Bootstrap 3.0 Equivalent </th> </tr> <tr> <td> Grid </td> <td> .span* </td> <td> .col-md-* </td> </tr> <tr> <td> Fluid container </td> <td> .container-fluid </td> <td> .container </td> </tr> <tr> <td> Fluid row </td> <td> .row-fluid </td> <td> .row </td> </tr> <tr> <td> Icons </td> <td> .icon-* </td> <td> .glyphicon-* </td> </tr> <tr> <td> Hero Unit </td> <td> .hero-unit </td> <td> .jumbotron </td> </tr> <tr> <td> Nav list </td> <td> .nav-list </td> <td> .list-group </td> </tr> <tr> <td> Navbar inner </td> <td> .navbar-inner </td> <td> - </td> </tr> <tr> <td> Navbar button </td> <td> .btn-navbar </td> <td> .navbar-btn </td> </tr> <tr> <td> Thumbnails </td> <td> .thumbnails </td> <td> .col-* and .thumbnail </td> </tr> <tr> <td> Form actions </td> <td> .form-actions </td> <td> - </td> </tr> <tr> <td> Input append / prepend </td> <td> .input-append .input-prepend .add-on </td> <td> .input-group </td> </tr> <tr> <td> Tab alignments </td> <td> .tabs-left .tabs-right .tabs-below </td> <td> - </td> </tr> <tr> <td> Dropdown submenu </td> <td> .dropdown-submenu </td> <td> - </td> </tr> </table> </tables> <codelistings> <codelisting page="" id="0" header="Listing 1: Horizontal form usage and functionality"> <code> <form»class="form-horizontal"»role="form"></code> <code>»»<div»class="form-group"></code> <code>»»»»<label»for="inputEmail1"»class="col-lg-2»control-label"></code> <code>»»»»»»Email</code> <code>»»»»</label></code> <code>»»»»<div»class="col-lg-10"></code> <code>»»»»»»<input»type="email"»class="form-control"</code> <code>»»»»»»»»id="inputEmail1"»placeholder="Email"></code> <code>»»»»</div></code> <code>»»</div></code> <code>»»<div»class="form-group"></code> <code>»»»»<label»for="inputPassword1"»class="col-lg-2»control-label"></code> <code>»»»»»»Password</code> <code>»»»»</label></code> <code>»»»»<div»class="col-lg-10"></code> <code>»»»»»»<input»type="password"»class="form-control"</code> <code>»»»»»»»»id="inputPassword1"»placeholder="Password"></code> <code>»»»»</div></code> <code>»»</div></code> <code>»»<div»class="form-group"></code> <code>»»»»<div»class="col-lg-offset-2»col-lg-10"></code> <code>»»»»»»<div»class="checkbox"></code> <code>»»»»»»»»<label></code> <code>»»»»»»»»»»<input»type="checkbox">»Remember»me</code> <code>»»»»»»»»</label></code> <code>»»»»»»</div></code> <code>»»»»</div></code> <code>»»</div></code> <code>»»<div»class="form-group"></code> <code>»»»»<div»class="col-lg-offset-2»col-lg-10"></code> <code>»»»»»»<button»type="submit"»class="btn»btn-default"></code> <code>»»»»»»»»Sign»in</code> <code>»»»»»»</button></code> <code>»»»»</div></code> <code>»»</div></code> <code> </form></code> </codelisting> <codelisting page="" id="36" header="Listing 2: Code example of Bootstrap’s Button functionality"> <code><button»type="button"»class="btn»btn-default"></code> <code>»»Default</code> <code></button></code> <code><button»type="button"»class="btn»btn-primary"></code> <code>»»Primary</code> <code></button></code> <code><button»type="button"»class="btn»btn-success"></code> <code>»»Success</code> <code></button></code> <code><button»type="button"»class="btn»btn-info"></code> <code>»»Info</code> <code></button></code> <code><button»type="button"»class="btn»btn-warning"></code> <code>»»Warning</code> <code></button></code> <code><button»type="button"»class="btn»btn-danger"></code> <code>»»Danger</code> <code></button></code> <code><button»type="button"»class="btn»btn-link"></code> <code>»»Link</code> <code></button></code> <code><br»/></code> <code><button»type="button"»class="btn»btn-default»btn-lg"></code> <code>»»Large»button</code> <code></button></code> <code><button»type="button"»class="btn»btn-default»btn-sm"></code> <code>»»Small»button</code> <code></button></code> <code><button»type="button"»class="btn»btn-default»btn-xs"></code> <code>»»Extra»small»button</code> <code></button></code> <code><button»type="button"»class="btn»btn-default"»disabled="disabled"></code> <code>»»Button</code> <code></button></code> </codelisting> <codelisting page="" id="70" header="Listing 3: Code example of Bootstrap’s Modal functionality"> <code> <button»type="button"»data-toggle="modal"»data-target="#myModal"</code> <code>»»class="btn»btn-primary»btn-lg">Launch»modal</button></code> <code> </code> <code> <div»class="modal»fade"»id="myModal"»tabindex="-1"»role="dialog"</code> <code>»»aria-labelledby="myModalLabel"»aria-hidden="true"></code> <code>»»<div»class="modal-dialog"></code> <code>»»»»<div»class="modal-content"></code> <code>»»»»»»<div»class="modal-header"></code> <code>»»»»»»»»<button»type="button"»class="close"»data-dismiss="modal"</code> <code>»»»»»»»»»»aria-hidden="true"></code> <code>»»»»»»»»»»&times;</code> <code>»»»»»»»»</button></code> <code>»»»»»»»»<h4»class="modal-title">Modal»title</h4></code> <code>»»»»»»</div></code> <code>»»»»»»<div»class="modal-body"></code> <code>»»»»»»»»Modal»body»text»is»displayed»here</code> <code>»»»»»»</div></code> <code>»»»»»»<div»class="modal-footer"></code> <code>»»»»»»»»<button»type="button"»class="btn»btn-default"</code> <code>»»»»»»»»»»data-dismiss="modal"></code> <code>»»»»»»»»»»Close</code> <code>»»»»»»»»</button></code> <code>»»»»»»»»<button»type="button"»class="btn»btn-primary"></code> <code>»»»»»»»»»»Save»changes</code> <code>»»»»»»»»</button></code> <code>»»»»»»</div></code> <code>»»»»</div></code> <code>»»</div></code> <code> </div></code> </codelisting> <codelisting page="" id="99" header="Listing 4: Code example of Bootstrap’s Panel Component functionality"> <code> <!DOCTYPE html></code> <code>»</code> <code> <html lang="en"></code> <code> <head></code> <code> <meta charset="utf-8" /></code> <code> <meta name="viewport" content="width=device-width, </code> <code> initial-scale=1.0"> </code> <code> <title></title></code> <code> </code> <code> <link href="css/bootstrap.css" rel="stylesheet"></code> <code> </head></code> <code> <body></code> <code>» <div class="container"></code> <code> <div class="panel panel-default"></code> <code> <div class="panel-body"></code> <code> Basic panel example</code> <code> </div></code> <code> </div></code> <code>»</code> <code> <div class="panel panel-default"></code> <code> <div class="panel-heading"></code> <code> <h3 class="panel-title">Panel Default title</h3></code> <code> </div></code> <code> <div class="panel-body"></code> <code> Panel content</code> <code> </div></code> <code> <div class="panel-footer"></code> <code> Panel Footer</code> <code> </div></code> <code> </div></code> <code>»</code> <code> <div class="panel panel-primary"></code> <code> <div class="panel-heading"></code> <code> <h3 class="panel-title">Panel Primary title</h3></code> <code> </div></code> <code> <div class="panel-body"></code> <code> Panel content</code> <code> </div></code> <code> <div class="panel-footer"></code> <code> Panel Footer</code> <code> </div></code> <code> </div></code> <code>»</code> <code> <div class="panel panel-success"></code> <code> <div class="panel-heading"></code> <code> <h3 class="panel-title">Panel Success title</h3></code> <code> </div></code> <code> <div class="panel-body"></code> <code> Panel content</code> <code> </div></code> <code> </div></code> <code>»</code> <code> <div class="panel panel-warning"></code> <code> <div class="panel-heading"></code> <code> <h3 class="panel-title">Panel Warning title</h3></code> <code> </div></code> <code> <div class="panel-body"></code> <code> Panel content</code> <code> </div></code> <code> </div></code> <code>»</code> <code> <div class="panel panel-danger"></code> <code> <div class="panel-heading"></code> <code> <h3 class="panel-title">Panel Danger title</h3></code> <code> </div></code> <code> <div class="panel-body"></code> <code> Panel content</code> <code> </div></code> <code> </div></code> <code>»</code> <code> <div class="panel panel-info"></code> <code> <div class="panel-heading"></code> <code> <h3 class="panel-title">Panel Info title</h3></code> <code> </div></code> <code> <div class="panel-body"></code> <code> Panel content</code> <code> </div></code> <code> </div></code> <code> </div></code> <code> </body></code> <code> </html></code> </codelisting> <codelisting page="" id="180" header="Listing 5: Code example of Bootstrap’s ListGroup Component and its complex HTML functionality"> <code> <!DOCTYPE html></code> <code>»</code> <code> <html lang="en"></code> <code> <head></code> <code> <meta charset="utf-8" /></code> <code> <meta name="viewport" content="width=device-width, </code> <code>»»»»»»»»initial-scale=1.0"></code> <code> <title></title></code> <code> </code> <code> <link href="css/bootstrap.css" rel="stylesheet"></code> <code> </head></code> <code> <body></code> <code>»</code> <code> <div class="container"></code> <code> <div class="list-group"></code> <code> <a href="#" class="list-group-item active"></code> <code> <h2 class="list-group-item-heading">Microsoft</h2></code> <code> <p class="list-group-item-text"></code> <code>»»»»»»»»»This is text that is being used to demonstrate list </code> <code>»»»»»»»»»groups. Lorem ipsum dolor sit amet, consectetur </code> <code>»»»»»»»»»adipisicing elit, sed do eiusmod tempor incididunt </code> <code>»»»»»»»»»ut labore et dolore magna aliqua.</p></code> <code>» <h4 class="list-group-item-footer">This is the footer</h4></code> <code>»» </a></code> <code> <a href="#" class="list-group-item active"></code> <code> <h2 class="list-group-item-heading">Google</h2></code> <code> <p class="list-group-item-text"></code> <code>»»»»»»»»»This is text that is being used to demonstrate list </code> <code>»»»»»»»»»groups. Lorem ipsum dolor sit amet, consectetur </code> <code>»»»»»»»»»adipisicing elit, sed do eiusmod tempor incididunt </code> <code>»»»»»»»»»ut labore et dolore magna aliqua.</p></code> <code>»» </a> </code> <code> <a href="#" class="list-group-item active"></code> <code> <h2 class="list-group-item-heading">Apple</h2></code> <code> <p class="list-group-item-text"></code> <code>»»»»»»»»»This is text that is being used to demonstrate list </code> <code>»»»»»»»»»groups. Lorem ipsum dolor sit amet, consectetur </code> <code>»»»»»»»»»adipisicing elit, sed do eiusmod tempor incididunt </code> <code>»»»»»»»»»ut labore et dolore magna aliqua.</p></code> <code>»» </a> </code> <code> <a href="#" class="list-group-item active"></code> <code> <h2 class="list-group-item-heading">Amazon</h2></code> <code> <p class="list-group-item-text"></code> <code>»»»»»»»»»This is text that is being used to demonstrate list </code> <code>»»»»»»»»»groups. Lorem ipsum dolor sit amet, consectetur </code> <code>»»»»»»»»»adipisicing elit, sed do eiusmod tempor incididunt </code> <code>»»»»»»»»»ut labore et dolore magna aliqua.</p></code> <code>»» </a> </code> <code>»»»</div></code> <code> </div></code> <code> </body></code> <code> </html></code> </codelisting> <codelisting page="" id="232" header="Listing 6: Code Example Using the New Navbar classes"> <code> <nav class="navbar navbar-default" role="navigation"></code> <code> </code> <code> <div class="navbar-header"></code> <code> <button type="button" class="navbar-toggle" </code> <code>»»»»»»data-toggle="collapse" </code> <code>»»»»»»data-target=".navbar-ex1-collapse"></code> <code> <span class="sr-only">Toggle navigation</span></code> <code> <span class="icon-bar"></span></code> <code> <span class="icon-bar"></span></code> <code> <span class="icon-bar"></span></code> <code> </button></code> <code> <a class="navbar-brand" href="#">Brand</a></code> <code> </div></code> <code>»</code> <code></code> <code> <div class="collapse navbar-collapse navbar-ex1-collapse"></code> <code> <ul class="nav navbar-nav"></code> <code> <li class="active"><a href="#">Link</a></li></code> <code> <li><a href="#">Link</a></li></code> <code> <li class="dropdown"></code> <code> <a href="#" class="dropdown-toggle" </code> <code>»»»»»»»»»»»data-toggle="dropdown">Dropdown <b class="caret"></b></a></code> <code> <ul class="dropdown-menu"></code> <code> <li><a href="#">Action</a></li></code> <code> <li><a href="#">Another action</a></li></code> <code> <li><a href="#">Something else here</a></li></code> <code> <li><a href="#">Separated link</a></li></code> <code> <li><a href="#">One more separated link</a></li></code> <code> </ul></code> <code> </li></code> <code> </ul></code> <code> <form class="navbar-form navbar-left" role="search"></code> <code> <div class="form-group"></code> <code> <input type="text" class="form-control" </code> <code>»»»»»»»»»»»»»placeholder="Search"></code> <code> </div></code> <code> <button type="submit" class="btn btn-default">Submit</button></code> <code> </form></code> <code> <ul class="nav navbar-nav navbar-right"></code> <code> <li><a href="#">Link</a></li></code> <code> <li class="dropdown"></code> <code> <a href="#" class="dropdown-toggle" data-toggle="dropdown"></code> <code>»»»»»»»»»»»»Dropdown <b class="caret"></b></a></code> <code> <ul class="dropdown-menu"></code> <code> <li><a href="#">Action</a></li></code> <code> <li><a href="#">Another action</a></li></code> <code> <li><a href="#">Something else here</a></li></code> <code> <li><a href="#">Separated link</a></li></code> <code> </ul></code> <code> </li></code> <code> </ul></code> <code>»»</div></code> <code> </nav></code> </codelisting> <codelisting page="" id="285" header="Listing 7: Code example comparing v2.x and v3.0 button classes"> <code></code> <code> <p></code> <code> <button type="button" class="btn btn-large btn-primary"></code> <code>»»»»»v2.x Large button</button></code> <code> »<button type="button" class="btn btn-large"></code> <code>»»»»»v2.x Large button</button></code> <code> </p></code> <code> <p></code> <code> <button type="button" class="btn btn-primary"></code> <code>»»»»»v2.x Default button</button></code> <code> <button type="button" class="btn"></code> <code>»»»»»v2.x Default button</button></code> <code> </p></code> <code> <p></code> <code> <button type="button" class="btn btn-small btn-primary"></code> <code>»»»»»v2.x Small button</button></code> <code> <button type="button" class="btn btn-small"></code> <code>»»»»»v2.x Small button</button></code> <code> </p></code> <code> <p></code> <code> <button type="button" class="btn btn-mini btn-primary"></code> <code>»»»»»v2.x Mini button</button></code> <code> <button type="button" class="btn btn-mini"></code> <code>»»»»»v2.x Mini button</button></code> <code> </p></code> <code> </code> <code></code> <code> <p></code> <code> <button type="button" class="btn btn-primary btn-lg"></code> <code>»»»»»v3.0 Large button</button></code> <code> <button type="button" class="btn btn-default btn-lg"></code> <code>»»»»»v3.0 Large button</button></code> <code> </p></code> <code> <p></code> <code> <button type="button" class="btn btn-primary"></code> <code>»»»»»v3.0 Default button</button></code> <code> <button type="button" class="btn btn-default"></code> <code>»»»»»v3.0 Default button</button></code> <code> </p></code> <code> <p></code> <code> <button type="button" class="btn btn-primary btn-sm"></code> <code>»»»»»v3.0 Small button</button></code> <code> <button type="button" class="btn btn-default btn-sm"></code> <code>»»»»»v3.0 Small button</button></code> <code> </p></code> <code> <p></code> <code> <button type="button" class="btn btn-primary btn-xs"></code> <code>»»»»»v3.0 Extra small button</button></code> <code> <button type="button" class="btn btn-default btn-xs"></code> <code>»»»»»v3.0 Extra small button</button></code> <code> </p></code> </codelisting> </codelistings> <pages> <page id="1" title=""/> <page id="2" title=""/> <page id="3" title=""/> <page id="4" title=""/> <page id="5" title=""/> <page id="6" title=""/> <page id="7" title=""/> </pages> </document>

Add New Technology/Category
Category Name: *	(Example: .NET)
Category Group: (optional)	(Example: .NET, Visual Studio, Web Development)