Webmasters Gallery

Q: Describe what Bootstrap offers in terms of components and plugins, and how can they be used.

Bootstrap comes with a lot of UI components, HTML and CSS design templates, and JavaScript plugins. Some of them are: Typography, Tables, Forms, Buttons, Glyphicons, Dropdowns, Buttons and Input Groups, Navigation, Pagination, Labels and Badges, Alerts, Progress Bars, Modals, Tabs, Accordions, Carousels, and more. Templates are made available as well-factored CSS classes that can be applied to HTML elements to achieve different effects. CSS classes have semantic names (descriptive names that have a meaning), like .success, .warning, and .info, so these components are reusable and extensible and they aren’t specific about implementation details. Plugins are JavaScript extensions, and they rely on the jQuery dependency.

Q: Explain in which ways Bootstrap can be extended and adapted to a specific project’s needs.

All the default Bootstrap styles that are bundled initially can be changed and overridden by using custom styles. You can overwrite in your own stylesheet default bootstrap colors, styles, margins, paddings, everything, and most importantly there is no need to touch the bootstrap.css stylesheet at all. Ever.

In case of source code version, creating your own versions of LESS or SASS stylesheets can do it. In case of precompiled version, you can create your own CSS file and overwrite whichever style you want from the original bootstrap.css stylesheet. Create your new CSS selector, use it in the HTML, and as long you declare your CSS classes after Bootstrap styles your definitions will overwrite Bootstrap defaults.

If you aren’t using any of Bootstrap’s interactive features, you can omit bootstrap.js and jQuery.js files from the HTML source. There is also an option to customize Bootstrap’s components, Less variables, and jQuery plugins to get your very own version, which will result in a much smaller file size and will include only components that are actually used on the webpage.

Responsiveness

Today, having a webpage with desktop version only is intolerable. When choosing the right developer, you need to be sure that the candidate understands what a responsive design is, how it can be achieved, and how Bootstrap can help and ease development.

Q: What is Bootstrap’s mobile first approach?

In Bootstrap 2 there was a separated stylesheet with mobile friendly styles for key aspects of the framework. With version 3, Bootstrap introduced a mobile-first design philosophy, which resulted in Bootstrap being responsive by design. This way Bootstrap easily and efficiently scales with a single code base from phones to tablets to desktops. Mobile first styles can be found throughout the entire framework, instead of in one separate file, and now the default styles are for small devices, with media queries added after for larger screens:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

To be sure that we will get proper rendering on all devices, and especially that the touch zooming will work, we need to add the viewport meta tag to :

<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">'viewport'</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">'width=device-width, initial-scale=1'</span>></span>

Q: Explain how responsiveness is achieved and which rules should be followed.

The responsiveness in Bootstrap is achieved using a fluid grid system that can be applied to appropriately scale up to 12 columns, according to the size of the device or viewport. Grids provide structure to the layout, defining the horizontal and vertical guidelines for arranging content and enforcing margins.

To use the Bootstrap grid system, a few rules need to be followed. Grid column elements need to be placed inside row elements, which create horizontal groups of columns. You can have as many rows as you want on the page, but columns must be immediate children of rows. In a full row, the column widths will be any combination that adds up to 12, but it is not mandatory to use all 12 available columns. Rows need to be placed either in a fixed-width layout wrapper, which has a .container class and a width of 1170px, or in full-width layout wrapper, which has a .container-fluid class, and enables the responsive behavior in that row. The Bootstrap grid system has four tiers of classes: xs for phones (<768px), sm for tablets (?768px), md for desktops (?992px), and lg for larger desktops (?1200px). These basically define the sizes at which the columns will collapse or spread horizontally. The class tiers can be used in any combination to get dynamic and flexible layouts.

Q: Explain how a large table can best be shown on mobile devices.

