Developing Web Apps with Bootstrap
This article introduces Bootstrap, which is a sleek, intuitive and powerful mobile frontend framework for faster and easier Web app development. The authors take the reader through the process of installing Bootstrap and configuring it.
In today’s vast Web development arena, developers need an open source tool that allows them to create almost everything a typical website requires, yet is flexible enough for customisation and is device independent. The Bootstrap framework is the latest innovation to hit the design and development arena, making the creation of websites and apps easier, faster and better, in general.
It provides you with all those basic modules like grids, typography, basic HTML and responsiveness. Besides, there are a plethora of useful front-end components like drop-downs, navigation, headers and many more to explore. With these, you can get a Web project up and running, quickly and easily.
Bootstrap was originally created by two designers and developers, Mark Otto and Jacob Thorton at Twitter, to provide a refined, well-documented and extensive library of flexible design components built with HTML, CSS and JavaScript, for other employees to build and innovate on. Since then, there have been over 20 releases including two major rewrites with v2 and v3, the latest being Bootstrap 3.0.3
As stated by the developers themselves, it “…helps nerds do awesome stuff on the Web,” and even amateur Web designers can create jaw dropping stuff once they get their hands on Bootstrap. The rigorous coding and testing a developer spends time on to design a Web page that fits into everything is totally compensated by the responsive design of Bootstrap.
Let us explore why Bootstrap is one of the conquerors of the Web framework today. The great grid system: Bootstrap is built on responsive 12-column grids, layouts and components. Whether you need a fixed grid or a responsive one, it’s only a matter of a few changes. Offsetting and nesting of columns is also possible in both fixed and fluid width layout. Bundled JavaScript plugins: The ready-to-deploy JavaScript plugins play a pivotal role. A developer can easily manipulate modal window alerts, tooltips, ScrollSpy, Popover, Button, Typeahead, etc. Responsiveness: Bootstrap is responsive. If you shift from a laptop to an iPad, and from an iPad to a Mac, you won’t have to fret over your work. Bootstrap adapts to the change in platforms with super speed and efficiency. Customisable and with theming: A great aspect of Bootstrap is that you can make it your own. You can sit down and rummage through the whole framework and keep what you need and ditch what you don’t.
Wrapbootstrap is a popular market place, where developers can portray their own themes and templates designed using the Twitter Bootstrap framework. Extensive list of components: Whether you need drop down menus, pagination or alert boxes, Bootstrap has got everything covered. The styling of every single element follows a consistent theme. Some of the pre-styled components are: • Drop-downs • Button groups • Navigation bar • Breadcrumbs • Labels and badges • Alerts • Progress bar • And many others Good documentation: The case with most newer platforms is that they don’t have proper documentation, but Bootstrap provides great documentation with examples and demos that only make it easier for even someone new.
Getting started
Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. • Download compiled: The fastest way to get Bootstrap is to download the precompiled and ‘minified’ versions of its CSS, JavaScript and fonts. No documentation or original source code files are included. Once downloaded, unzip the compressed folder to see the file structure of (the compiled) Bootstrap as given below: • Downloaded source code: The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source LESS, JavaScript and documentation. It includes the following and more: • Basic template: To make a bootstrapped template, start with the basic HTML template that includes everything we mentioned in file structure. Here is an example:
CSS and typography
Bootstrap has been primarily developed for mobiles, so instead of adding optional mobile styles, they are ‘baked’ directly into the core. By using the view-port meta tag in the head section, rendering and zooming can be achieved on any device.
Bootstrap extends this responsiveness to even the images, just by adding a class:
Container: This is a place where content can be stored in Bootstrap! Container here is a Bootstrap class, which sets the page width at various media query breakpoints: The basic features of the grid system are: Responsive Mobile-first fluid grid system It appropriately scales the page up to 12 columns based on the device or view-port size. This system uses predefined classes for easy page layout options, through a series of rows and columns that house the content, as shown in Table 1.
Based on the device used, the corresponding classes are to be included. This fluid grid comes with the feature of both nesting and offsetting. Typography: All basic tags like ‘h1’, ‘h2’ (headings), ‘p’, ‘small’ and ‘strong’ are supported here. List elements like ‘ul’, ‘li’ and ‘ol’ are also present. Additional functionality that comes with Bootstrap is the alignment of the elements. Table: Bootstrap’s table classes make a simple HTML table more attractive: • table-striped: gives alternate striped colours to the
rows. • table-bordered: borders for the table. • table-hover: highlights the row which is hovered. Forms: Just as with the tables, Bootstrap plays the role of making the form more user friendly. Forms can be displayed in various formats by using the following classes: • form-inline: left-aligned and inline block controls • form-horizontal: the form elements behave as grid rows • checkbox-inline: cluster of check-boxes aligned side by side Form states like ‘input-focused’ or ‘disabled’ form fields are also included.
Form validations like error or success can also be applied by using classes like ‘has-error’, ‘has-success’, etc.
Images: It displays the same image in different shapes. This is what Bootstrap classes can deliver: • img-rounded: image with rounded corners • img-circle: circular image • img-thumbnail: image in the form of thumbnail Helper classes: Functionality for generic icons like close and drop-down is obtained by using these helper classes alongside the elements. Responsive utilities: These utility classes help to toggle content across view-port breakpoints. • visible-xs: Visible for only small devices and hidden for others • visible-md: Visible only for medium-sized devices • hidden-xs: Hidden only on small devices and visible on the rest. Print classes: Similar to the classes discussed above, print classes can be used for toggling specific content for printing.
Extensive list of components
Bootstrap provides over a dozen reusable components that can pump life into a website. Web developers have to simply find out the right piece of code and fit it into the structure they are working on. In addition to this, a lot of the styling and design aspects are already taken care of. Some of the components pre-styled are: Drop-downs: Toggleable, contextual menu for displaying lists of links. Here is an example: • Button groups: Groups a series of buttons together on a single line with the button group. For example, you can wrap a series of buttons within a div using a ‘btn' in ‘btn-group'. See Figure 2. Nav: All nav components here, like tabs and pills, have shared
markup, starting with the base nav class. See Figure 4. • Tabs: Add a nav-tabs class to an unordered list and the list items in it act as tabs. See Figure 3. • Pills: Similar to tabs but with a class nav-pills, and the list items act as pills. Navbars: They are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available view-port width increases. Breadcrumbs: Indicate the current page’s location within a navigational hierarchy. By adding a ‘breadcrumb' class to an ordered list, the list items will act as a breadcrumb. Pagination: Provides pagination links for your site or app with the multi-page pagination component. See Figure 5. Labels and Badges: Easily highlight new or unread items like in the case of mails. See Figures 6 and 7. Progress bars: Provide up-to-date feedback on the progress of a workflow or action. These are generally ‘div’ elements with ‘progress' and ‘progress-bar' classes. Input the progress value as the width attribute and see the bar doing its work. See figure 8. Well: To be used on an element to give it an inset effect:
Media object: Abstract object styles for building various types of components (like blog comments, tweets, etc) that feature a left- or right-aligned image alongside textual content. You can include an image inside a ‘div’ with class as ‘media', and the rest is taken care by Bootstrap. See figure 9. Input groups: Extends form controls by adding text or buttons before, after or on both sides of any text-based input (Figure 10).
JavaScript
Bootstrap comes with a bunch of predefined JavaScript plugins. These can be accessed individually (separate .js files) or via the main bootstrap.js/bootstrap.min.js, which contains all these plugins.
Just input the content into the Bootstrap templates, and include them into the HTML code. These plugins are accessible via the mark-up API without writing any JavaScript code, and you can see them in action. Let’s have a brief look at the plugins: Modal: These are streamlined, but flexible, dialogue prompts with the minimum required functionality and smart defaults:
<div id=’modalID’> <div class=’modal-content’> <div class=’modal-header’>Title Content</div> <div class=’modal-body’>Body Content</div> <div class=’modal-footer’>Footer Content</div> </div> </div>
This modal accepts methods like show, toggle and hide. There are options like keyboard:false/ true for toggling the keyboard for the particular modal. Dropdown: Adds a dropdown functionality to nearly all elements like navbar, tabs and even to buttons. <div class=’dropdown’> <a data-toggle=’dropdown’>Dropdown Triggering element</a> <ul class=’dropdown-menu’> …..</ul> </div>
ScrollSpy: Ever been confused with the menu item in which you are navigating? Here is the solution—just integrate the menu with the plug-in and the menu item will be highlighted. While scrolling down the page, the next menu item gets highlighted automatically. Toggleable tabs: If you want to show large grouped content on a single page, then here’s the solution: <ul class=’nav nav-tabs’>List items</ul> <div class=’tab-content’> <div class=’tab-pane’>Pane Content 1</div> <div class=’tab-pane’>Pane Content 2</div> <div class=’tab-pane’>Pane Content 3</div> </div> Tooltips: Imagine an interactive help text on a Web page. Include this plugin and by hovering on the content, users will get the help text (Figure 12). <div class=’tool tip’> <div class=’tin-opener>ToolTip!</div> <div class=’tooltip-arrow’></div> </div> Popover: If the text to be displayed is too large, toggle on the content and get an overlaying popover housing secondary info. By giving options via attributes like title, content, delay and animation the popover can be used. It also has methods like show, hide, destroy, etc. Alert: Add the dismiss functionality to all alert messages with this plugin. By using this, the alerts can be either invoked or dismissed. Buttons: Control button states or creates a group of