Bootstrap FAQ

• What is Bootstrap, and where's the best place to learn about it?
  Bootstrap is a framework built upon HTML, CSS and JavaScript which makes front-end development easy. It is being extensively used to build responsive websites using Grid layout. It has a default set of style declarations which can also be customized. It also comes with a set of components and JavaScript plugins.

  Bootstrap was initially built by Twitter and later released as open source project. It is hosted, developed and maintained on GitHub. The latest stable version is 3.3.6 and Bootstrap 4 stable version is due to be released soon.

• What do I need to include on a page to make sure if Bootstrap will work?
  Bootstrap can be included in any project in 2 ways:
  a. Download & Include: Bootstrap source files which includes css, js and font files should be downloaded and then included in the desired folder.
  (OR)
  b. Bootstrap CDN: Bootstrap source files are hosted on several CDNs (Content Delivery Networks). The URLs to these files on CDNs should be included in html files to use bootstrap features. Once included, refer class name of the element for desired style and include the class name as per requirement.

  Include below CDN links in your HTML page to add Bootstrap CSS and JavaScript functionality.

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

• I want to customize the look and feel of the default typography provided by Bootstrap. Can I do that with CSS? Where should I put that?
  The default typography provided by Bootstrap can be customized in two ways:
  a. Edit the default CSS typography in downloaded/included bootstrap.css file. However, editing a minified version of bootstrap.css would be very difficult and hence would be possible only if the standard version of bootstrap is used.
  b. Bootstrap provides you a pre-customization feature through which you can enable/disable/customize the elements. Once done, the customized version is compiled and is made available for download. Either of the above 2 ways are not possible if you prefer to use the CDNs instead of downloading the package.

• What if I want to change the look of a button, but only that specific button?
  While the style of all buttons as a group can be easily modified using above method, you can add a new style to a specific button by creating a new style class by modifying the default button style as per requirements.

  This can be done easily with Sass by using the @include tag to import default CSS code and then making required changes. However, Sass just reduces the effort and is not mandatory.

• What does it mean for a website to be responsive? Should I be worried about that?
  There are two prominent web design approaches:
  i. Adaptive Design: Multiple Fluid width layouts
  ii. Response Design: Multiple Fluid grid layouts

  Adaptive design web pages have multiple versions of same website and appropriate version is loaded based on device type that requested.

  Responsive design pages have fluid grid of 12 columns. Web elements are defined with grid sizes making them fluid and thus easy for developers to build cross-platform applications/websites for devices with different screen sizes. Considering the present scenario where hundreds of new devices with various software platforms are being released, responsive design is the best solution to provide users the same experience irrespective of the device they use.

  So, yes, you should seriously consider having a responsive design for your website/application. Refer here for a quick overview of responsive design.

• I just built a page with some Bootstrap JavaScript. What should I test?
  There are several Bootstrap elements like Carousel which depend on Bootstrap.js JavaScript file to run. Also, many components can be modified and customized using JavaScript to fit our requirements.

  Once all the JavaScript code is included in the website/application, one should test if the added Bootstrap JavaScript breaks any other JavaScript modules, especially if any other UI frameworks are being used. In such scenarios, namespace collisions can occasionally occur and cause either of the conflicting elements to stop working. In that case, .noConflict can be added on the plugin you wish to revert the value of.