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.

Feel Free To Contact Us

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 25 Days

Crash : 15 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 6 Months

Fastrack : 4 Months

Crash : 2 Months

Request For Demo