Bootstrap 4 Interview Questions and Answers

Bootstrap 4 is the current version of Bootstrap. Bootstrap 4 is basically an HTML, JavaScript and CSS framework. Bootstrap 4 is popular among the developer across the globe for building mobile-first and also responsive sites with a Bootstrap content distribution network and the template starter page. Bootstrap 4 is free to download and use.

The alpha 1 version of the Bootstrap 4 got released on 19th of August 2015, and the beta 1 version of the Bootstrap 4 got released on 10th of August 2017

• Easy to use: Anyone who has the fundamental knowledge of the HTML and the CSS can start working on Bootstrap
• Responsive feature: The responsive CSS of Bootstrap adjusts to phones, tablets, and even desktops
• Mobile-first approach: In this version, the mobile-first styles are the part of the core framework
• Browser compatibility: Bootstrap 4 is compatible with the leading browsers like Google Chrome, Internet Explorer 10+, Mozilla Firefox, Edge, Safari & Opera.

This is a primary bootstrap 4 interview question.

The Bootstrap 4 grid System is developed with flexbox has a limit of 12 columns across the entire page. If a developer does not want to use the 12 columns individually then, it can be merged to create a full column. The grid system in Bootstrap 4 is responsive and also depending upon the screen size the columns are re-arranged dynamically. The UI developer has to make sure that the sum must be 12 or less than 12.

The bootstrap 4 grid system has the following five classes:-

• col- (for an extra small devices whose screen width less than 576px)
• col-sm- (for a small devices whose screen width equal to or greater than 576px)
• col-md- (for a medium devices whose screen width equal to or greater than 768px)
• col-lg- (for large devices whose screen width equal to or greater than 992px)
• col-xl- (for xlarge devices whose screen width equal to or greater than 1200px)

The above classes can be united to create a flexible and dynamic layout.

Bootstrap 4 is a significant change from its earlier versions. Following are some of the necessary changes:

• CSS is moved from LESS model to SASS model.
• Print pages: Support for printing pages ensures that the size of the printed page is good enough on larger screens. This is done using flex and new print styles.
• By adding uniform code for custom and regular checkbox and radio buttons, form validations are now much more accessible.
• For JS behaviors “data” attribute is used and for group toggling “btn-group-toggle” is added newly.
• Table classes are now named “dark-*” instead of “inverse.”

Point to be noted: Go through this Q&A very thoroughly as this is one of the essential bootstrap 4 interview questions.

Bootstrap has the following image shapes and Corners:-

• Rounded Corners
• circle
• Thumbnail
• Aligning Images
• Responsive Images
• Centered Image

Rounded Corners:-

  The class .rounded add round corners to the image .

syntax:-

   <img alt="Statue of unity" class="rounded" src="Statueofunity.jpg">

Circle :-

 The class .rounded-circle turns the shape of the image to a circle.

Syntax:-

  <img alt="Statue of unity" class="rounded-circle" src="Statueofunity.jpg">

Thumbnail:-

  The class .img-thumbnail turns the shape of the image to a thumbnail, i.e. bordered image.

Syntax:-

  <img alt="Statue of unity" class="img-thumbnail" src="Statueofunity.jpg">

Aligning Images:-

An image is aligned to the left with the class .float-left and an image is aligned to the right with the class .float-right

Syntax:-

  <img class="float-left" src="Statueofunity .jpg">

  <img class="float-right" src="Statueofunity .jpg">

Centered Image:-

 The classes .mx-auto (margin:auto) & .d-block (display:block) align the image at the center.

Syntax:-

   <img class="mx-auto d-block" src="Statueofunity .jpg">

Responsive Images:-

The responsive images adjust themselves dynamically according to the size of the screen. The class .img-fluid is added to the <img> tag to create a responsive images. The class .img-fluid gives max-width: 100%; & height: auto; to the image that has to be responsive.

Syntax:-

<img alt="Pune" class="img-fluid" src="img_Pune.jpg">

A Bootstrap 4 table has very light padding and has a horizontal divider. The class .table gives primary styling to a table.

• Striped Rows:- The class .table-striped gives the zebra-stripes to a table.
• Bordered Table:- The class .table-bordered gives borders on all the four sides of the table and between the cells.
• Hover Rows:- The class .table-hover gives a grey background color or a hover effect on the rows of the table.
• Dark Striped Table:- .table-dark & .table-striped are combined to create a dark and striped table.
• Borderless Table:- The class .table-borderless removes the borders all from all the four sides of the table and between the cells.
• Contextual Classes:- Contextual classes are used to color the entire table (<table>) or rows of the table (<tr>) or cells of the table (<td>). Some of the contextual classes are:-

                  1 .table-primary—it is blue in color, and it shows a significant action.

                  2 .table-success-it is green in color, and it shows a successful or a positive action

                  3 .table-warning -it is orange in color and it shows a warning and needs attention.

• Table Head Colors:- The class .thead-dark gives a dark black background to the headers of the table, and the class .thead-light gives the light grey color to the headers of the table
• Small table:- The class .table-sm makes the table small in size by cutting the cell padding in half.
• Responsive Tables:- The class .table-responsive creates a responsive table which means if needed, on the screens less than 992px wide, a horizontal scrollbar is added to the table and if the more than 992px then no difference.

This is one of the most asked Bootstrap 4 interview questions.

Bootstrap 4 Positions rapidly configure the position of the elements. The positioning classes are .position-static, .position-relative, .position-absolute, .position-fixed, .position-sticky.

There are three positions in Bootstrap 4:-

• Fixed top:- Here the position of an element is at the top of the viewport from an edge to an edge. Syntax:-<div class="fixed-top">...</div>
• Fixed bottom:- Here the position of an element is at the bottom of the viewport from an edge to an edge. Syntax:-<div class="fixed-bottom">...</div>
• Sticky Top:-Here the position of an element is at the top of the viewport from an edge to an edge but only after the user scrolls down below the position of the element. Syntax:- <div class="sticky-top">...</div>

There are two types of Bootstrap 4 colors:-

• Text Colours
• Background Colours

Text Colours:-

Bootstrap 4 has few contextual classes which can be used to give "meaning through colours". The classes for the text colours are: .text-muted, .text-success, .text-info, .text-primary, .text-danger, .text-secondary, .text-dark, .text-white, .text-body (default body colour/often black) and .text-light. Contextual classes can be used on links, and this will add a darker hover color. 50% opacity for black or white text can be added with the classes .text-black-50 or .text-white-50.

Background Colours:-

The background colours classes are .bg-primary, .bg-warning, .bg-info, .bg-success, .bg-danger, .bg-secondary, .bg-dark & .bg-light. Since the background colours do not set the colour of the text therefore the developer have to use them with the class .text-*

Bootstrap 4 gives an effortless way to align the images and the videos along with the content. We can use media objects to show tweets, comments on blogs and many more things. To have a media object the container needs to have a class named .media and for the content of the media, a child container needs to be created with a class attached .media-body

To make sure sufficient spacing is given used padding and other tags as needed. We can have more than one media objects nested with each other. You can add another .media class in a container with a class of .media-body. Alignment to the right can be done by adding an image after .media-body container. For Bottom, top or middle alignment we can provide utilities of flex such as align-self*