Bootstrap
Q1. What is Bootstrap, Advantages of Bootstrap?
Ans: Bootstrap is a CSS framework developed by Twitter. CSS framework means in which a number of functionalities are already given, such as a menu, dropdown, carousel, cards, grid system, etc lot of common functionalities already given in CSS framework that’s why we should use Bootstrap.
Advantages of Bootstrap:
- It saves our time.
- It saves lines of codes.
- By using this we can design a website easily.
- It makes the website device friendly, which means a responsive website.
Q2. CSS frameworks?
Ans: There are the following CSS frameworks:
- Bootstrap
- Foundation
- W3
- Skeleton
- Bulma
- Tailwind
Q3. What is Grid System in Bootstrap?
Ans: Grid System is made up of 12 columns, it is used like col-lg-4 with the row class as a parent. We have to first create row and then we can create columns.
The grid system has the following classes for different sizes:
- xl: xtra large device such as >1366px resolution.
- lg: large device such as desktop , laptop which has 1366px resolution or between 1200 to 1366px
- md: medium device such as iPad, tablet, etc.
- sm: small device such as mobile horizontal view.
- xs: xtra small device such as mobile vertical view.
Q4. Bootstrap5 Features?
Ans: Bootstrap5 has the following features:
- It has removed jquery and added vanilla js for better performance.
- It has added 1 extra grid xxl, after adding xxl we can manage our design on ipad pro easily.
- It has added a number of colors.
- It has added SVG icons.
- In this, we can add custom utilities.
- It has removed jumbotron.
- It has added vertical spacing.
Q5.Difference between Bootstrap4 and Bootstrap5?
Q6. Difference Between Bootstrap3 and Bootstrap4?
Q7. Display Classes in Bootstrap?
Ans: Display Classes in Bootstrap is used to hide or show an element according to device size. It is very helpful when we manage our website design on iPad or mobile size.
Display class has the following classes:
Class |
Description |
.d-none
|
This class is used to hide elements on all devices. |
.d-none .d-sm-block
|
Hidden only on Xtra small device and show on small and above devices.
|
.d-sm-none .d-md-block
|
Hidden only on small devices and shown on the medium device and above devices.
|
.d-md-none .d-lg-block
|
Hidden only on the medium device. |
.d-lg-none .d-xl-block
|
Hidden only on large devices. |
.d-xl-none
|
Hidden only on the extra-large devices. |
.d-block
|
Display block on all devices. |
.d-block .d-sm-none
|
Visible only on Xtra small device. |
.d-none .d-sm-block .d-md-none
|
Visible only on a small device. |
.d-none .d-md-block .d-lg-none
|
Visible only on medium devices. |
.d-none .d-lg-block .d-xl-none
|
Visible only on large devices. |
.d-none .d-xl-block
|
Visible only on extra-large devices. |
Q8. Bootstrap Modal?
Ans: Bootstrap Modal box is like a pop up , it is mostly used to show some offers in modal box or it is used for enquiry purpose, we can add form in this.
It can be used on button click or on page load.
Q9. Bootstrap Card?
Ans: Bootstrap Card is used to make a box in which image, heading, paragraph and buttons exists. It is mostly used in a website.
Q10. Bootstrap Spacing Classes?
Ans: Bootstrap provides spacing classes to give space in a design. Bootstrap has the following properties for spacing:
m: stands for margin.
p: stands for padding.
Directions:
t: is used for top margin/padding.
b: is used for bottom margin/padding.
l: is used for left margin/padding. In bootstrap5 we use (s) for left margin/padding.
r: is used for right margin/padding. In bootstrap5 we use (e) for right margin/padding.
x: is used for left and right margin/padding.
y: is used for top and bottom margin/padding.
Size:
0: 0px sets to margin/padding.
1: 4px or .25rem (if font size is 16px) sets to margin/padding.
2: 8px or .25rem (if font size is 16px) sets to margin/padding.
3: 16px or .25rem (if font size is 16px) sets to margin/padding.
4: 24px or .25rem (if font size is 16px) sets to margin/padding.
5: 48px or .25rem (if font size is 16px) sets to margin/padding.
Q11. Media Object in Bootstrap?
Ans: Media object in bootstrap is used to design a comment system.
Q12. Alerts in Bootstrap?
Ans: Alerts in bootstrap are used to display alerts on a website or web applications. It is mostly used in web applications to show alerts when the user adds update, or delete data.
Q13. The collapse in Bootstrap?
Ans: Collapse in bootstrap is used when the user wants to open a div on a button click like an accordion, mobile menu button.
Q14. Flex Classes in Bootstrap?
Ans: There are a number of classes available for flex in bootstrap but here are the most common following:
- d-flex: stands for display flex
- justify-content-center: It is used to center align an element.
- justify-content-start: It is used to left align an element.
- justify-content-end: It is used to right-align an element.
- justify-content-between: It is used to give space between elements. It does not give space to the first box from the left and does not give space to the last box from the right.
- justify-content-around: It is used to give equal space from the right and left to all the elements.
- align-items-center: It is used to center align an element.
- align-items-start: It is used to top align an element.
- align-items-end: It is used to bottom align an element.
- align-items-between: It is used to give space between elements. It does not give space to the first row from the top and does not give space to the last row from the bottom.
- align-items-around: It is used to give equal space from top and bottom to all the elements.
Q15. Tab panel or Dynamic Pills in Bootstrap?
Ans: Tab panel or dynamic pills is very useful when you want to show more data effectively without disturbing a whole design.
In a tab panel, we click on a button/any element to show some data after clicking.
Q16. Popover in Bootstrap?
Ans: Popover in bootstrap is used as a tooltip; It is used when you want to show some data on a mouse click of the element.
Q17. Which class in used to style input in bootstrap?
Ans: (form-control) class is used to style input in bootstrap.
Q18. Table responsive class in Bootstrap?
Ans: (.table-responsive) class is used on the parent of the table element to make a table responsive, it adds a horizontal scroll in the table.
I hope these questions will help the fresher designers to crack the interview.