Job Interview Questions Of Bootstrap

HOW CAN WE ALIGN THE BOOTSTRAP IMAGES TO LEFT AND RIGHT ?

• float-left:- this class of Bootstrap helps image to left aligned.
• float-right:- this class of Bootstrap helps image to right aligned.

HOW CAN WE DEFINE THE LAYOUT IN BOOTSTRAP ?

There are 2 ways by which we can define our layout here in Bootstrap and these are:-

• container-fluid:- almost takes the full-width and no spacing here.
• container:- it won’t take full space unless it have some spacing from both left and right sides.

IN GRID SYSTEM OF BOOTSTRAP 1 ROW IS EQUALS TO HOW MUCH COLUMNS ?

In grid system of Bootstrap, 1 row is equals to 12 columns. That means 12 columns or space is allotted to one row.

DEFINE THE BREAK POINTS OF GRID IN BOOTSTRAP ?

• col- width less then 576px.
• col-sm- width equal or greater then 576px.
• col-md- width equal or greater then 768px.
• col-lg- width equal or greater then 992px.
• col-xl- width equal or greater then 1200px.

NAME DIFFERENT TYPES OF COLOR CLASSES IN BOOTSTRAP ?

• text-primary
• text-muted
• text-info
• text-danger
• text-success
• text-warning
• text-dark
• text-white

WHAT CLASS WE CAN USE IF WE WANT ONE ELEMENT TO HIDE IN MOBILE SCREEN BUT VISIBLE IN TEMPLATE AND BIG SCREENS THROUGH BOOTSTRAP4 ?

For achieving this type of effect, we need to add the class here- d-none d-md-block d-lg-block d-xl-block.

WHAT IS THE USE OF BLOCKQUOTE FOOTER CLASS IN BOOTSTRAP ?

As we all have noticed that the quotes also have their author’s or creator name at the end and through this blockquote-footer class we use to achieve this.

HOW WE CAN COLOR THE LINK USING BOOTSTRAP ?

Simply, we can add the different color in the link by using the color classes of Bootstrap.

For example:- <a href=”#” class=”text-info”>Link </a>

WHAT WILL BE THE BORDER COLOR IF WE USE CLASS=" BORDER BORDER-DANGER" ?

By using the class border border-danger in Bootstrap, we will be getting the red color of our border.

WHAT IS THE USE OF IMG-FLUID CLASS IN BOOTSTRAP ?

Through this img-fluid class, we can able to made our images responsive or mobile-friendly.

WHAT WE CAN ACHIEVE THROUGH CLASS P-5 IN BOOTSTRAP ?

We can able to provide the padding of 3rem or 48px through p-5 class in Bootstrap.

NAME DIFFERENT SIZING IN BOOTSTRAP ?

• w-25 width 25%.
• w-50 width 50%.
• w-75 width 75%.
• w-100 width 100%.
• h-25 height 25%.
• h-50 height 50%.
• h-75 height 75%.
• h-100 height 100%.

WHAT WE CAN ACHIEVE THROUGH STICKY-TOP CLASS OF BOOTSTRAP ?

Through sticky-top class of Bootstrap, we can make any section to stick at the top as soon as that particular section comes to the top when the page been scrolled up.

HOW CAN WE ACHIEVE THE ALERT DIALOGUE BOX THROUGH BOOTSTRAP ?

Alert dialogue box in Bootstrap, can be achieved just by including the alert class in Bootstrap.

WHAT IS THE BREADCRUMB CLASS OF BOOTSTRAP USE FOR ?

Breadcrumb class of Bootstrap is used for displaying the page location of the website.

NAME THE DIFFERENT SIZE CLASSES OF BUTTON IN BOOTSTRAP ?

There are mainly 2 size classes of button in Bootstrap and these are:-

• btn-sm small button.
• btn-lg large button.

HOW CAN WE CONSTRUCT THE GREEN COLOR OF BUTTON THROUGH BOOTSTRAP ?

Button in Bootstrap can be easily achieved through btn class but to achieve the green color, we need to add-on the color classes of Bootstrap with btn class. So to achieve both together we need to add the class ="btn btn-success".

WHAT THE CARDS USE FOR AND HOW CAN WE DESIGN CARD THROUH BOOTSTRAP ?

Cards are just been any content container which includes image, text and button. And in Bootstrap we can design card through the class="card".

NAME THE CLASS WHICH CAN HELP US TO CONSTRUCT THE CARD HEADER AND FOOTER ?

For constructing the Card header in Bootstrap, we just need to include the class="card-header". And for constructing the Card footer, we need to include the class="card-footer" in Bootstrap.

WHAT IS THE USE OF CARD-IMG-TOP CLASS IN BOOTSTRAP ?

Through card-img-top class of Bootstrap, we can able to place the image inside the card at the top position.

WHAT IS THE USE OF DROPDOWN CLASS IN BOOTSTRAP ?

Dropdown class of Bootstrap is use to toggle the hidden content. In first click, you can able to display up your hidden content and in second click you can able to hide your content.

WHAT IS THE ACCORDION CLASS USED FOR IN BOOTSTRAP ?

