Bootstrap 4 Interview Questions
An Overview of Bootstrap 4
This latest version supports all of the major platforms and browsers and uses flex modal for the grid system. It provides a responsive fluid grid system that scales the columns as the device size increases or decreases.
Most Frequently Asked Bootstrap 4 Interview Questions And Answers With Examples:
- What is Bootstrap 4?
- Bootstrap 4 released on which date?
- Can you list the difference between Bootstrap 3 and Bootstrap 4?
- Why we use Bootstrap 4?
- Can you explain the basic Structure of a Bootstrap 4 Grid?
- What new in Bootstrap 4? Explain
- List the different image shapes & Corners used in Bootstrap 4?
- Explain Bootstrap 4 Tables?
- Explain Bootstrap 4 Positions.
- How many colors in Bootstrap 4? Explain
- Explain media objects in bootstrap 4?
|S.no||Bootstrap 3||Bootstrap 4|
|1.||It has 4 grid system||It has 5 grid system|
|2.||The offset class of Bootstrap 3 is (col-md-offset-4).||The offset class of Bootstrap 4 is (offset-md-4).|
|3.||In Bootstrap 3, this (.img-responsive) class is used for responsive image.||In Bootstrap 4, this (.img-fluid) class is used for responsive image.|
|4.||In Bootstrap 3 (.input-lg) and (.input-sm) is used to increase or decrease the input size.||In Bootstrap 4 (.form-control-lg) and (.form-control-sm) is used to increase or decrease the input size.|
- 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.
<!-- Control the width of the column, and how they should look on different devices -->
<!-- Or let Bootstrap automatically manages the layout -->
Bootstrap 4 is a significant change from it’s 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
- Aligning Images
- Responsive Images
- Centered Image
The class .rounded add round corners to the image .
<img alt="Statue of unity" class="rounded" src="Statueofunity.jpg">
The class .rounded-circle turns the shape of the image to a circle.
<img alt="Statue of unity" class="rounded-circle" src="Statueofunity.jpg">
The class .img-thumbnail turns the shape of the image to a thumbnail, i.e. bordered image.
<img alt="Statue of unity" class="img-thumbnail" src="Statueofunity.jpg">
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
<img class="float-left" src="Statueofunity .jpg">
<img class="float-right" src="Statueofunity .jpg">
The classes .mx-auto (margin:auto) & .d-block (display:block) align the image at the center.
<img class="mx-auto d-block" src="Statueofunity .jpg">
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.
<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.
- :- The class .table-striped gives the zebra-stripes to a table.
- :- The class .table-bordered gives borders on all the four sides of the table and between the cells.
- :- The class .table-hover gives a grey background color or a hover effect on the rows of the table.
- :- .table-dark & .table-striped are combined to create a dark and striped table.
- :- The class .table-borderless removes the borders all from all the four sides of the table and between the cells.
- :- 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.
- :- 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
- :- The class .table-sm makes the table small in size by cutting the cell padding in half.
- :- 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
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.
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 clas .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*