Explore topic-wise InterviewSolutions in .

The following THREE rules should be strictly kept in mind while USING Grids in Bootstrap:-

• A row's immediate child MUST be a Column.
• Rows are just used to CONTAIN Columns and are not UTILIZED for anything else.
• Rows should be put within a container.

The properties of flexbox are:

• Enable flex behaviors:

To make a flexible container and convert DIRECT CHILDREN elements into flex items, use the "display" utility.

Additional flex characteristics can be used to further customize flex CONTAINERS and items.

Default flexbox container:  

You can also create an inline flexbox container. Responsive variations also exist.

• Direction:

You can use direction utilities to change the direction of a flex item in a flex container. It is not essential to create a horizontal class because it is set to row by default.

To show the flex items horizontally, use .flex-row (side by side). To right-align the horizontal direction, use .flex-row-reverse.

Use .flex-column to display flex items vertically (on top of each other), or .flex-column-reverse to display them in the other direction.

• Justify content:

To adjust the alignment of flex elements, use the.justify-content-* classes. Start (default), end, CENTER, between, and around are all valid classes.

• Align items:

You can change the vertical alignment of single ROWS of flex items with the .align-items-* classes. .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch (default) are valid classes.

• Align self:

You can change the vertical alignment of a specific flex item with the .align-self-* classes. .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch (default) are valid classes.

• Auto margins:

You can easily add auto margins to flex items with .mr-auto which pushes items to the right, or by using .ml-auto which pushes items to the left.

• Grow:

You can use .flex-grow-1 on a flex item to take up the unused space. In the example below, the second flex item uses all the available space since we have used the .flex-grow-1 class with the second flex item. 

You can use .flex-shrink-1 on a flex item to make it shrink if required.

• Fill:

You can use .flex-fill on flex items to make them into equal widths.

• Wrap:

With .flex-nowrap (default), .flex-wrap, or .flex-wrap-reverse, you can control how flex items wrap in a flex container.
 

• Order:

With the .order classes, you can change the visual order of a given flex item(s). The number of valid classes ranges from 0 to 12, with the lowest number having the highest importance (order-1 is shown before order-2, etc..).

• Align content:

You can change the vertical alignment of gathered flex items with the .align-content-* classes. .align-content-start (default), .align-content-end, .align-content-center, .align-content-baseline, and .align-content-stretch are valid classes.

The popover will show on the right side of the ELEMENT by DEFAULT. To position the popover on the top, bottom, LEFT, or right side of the element, use the data-placement attribute.

When you click on the element again, the popover closes by default. HOWEVER, the data-trigger="focus" attribute can be USED to close the popover when the user clicks outside the element.

Use the data-trigger attribute with the value "hover" if you want the popover to appear when you move the mouse cursor over the element.

When the user MOVES the mouse POINTER over an element, the Tooltip component appears as a little pop-up box. The POPOVER component is a pop-up box that emerges when the user clicks on an element. The popover may HOLD a lot more information.

The popover will show on the RIGHT side of the element by default whereas the tooltip will show on the top of the element by default.

In BOOTSTRAP, Jumbotron is USED to highlight contents. It enlarges the headline and provides a margin for the landing page's content. In order to implement Jumbotron in Bootstrap, create a CONTAINER div with the .jumbotron CLASS.

It's an auto-updating nav COMPONENT that allows you to GRAB sections of the page based on where you're scrolling. Based on the scroll POSITION, the .active class will UPDATE from ONE nav item to the next.

You MAY collapse any element with Bootstrap collapsing elements without creating any JavaScript CODE or accordion markup. To automatically delegate control of a COLLAPSIBLE element in bootstrap, add data-toggle= "collapse" to the controller element along with a data-target or href. You may also do the same thing with .collapse (options), .collapse (‘show'), or .collapse (‘hide').

The AFFIX plugin allows you to affix a &LT;div> to a particular LOCATION on the page. You may also use this plugin to turn on and off the PINNING. Social icons are a good example of this. They'll start in one position, but when the page REACHES a certain point, the <div> will be frozen in place and will no longer scroll with the rest of the page.

One of the most intriguing properties of bootstrap is column ORDERING. The columns can be READILY written in a specific order by utilizing relevant functions. You might alternatively put them in a different column. Use the push and pull column classes to easily REARRANGE or rearrange the order of the columns. These classes are used in conjunction with the .col-xs-#, .col-sm-#, .col-md-#, and .col-lg-# Bootstrap grid classes.

.col-xs-push-# and .col-xs-pull-# are the push and pull classes for the Bootstrap grid. This also works well for sm, md, and lg. The pull class moves columns to the left, whereas the push class moves them to the RIGHT.

Badges are USED to supplement any content with additional information. To make rectangular badges, use the .BADGE class with a contextual class (like .badge-secondary) within <span&GT; elements. It's worth noting that badges scale to fit the parent element's SIZE (if any).

To make the badges more ROUNDED, we use the .badge-pill class. 

If your website has lots of pages, you might require adding some sort of pagination to each page.

Pagination is how BOOTSTRAP handles an unordered list. The following classes are provided by bootstrap to manage pagination:

.pagination: This class is required to enable pagination on your page.

.disabled, .ACTIVE: Use .disabled for unclickable links and .active to indicate the current page when customising links.

.pagination-Ig and .pagination-sm: use these to get different size items.

The Bootstrap well is simply a container that makes the content appear sunken. It can also produce an inset EFFECT on the webpage. With the aid of <div&GT; and class, a DEVELOPER may create a well and also wrap the content in the well. The content will be displayed ACCORDING to your preferences.