RHT: Bootstrap 101: An Introduction

by Robert Half Technology
March 24, 2015


Bootstrap follows a “mobile first” strategy and makes it a snap to create a fully responsive design.
Bootstrap has become an increasingly popular way to build websites over the last few years. The framework provides a foundation for building a user interface in HTML, and consists of CSS and JavaScript, as well as supporting assets, like fonts. Bootstrap follows a “mobile first” strategy and makes it a snap to create a fully responsive design. Bootstrap is licensed with an MIT License, giving developers freedom to build closed-source applications if they choose.

Get Started
Bootstrap’s current version is 3.3.4. The easiest way to get started is to use the basic template found at the Bootstrap site. It includes all the links to CSS, JavaScript and jQuery that you need. You’ll also want to download the Bootstrap package and extract its contents so the paths referred to in the template can be found.

Once you have the Bootstrap CSS and JavaScript loaded, take a look around. Bootstrap comes with a large number of predefined CSS classes, user interface (UI) components and JavaScript widgets. Below, you’ll find a brief breakdown of some of the features that most sites and web applications use:

• Nav and Navbar: These components allow you to create navigation elements on your page. A Nav is typically used for in-page navigation (such as a tab system for different steps in a wizard), while a Navbar is used for navigation between pages.
• The grid system: Bootstrap’s grid system is an easy way to position elements on the screen. The grid allows you to define widths and positioning in terms of columns, which makes alignment of objects on the screen accurate. Bootstrap is set up with 12 columns in the grid, and the column widths are based on the size of the viewport. This allows your design to adjust automatically to a smaller or larger screen, a rotating mobile device or the user resizing their browser window.
• Modal dialogs: The requirement for modal dialogs (popups) is very common in web applications. Bootstrap has built-in JavaScript modal dialogs to make your life simple when handling these requests. One caution when using modal dialogs is that they often become the hammer that developers try to use on every rivet or nail they encounter. If you find yourself considering having a modal dialog within a modal dialog, it may be time to rethink your design.
• Alerts: Another frequent feature request is to put alerts on the screen to notify the user of various conditions such as invalid input or successful submission to the server. Bootstrap’s JavaScript alert system handles the need for alerts nicely.
• Carousels: Many modern websites have carousels that cycle through a series of items to display, such as images or <div>. Many stores, for example, use the carousel on their home page to show off their top sellers or new products. (For best practices, the usability experts at the Nielsen Norman Group offer this article on making the most of carousels.)

There’s plenty more to learn about Bootstrap, which is constantly expanding and changing. Once you’re more experienced, try customizing your Bootstrap configuration to reduce the size and complexity of the CSS and JavaScript delivered to the browser so your site runs faster. The customization also makes it easy to change the look and feel of your Bootstrap-based design.

One danger of Bootstrap: The default templates provide such an easy start that many developers don’t stray far from them. This results in Bootstrap sites closely resembling one another. After you’ve gotten the hang of Bootstrap, take a look at themes and self-customization so you can make your site truly unique.

Are you a member of the Bootstrap fan club? Share your Bootstrap experiences in the comments section. Interested in web developer hiring trends? See this post.

— Robert Half Technology

With more than 100 locations worldwide, Robert Half Technology is a leading provider of technology professionals for initiatives ranging from web development and multiplatform systems integration to network security and technical support. Visit our website at www.rht.com.