Bootstrap 4 Interview Questions

Bootstrap is a platform for web development that is based on a front-end framework and creates exceptional responsive designs. It is fast, easy and has multiple templates designed using HTML, and CSS. These templates are used for forms, tables, buttons, typography, models, tables, navigation, carousels and images. Bootstrap also has Javascript plugins, which are optional. Bootstrap is preferred for developing mobile web applications.

In total, there are five key components of Bootstrap i.e. CSS (multiple CSS files), Scaffolding (essential for the basic system that consist of Grid system, background, and link styles), Layout Components: (shares a list of all layouts), JavaScript Plugins (includes jQuery and JavaScript plugins) and Customization (Allows customization of all components for a desired framework)

The bootstrap container is again a class that is used for creating an area in the center of the webpage to place the content. There are row elements that act as containers for columns thereby making a grid system. Rows are used for creating horizontal column groups. Using the function .container,  you can get a responsive design, which will include all the other HTML code.

Foundation, Bulma, UIkit, Semantic UI, Susy, Materialize, Skeleton are the top alternatives of the Bootstrap framework.

Navigation Bar is a navigation area of the website that is placed at the top of the website and contains links to important pages. Bootstrap navigation bar is mobile responsive and created by adding

<nav class="navbar navbar-default"></nav>

Bootstrap alerts are predefined alert messages that add styles to message which looks more noticeable to users. .alert-success, .alert-info, .alert-warning, .alert-danger are classes in bootstrap to decorate alert messages.

Bootstrap well is nothing but a container that makes the content appear sunken. Sometimes it may also give an inset effect on the webpage. Thus, a developer can create a well and also wrap the content in the well with the help of <div> and class .well. The content would appear as per your wish.

The Carousel plugin is responsible for adding a slider on the site. The developers usually use it when the webspace is limited but the content is huge. Some of the common carousels include:

• .carousel (options)
• .carousel ('pause')
• .carousel ('prev')
• .carousel ('next')
• .carousel ('number')
• .carousel (‘cycle’)

Major Typography Classes in Bootstrap are

• .lead: Used to make a paragragh diffrent from others.
• .small: Reduces the font size of elemeny.Makes 85% of the size of the parent element
• .text-left: align the content text to left.
• .text-lowercase: Display element text in lower case.
• .list-inline: display element inline.
• .pre-scrollable: Make pre tag content scrollable.

Bootstrap has features that are way better than other web development platforms. It provides an extensive browser support for almost every known browser such as Opera, Chrome, Firefox, Safari etc. With adequate knowledge of CSS and HTML, web development becomes easy on Bootstrap. Also, it supports mobile applications with the help of responsive design. It can adjust CSS as per the device, screen size etc. Instead of creating multiple files, it creates only a single file, which reduces any extra effort by the developer.

There are two major layouts for Bootstrap i.e. Fluid Layout and Fixed Layout.

Fluid layout is necessary for creating an app that is 100 % wider and covers all the screen width.

Fixed Layout is used only for a standard screen (940px).

Both layouts can be used for creating a responsive design.

Jumbotron has a very basic function in bootstrap i.e. highlighting a content. It could either be a slogan or probably a headline. It increases the heading size and gives a margin for the content of the landing page. In order to implement Jumbotron in a Bootstrap use:

Create a container <div> with the class of .jumbotron
For instance: use <div class="container"> if you wish that Jumbotron should not reach the screen’s edge.

Jumbotron can have any valid HTML along with other functions and classes.

There are two simple ways to display code in Bootstrap:

• <code> tag: In case you wish to display an inline code, simply add '<code> tag'
• <pre> tag: In case you have a code with several lines or even a block element, you can display it using '<pre> tag'

Bootstrap collapsing elements is a way in which you can collapse any specific element without developing any JavaScript code or even an accordion markup. Now, in order to implement this element, you need to add data-toggle="collapse"  in the controller element. To automatically assign the control of the collapsible element, you can use data-target or href along with data-toggle="collapse". There are other options also available such as .collapse (options), .collapse ('hide'), .collapse ('show')

In Bootstrap, it is possible to add images, audio, and video using media object. It can either be placed on the left side or the right side of the content. If the developer wishes to create a media element then they can use .media a class where the source will be specified as a .media-object class. There are usually two types of Media-objects i.e. .media and .media-list.

When an unordered list has to be handled by bootstrap, it uses pagination. To handle the list, different classes are available such as ‘.pagination’, ‘.disabled’, ‘.active’, ‘.pagination-lg’. The function ‘.pagination’ to paginate the webpage. The function ‘.disabled’ is used to make the links unclickable. The function ‘.active’ is used for indicating the current webpage. The function ‘.pagination-lg’ and ‘.pagination-sm’ can be used for getting different size items.

Bootstrap supports the LESS preprocessor and allows the design and development for both mobile and desktop. It uses only pixels and has a number of UI elements.

Foundation, on the other hand, supports Sass preprocessor and allows mostly mobile designing. It uses REMs and has only a few options when it comes to UI elements.

There are a few steps, which can be followed for creating vertical or basic.  

• Firstly, a role form can be added to the parent <form> element.
• Secondly, add appropriate spacing by wrapping labels and control in <div> and using the function ‘class .form-group’.
• Lastly, apply the function ‘class .form-control’ to different elements such as text url <input> , <textarea> and <select>

There are several styling navigation elements available on bootstrap and every style uses the same function i.e. ‘class .nav’. In order to create tabs or a tabular navigation, you can begin with a simple or rather basic unordered list using the function class .nav. To add the tabs the function ‘class .nav-tabs can be used.

When there is a need for displaying a simple element as well as a complex element along with a custom content, a list group can be used.  You can use the function ‘class .list-group’ to create a simple list that helps in addressing the entire list and ‘class.list-group-item’ to refer only to an individual item in that list.

When there is a need to cover a parent window, a child window can be created using a modal. Developers generally use a custom Jquery Plugin to create a Modal on Bootstrap. Modal windows are best when it comes to improving the experience of a user and also adding more functionality. The modal windows can be simply created with the help of a modal plugin.

Column ordering is one of the most interesting features that can be found in bootstrap. By using appropriate functions, the columns can be written easily and also in a defined order. You can also show them in another column. In order to change or alter the order of the column easily, the functions .col-md-push-* and .col-md-pull-* can be used.

In order to wrap the content of a page, the '.container' class can be used. Using the same class, the text can be centered.