Bootstrap is a web framework built by Twitter that integrates HTML, CSS and JavaScript to unify responsive web design concepts into an easy-to-use system for building websites that work across multiple devices.

This full-featured framework includes all the tools you need to build a website that’s capable of rearranging itself depending on the end-user’s platform. The Bootstrap framework even includes a robust CSS implementation that works as-is or can be modified and treated like a springboard for giving a website its own style.

Bootstrap is packed with style components and JavaScript features — like pop-up modal windows, collapsing page content, and a carousel — that add a sense of design refinement to sites requiring minimal configuration and zero development. While it’s easy to implement and use, Bootstrap at minimal requires an understanding of HTML as well as implementing CSS classes and ids. You can get by using many of the JavaScript features without having a solid understanding of JavaScript, but having one makes expanding on the framework easier. The best part is it’s free to use.

The Screen Size Problem: Responsive Web Design as a Solution

Today’s portable devices are as powerful as computers from just a few years ago. Mobile devices have technology capable of handling the robust web experience associated with a desktop or laptop computer but with one major caveat: mobile device screens are a fraction of the size of traditional computer screens.

In the past, web developers resorted to maintaining at least two different sites: one for computers, one for cellular phones, and possibly a third site for tablet devices. The term “responsive web design” describes the practice of using media queries, which activate different CSS designs depending on the width of the web browser’s window, to adjust, rearrange and modify page content to abide by design concepts that work with the device associated with the given screen size.

Essentially, a well-implemented responsive web design site replaces the need for two or three different device-oriented sites with a singular instance. Responsive web design also lets developers take advantage of very large screen sizes without worrying about rendering the site difficult to use for users running low-resolution monitors.

Installing Bootstrap

Implementing Bootstrap is straightforward and doesn’t involve directly installing any programs on your site’s web server. It can be attached to your existing CMS or work with a free-coded website. Bootstrap works on a page-by-page basis, so you can implement the framework on some pages of your site but not others. To install Bootstrap on a site page, include links the following four JavaScript and CSS libraries in your page header:

jQuery:

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Minified Bootstrap CSS:

1	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Bootstrap Script

1	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Bootstrap Style Theme (Optional):

1	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

These scripts can also be downloaded and hosted locally on your own server. You can find out more information about installing Bootstrap here.

Scaffolding and Grid Design

Bootstrap’s “Scaffolding” or “Grid” system is where the framework really shines. Building your own page layout restructuring system with media queries is a time-consuming process.

• The framework’s grid system divides the page content into “rows” and  columns” like its namesake.
• The columns act as a fixed percentage of the page’s container space and shrink in size while maintaining the width percentage at four breakpoints.
• The columns can also be configured to rearrange themselves as the screen decreases in width to stack content in fewer columns instead of side-by-side.

Rows act more like general breaking points that prevent content from continuing to line up side-by-side. For example, a site using Bootstrap’s default 12-column setup may use the styles “col-xs-12“, “col-sm-12“, “col-md-8” and “col-lg-8” for the left column while using the styles “col-xs-12“, “col-sm-12“, “col-md-4” and “col-lg-4” for the right column. This content would show up on desktops and large tablets with a left column that’s two-thirds of the page and a right column that’s one-third of the page whereas it shows up with a single column on mobile devices and small tablets with the desktop’s right column stacked under the desktop’s left column.

Additionally, you can build column-sized content that adjusts how many objects appear in a row. The columns do not have to add up to 12 in each row. You can, for instance, store dozens of images in containers with “col-xs-6“, “col-sm-4“, “col-md-4“, and “col-lg-3” classes applied to show two images on smartphones, three images on tablets, and four images on desktops in each row. If the images don’t line up, the remainder will be filled with white space.

Device Tips

Bootstrap works best with a mobile first design mentality, but that doesn’t mean you should neglect your desktop and tablet sites. If you’re trying to maintain a functionally identical experience on all devices, it’s best to err on the side of caution and implement only those features that will work on mobile devices.

If you are going to implement desktop-only features, you can use the “hidden-xs“, “hidden-sm“, and “hidden-md” classes on sections you wish to hide from mobile and tablet devices. Additionally, when designing for mobile devices it works best to eliminate any sort of multi-column structure for displaying content as those design techniques have a tendency to fall apart on smaller screens.

Implementing a design style like an image to the left and floated text to the right on the same column works well for desktop and tablet sites, but these design concepts can lead to a sloppy-looking mobile experience if there’s too much text relative to the size of the picture. The site may end up with very tiny images or large blocks of white space. Try placing text under images instead of side-by-side on the mobile site. An easy way to do this is build two versions of the display (load the same image in both, the browser is smart and will only load it once) and use the “hidden” classes to control which version shows up depending on the screen size.

Bootstrap 2 versus Bootstrap 3

Bootstrap 3 is designed with a mobile-first mentality, whereas Bootstrap 2 restructures content from a desktop site to fit on a mobile site. Bootstrap 3 is more powerful and lets you control column widths at individual breakpoints, while Bootstrap 2 is easier to use because it automatically configures mobile content to adhere to a single column layout.

However, Bootstrap 2 can’t handle things like jumping from a four-column layout on desktop to a three-column layout on a tablet and a two-column layout on mobile devices. Instead, Bootstrap 2 would run a four-column layout on desktop and tablet devices while switching to a single column layout on mobile devices. Additionally, Bootstrap 2 runs into problems when you have more than 12 columns worth of content in a single row that do not share a common height measurement. The page may render with shifted columns and awkward white space.

Things to Watch For

When working in responsive web design, aspect ratio becomes more important than resolution. Ideally, format images to the maximum possible size they could be displayed at within the framework to capture the highest possible quality without wasting bandwidth to download larger images that don’t make a display difference.

Responsive web design encounters problems when integrating third-party features like widgets and advertisements that aren’t built for dynamic size adjustment. Iframe content can be the most cumbersome to work with because developers can’t apply customized CSS and JavaScript adjustments to retrofit content. Depending on how the content lays out, the styles “width: 100%” and/or “max-width: 100%” can help keep outside content within the page dimensions. Both the W3C and the Mozilla Developer Network have documentation on using CSS transform and CSS transform-origin which can be used to scale iframe content to fit on the page in a pinch.

Dan S is a former news journalist turned web developer and freelance writer. He has a penchant for all things tech and believes the person using the machine is the most important element.

Photo by Per Axbom, Ricardo Liberato