Dealing with large datasets that are in a table with many columns on large screens is a no brainer. Using a standard Bootstrap .table class on large screens will render a nice looking table, but on a small device cell text will break and wrap into the next line, possibly into many new lines and stretching the table vertically. Not to mention that a table this way is unreadable and shown data is unusable. The solution is to wrap a .tablein the .table-responsive parent element, which will result in a table on phones (or any devices with less than 768px) will have full width with the possibility to scroll horizontally.

I know JavaScript too!

As mentioned before, Bootstrap ships with plugins that are in its core JavaScript extensions. This means that the candidate must be proficient in client-side scripting and JavaScript frameworks also, namely jQuery. We will focus here more on the JavaScript caveats related to Bootstrap, and will not test candidates’ knowledge of jQuery.

Q: Discuss possible ways to use Bootstrap Plugin dependency JavaScript files that are needed for plugins to work properly.

First and most importantly, all plugins depend on jQuery, and jQuery must be included before the plugin files. At the moment, Bootstrap v3.3.4 requires jQuery v1.9.1 or later. Second, you need to include either individual Plugin JavaScript files (that can be found in the source code version of the Bootstrap), or all together in one file (using bootstrap.js or the minified bootstrap.min.js). Both bootstrap.js and bootstrap.min.jscontain all plugins in a single file, and it is needed to include only one of them, preferably for production minified one.

If you decide that you want to include only specific JavaScript files for a dedicated plugin, it is important to keep in mind that some plugins and even some CSS components depend on other plugins. If you include plugins individually, you need to make sure to check for these dependencies in the documentation, and include all needed JavaScript files.

Q: Discuss possible ways to use Bootstrap plugins without JavaScript, and related caveats.

All Bootstrap plugins can be used purely through the markup API without writing a single line of JavaScript. This is Bootstrap’s first-class API, and it is the recommended way of using a plugin. For example, you can activate a modal dialog without writing any JavaScript just by setting data-toggle='modal' on a controller element like a button or anchor, and pass additional parameters using data-attributes. In the code below, we are targeting HTML code with the ID #modalID. We have specified that the modal won’t close when user clicks outside the modal by using the data-backdrop option, and we have disabled escape key event that close a modal with data-keyboard option. All in one HTML line of code:

<span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">'button'</span> <span class="hljs-attribute">data-toggle</span>=<span class="hljs-value">'modal'</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">'#modalID'</span> <span class="hljs-attribute">data-backdrop</span>=<span class="hljs-value">'static'</span> <span class="hljs-attribute">data-keyboard</span>=<span class="hljs-value">'false'</span>></span>Launch modal with ID #modalID<span class="hljs-tag"></<span class="hljs-title">button</span>></span>

There are few caveats that we need to be aware of. First is that there can be only one plugin per element when data attributes are used. This means that, for example, a button cannot in the same time have a tooltip and toggle a modal, a wrapping element must be used that will take on the functionality. And second, Bootstrap’s Tooltip and Popover plugins are not CSS-only like other plugins are. For performance reasons, they are opt-in, and to use them they must be initialized first using JavaScript with the following example code:

$(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
  $(<span class="hljs-string">'[data-toggle='</span>tooltip<span class="hljs-string">']'</span>).tooltip();
  $(<span class="hljs-string">'[data-toggle='</span>popover<span class="hljs-string">']'</span>).popover();
}); 

Wrap Up

Bootstrap looks very simple and easy to use, and many developers are rushing into the framework claiming that they are excellent Bootstrap developers. This article referenced topics that every Bootstrap developer should master and provided questions that offer an effective basis for identifying those who possess a sound and principled foundation in the Bootstrap framework, from basics to responsiveness, and working with JavaScript. Finding a web developer can be relatively easy, but finding an excellent Bootstrap developer is a formidable challenge. Just make sure to cover these topics when you are looking for a great Bootstrap developer, and you will be one step closer to identifying the best of the best.

Read More at The Vital Guide to Bootstrap Interviewing