If, we are having the collection of collapse items with us and we want to display only one collapsed item at one time, then our this Accordion class helps us.

HOW CAN I ABLE TO CONSTRUCT THE HOVER EFFECT TABLE IN BOOTSTRAP ?

I can able to construct the hover effect table in Bootstrap by simply using the class="table table-hover".

I WANT TABLE WITH BORDER AND HOVER EFFECT, HOW CAN I ACHIEVE THIS BY USING BOOTSTRAP ?

Both border and hover effect in Tables, can be achieved in Bootstrap by using 2 different classes, which are class="table table-hover table-bordered".

WHAT IS THE USE OF THE CLASS="BORDER BORDER-TOP-0" IN BOOTSTRAP ?

Through this class of Bootstrap, we are constructing any border from left, right and bottom side but not from the top side.

NAME THE CLASS IN BOOTSTRAP BY WHICH WE CAN GIVE MAXIMUM MARGIN AND PADDING ?

In Bootstrap to achieve the maximum padding, we need to add the class="p-5" whereas to achieve the maximum margin, we need to add the class="m-5".

WHAT IS THE USE OF CLASS="CAROUSEL-FADE" IN BOOTSTRAP ?

As we know through carousel class of Bootstrap, we can able to slide the different sections or different images at one place but through "carousel-fade" class, we will be getting the different sections or images but the sliding effect changes to blinking effect type.

WHAT IS JUMBOTRON IN BOOTSTRAP ?

Through Jumbotron, we can create a a big grey extra box to achieve high attention from our users and inside that box, we can keep any type of information or content. In Bootstrap, we ca create the Jumbotron by using the class="jumbotron".

CAN WE ABLE TO DISPLAY CODE IN BOOTSTRAP. IF YES, THEN HOW ?

Yes, we can able to display the code in Bootstrap and to achieve this we needs the tags like <code> tag and <pre> tag.

PURPOSE OF LABELS IN BOOTSTRAP ?

If we offering tips, counts and other information that could help in marking up the web page.

DIFFERENT LAYOUTS AVAILABLE IN BOOTSTRAP ?

There are mainly two layouts for Bootstrap, which are as follows:-

• Fluid Layout:- This layout is 100% wider and it covers all the screen width.
• Fixed Layout:- This layout is used for a standard screen (940px).

WHAT IS THE MODAL PLUGIN USED FOR IN BOOTSTRAP ?

Modal is like a child window that is layered over its parent window. To enrich the user experience and to add functionality to users, modal windows are been created with help of Modal plugin.

DIFFERENT BUTTON STYLES IN BOOTSTRAP ?

Mainly 7 types of button styles are here which are as follows:-

• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link

WHAT IS THE USE OF INPUT GROUP IN BOOTSTRAP ?

Input group in Bootstrap are used for form controls. By using an input group, we can able to easily append or prepend text or button to the text-based inputs.

WHICH BOOTSTRAP CLASS CAN HELP US TO CREATE THE RESPONSIVE TABLE ?

(.table-responsive) class of Bootstrap, we can use to create the responsive table. But this (.table-responsive) class must need to be include over the main table tag (where we include our .table class of our Bootstrap too).

For example:-
<div class="table-responsive">
<table class="table table-hover">
...
</table>
</div>

TRANSITION PLUGIN IN BOOTSTRAP ?

It simply provide the transition effects like sliding or fading in modals.

WHICH BOOTSTRAP CLASS WE CAN USE TO ADD CARD TITLES TO ANY HEADING ELEMENT ?

(.card-title) class of Bootstrap we can use simply to add the card titles to any heading element.

WHAT WE CAN ACHIEVE THROUGH BOOTSTRAP (.card-img-overlay) CLASS ?

Inside any card if we want to have the text over the image then this (.card-img-overlay) class of Bootstrap help us there.

USE OF BUTTON GROUP IN BOOTSTRAP ?

Button group generally allow us to stacked together multiple buttons in a single line. When we want to place buttons together then we can use it simply.

WHAT ARE OFFSET COLUMNS IN BOOTSTRAP ?

Offsets are another useful feature for more specialized layout. They use to push the defined columns and generate more spacing.

WHAT IS TOOLTIPs IN BOOTSTRAP ?

Popovers are just a small pop-up box that appears when the user moves the mouse pointer over an element.

WHAT IS POPOVERS IN BOOTSTRAP ?

Popovers are just a pop-up box that appears when the user clicks on an element. Although it is similar to the tooltip but the popover can contain much more content then the tooltip.

DEFAULT BOOTSTRAP5 TEXT SETTINGS ?

Bootstrap 5 default font size is 16px, with a line-height of 1.5, default font-family is "Helvetica Nueue, Arial and other sans-serif fonts".

WHICH IS THE DEFAULT LAYOUT OF A BOOTSTRAP FORM ?

Vertical layout is the default layout of a bootstrap form.

WHAT ARE BOOTSTRAP BADGES ?

Badges are most similar to labels but the corners of badges are more rounded. Mainly to highlight unread items or important noticable items.