BOOTSTRAP 4 INTERVIEW QUESTIONS


Most Important Frequently Asked Bootstrap 4 Interview Questions




Interview Quesions on Bootstrap 4

    1. Question 1. What Is Bootstrap 4?

      Answer :

      Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap 4 is completely free to download and use!

    2. Question 2. When Bootstrap 4 Release Date?

      Answer :

      Bootstrap 4 alpha 1 was released on 19th August 2015. Since then there have been many alpha releases. And finally after that on 10th August 2017, Bootstrap released the first beta for the version 4 of Bootstrap. Bootstrap 4 Beta 2 was released on October 19th, 2017.

    3. Question 3. Why Use Bootstrap 4?

      Answer :

      Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap 4.

      Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops.

      Mobile-first approach: In Bootstrap 4, mobile-first styles are part of the core framework.

      Browser compatibility: Bootstrap 4 is compatible with all modern browsers (Chrome, Firefox, Internet Explorer 10+, Safari, and Opera).

    4. Question 4. How Many Bootstrap 4 Media Objects?

      Answer :

      Bootstrap media object component provides an easy way to align text and media objects when presenting them alongside each other. It allows you to quickly and easily float media to the left and/or right of a content block. 

      Only two classes are required: The wrapping .media and the .media-body around your content. Optional padding and margin can be controlled through spacing utilities.

    5. Question 5. Explain Bootstrap 4 Images?

      Answer :

      Bootstrap provides classes that can be used when working with the img element and examples for opting images into responsive behavior and adds lightweight styles to them all classes.

      1. Responsive images
      2. Thumbnail
      3. Aligning Images
      4. Image Shapes & Corners.

    6. Question 6. What Is Bootstrap 4 Responsive Images?

      Answer :

      Responsive images automatically adjust to fit the size of the screen. Bootstrap is made responsive with .img-fluid class to the tag.  The .img-fluid class applies max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

      <img src="image.jpg" class="img-fluid" alt="responsive Image">

    7. Question 7. What Is Bootstrap 4 Image Thumbnail?

      Answer :

      The .img-thumbnail class shapes the image to a thumbnail (bordered): 

      <img src="image.jpg" class="img-thumbnail" alt="thumbnails image" />

    8. Question 8. What Is Bootstrap 4 Aligning Images?

      Answer :

      The Bootstrap 4 image alignments are mainly used two classes there are .float-left, .float-right.

      <img src="image1.jpg" class="rounded float-left" alt="bootstrap 4 image">

      <img src="images 2.jpg" class="rounded float-right" alt="bootstrap 4 image">

    9. Question 9. How Many Image Shapes & Corners In Bootstrap 4?

      Answer :

      You can use Bootstrap to render images with rounded corners or as a circle. This is achieved with the .rounded-* utility classes.

      <img src="image_1.png" class="rounded" alt="rounded image">

      <img src="image_2.png" class="rounded-circle" alt="rounded-circle image">

      <img src="image_3.png" class="img-thumbnail" alt="img-thumbnail image">

      <img src="image_4.png" class="rounded-top" alt="rounded-top image">

      <img src="image_5.png" class="rounded-bottom" alt="rounded-bottom image">

      <img src="image_6.png" class="rounded-0" alt="rounded-0 image">

    10. Question 10. How Many Colors In Bootstrap 4?

      Answer :

      The bootstrap 4 colors are mainly three:

      1. Text Colors:  .text-primary, .text-success, etc.
      2. Link Colors:  .text-white and .text-muted
      3. Background Colors:  .bg-primary, .bg-success, etc.

    11. Question 11. Explain Bootstrap 4 Tables?

      Answer :

      Use bootstrap 4 to create beautiful tables. Bootstrap 4 versions have some new classes for inverting the table color and making the table responsive.

      Table Dark: The .table-dark class adds a black background and white color fonts to the table

      Table head: You can add a background color to the <thead> element by using either .thead-light or .thead-dark. 

      Etc...

    12. Question 12. What Are Bootstrap 4 Forms?

      Answer :

      The Bootstrap 4 forms are textual form controls like <input>, <text area>, and <select> elements with class .form-control have a width of 100% by default. 

      Horizontal form: Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls.

      Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls. For <legend> elements, you can use .col-form-legend to make them appear similar to regular <label> elements.

      Form and Label Sizing: To Use .col-form-label-sm or .col-form-label-lg to your <label>s to correctly follow the size of .form-control-lg and .form-control-sm.

      And so many forms is there Inline Forms, Help text & Disabled Forms, Readonly plain text, etc....

    13. Question 13. What Is Bootstrap 4 Navs?

      Answer :

      Bootstraps included navigation components list into "tabs" and navigation "pills". To add a tab or nav pill, add the .nav class and either .nav-pills or .nav-tabs to a <ul> element containing the list of navigation items.

    14. Question 14. Explain Bootstrap 4 Navbars?

      Answer :

      Bootstrap 4 navbars is a simple and powerful, responsive navigation header, the navbars. Includes branding, navigation, and other elements into a navigation header, including support for our collapse plugin.

      A standard navigation bar is created with the .navbars class, followed by a responsive collapsing class { .navbars-expand-sm | -md |-lg | -xl  }.

    15. Question 15. What Is Bootstrap 4 Alerts?

      Answer :

      Bootstrap 4 provides an easy way to create a stylized alert message box with its alert component. Alerts are created with the .alert class, followed by one of the contextual classes .alert-primary, .alert-success, etc…

    16. Question 16. Explain Bootstrap 4 Badges?

      Answer :

      To create a bootstrap 4 badge, apply the .badge class, as well as one of the .badge-primary, .badge-secondary, etc…

      Button Badges: Badges can be used as part of links or buttons to provide a counter.

      <button type="button" class="btn btn-primary"> Tutorials <span class="badge badge-light">14</span> </button>

      Contextual Badges: The contextual classes (.badge-*) to change the color of a badge.

      <span class="badge badge-default">Default</span>

      <span class="badge badge-primary">Primary</span> etc….

      Pill Badges: Use the bootstrap 4 pill badges are add .badge-pill class to make the badges more round.

      <span class="badge badge-pill badge-default">Default</span>

      <span class="badge badge-pill badge-primary">Primary</span> etc….

    17. Question 17. What Is A Bootstrap 4 Card?

      Answer :

      Bootstrap's cards provide a flexible and extensible content container with multiple variants and options. 

      A bootstrap card it includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

    18. Question 18. Explain Bootstrap 4 Progress Bars?

      Answer :

      Bootstrap 4 progress bars featuring support for stacked bars, animated backgrounds, and text labels. To create a default progress bar, add a .progress class to a container element and and the .progress-bar class to its child element.

    19. Question 19. About Bootstrap 4 Pagination?

      Answer :

      Bootstrap 4 Pagination to indicate a series of related content exists across multiple pages. Add the .pagination class to an <ul> element. Then add the .page-item to each <li> element and a .page-link class to each link inside <li>.

    20. Question 20. About Bootstrap 4 Positions?

      Answer :

      Quickly configuring the position of an elements are .position-static, .position-relative, .position-absolute, .position-fixed, .position-sticky. Mainly three positions are there.

      Fixed top : <div class="fixed-top">...</div>

      Fixed bottom : <div class="fixed-bottom">...</div>

      Sticky top: Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The .sticky-top utility uses CSS position: sticky, which is not fully supported in all browsers.

      Microsoft Edge and IE11 will render position: sticky as position: relative.

      <div class="sticky-top">...</div>.



Topic: Bootstrap 4 Interview Questions
Interview Quesions on Bootstrap 4

Posted by

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)