Explore topic-wise InterviewSolutions in .

Here is an example with a detailed explanation:

The outermost <div> is as follows:

• For carousel controls to WORK properly, they must have an id (in this case, id="myCarousel").
• This <div> has the class="carousel" to indicate that it contains a carousel.
• When a new item is displayed, the .slide class adds a CSS transition and animation effect that causes the objects to slide. If you don't want this effect, leave this class out.
• When the page loads, the data-ride= "carousel" attribute TELLS BOOTSTRAP to start animating the carousel right away.

The section on "Indicators" is as follows:

• Each slide's indicators are the small dots at the bottom (which indicates how many slides there are in the carousel, and which slide the user is currently viewing).
• With the class .carousel-indications, the indicators are supplied in an ordered list.
• The data-target attribute refers to the carousel's id.
• When a user clicks on a given dot, the data-slide-to attribute defines the slide they should GO to.

The "Wrapper" section is as follows:

• A div with the class .carousel-inner specifies the slides.
• Each slide's content is defined by a div with the class .item. This can be in the form of text or visuals.
• One of the slides must have the .active class APPLIED to it. The carousel will not be viewable otherwise.
• To generate a caption for each slide, a <div class="carousel-caption"> is added within each <div class="item">.

The section on "Left and Right Controls" is as follows:

• This code adds "left" and "right" buttons, allowing the user to manually navigate between slides.
• The data-slide attribute takes the keywords "prev" or "next," which change the position of the slide in relation to its current location.

Bootstrap's media objects allow you to position media objects such as images, videos, and AUDIO to the left or RIGHT of content blocks. Media elements can be constructed using the class .media and the SOURCE is specified by using the class .media-object. There are two TYPES of media objects:

• .media
• .media-list

When something happens, the TOAST COMPONENT acts as an alert box that only appears for a few seconds (i.e. when the user clicks on a button, SUBMITS a FORM, etc.).

• A BASIC Bootstrap 4 table features HORIZONTAL divisions and light padding.
• The .table class GIVES a table some basic styling.
• The .table-striped class gives zebra stripes to the table.
• The .table-bordered class adds borders to the table and CELLS on all sides.
• On table rows, the .table-hover class adds a hover effect (grey background color).

Here is how the zebra-striped table LOOKS like:

The .input-group class is a CONTAINER for enhancing an input by adding a "HELP TEXT" icon, text, or button in front or BEHIND the input field.

To ADD the help text in front of the input, use .input-group-prepend, and to add it behind the input, use .input-group-append.

Finally, style the provided help text with the .input-group-text class.

Use the .spinner-border class to MAKE a spinner/loader.

If you want the spinner/loader to grow INSTEAD of "spin", use the .spinner-grow class.

In Bootstrap 4, a card is a bordered box with padding surrounding its content. It has options for HEADERS, footers, content, and colors, among other things.

Another example:

Create a wrapper <div> and add a class of .alert and ONE of the CONTEXTUAL classes to create a basic alert (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark).

To MAKE a PANEL more meaningful to a SPECIFIC CONTEXT, use contextual state CLASSES like panel-primary, panel-success, panel-info, panel-warning, and panel-danger.

The NAVIGATION elements in BOOTSTRAP can be styled in a variety of ways. The markup and base CLASS are the same in all of these .nav. To build tabular navigation or TABS, execute the following steps:

Begin by creating an unordered LIST using the base class of .nav. The .nav-tabs class should be added.

Flexbox is a layout module for FLEXIBLE boxes. WITHOUT USING float or POSITIONING, you can quickly create a flexible layout design with flexbox.

<P>Lead adds some emphasis to a paragraph. The .lead class is used to achieve this and it makes the font larger, TALLER, and LIGHTER in weight.

In Bootstrap, there are two straightforward ways to display code:

• The <code&GT; ELEMENT is used to showcase a PIECE of inline code.
• You can USE the <PRE> tag to display a code that has multiple lines or even a block element.

To make thumbnails with BOOTSTRAP, go through the STEPS below:

Wrap an image in an <a> tag with the class .thumbnail. It will add a grey border and FOUR pixels of PADDING. An animated light will now outline the image when it has HOVERED over.

BREADCRUMBS are a wonderful WAY to display a site's hierarchy-based information. Breadcrumbs can show the dates of publication, categories, and tags in the case of BLOGS. They show where the current page is in the navigational hierarchy.

In Bootstrap, a breadcrumb is essentially an unordered list with the class .breadcrumb. CSS adds the separator for you automatically.

Multiple buttons can be placed together on a SINGLE line using button groups. You can USE this to GROUP objects together, such as alignment buttons.

The .btn-group CLASS is used for basic button groups. You can use the class .btn to WRAP a set of buttons in .btn-group.

The Bootstrap Grid System is a mobile-first, responsive grid system that scales up to 12 columns as the device or VIEWPORT size grows. Predefined classes for quick layout options and POWERFUL mix-ins for creating SUCCESSFUL semantic layouts are included in the system.

There are five classes in the Bootstrap 4 grid system:

• .col- for extra small devices, whose SCREEN width is less than 576px.
• .col-sm- small devices, whose screen width is equal to or greater than 576px.
• .col-md- medium devices, whose screen width is equal to or greater than 768px.
• .col-lg- large devices, whose screen width is equal to or greater than 992px.
• .col-xl- extra large devices, whose screen width is equal to or greater than 1200px.

The classes listed above can be combined to build layouts that are more dynamic and adaptable.

<P>The default font size in Bootstrap 4 is 16px, with a line-height of 1.5.

The default font family is "Helvetica Neue," which includes Helvetica, Arial, and other sans-serif fonts.

Margin-top: 0 and margin-bottom: 1rem are also set on all &LT;p&GT; elements (16px by default).

A bootstrap container is a handy CLASS that GENERATES a central region on the page where we can put our site content. The bootstrap .container has the advantage of being responsive and containing all of our other HTML code. Containers are USED to pad the content within them, and there are two types of containers:

• The .container class creates a fixed-width container that is responsive.
• The .container-fluid class creates a full-width container that spans the ENTIRE VIEWPORT width.

The following are some advantages of Bootstrap:

• Bootstrap is simple to use and anyone with a basic understanding of HTML and CSS can GET started.
• Features that ADAPT to phones, tablets, and desktops: Bootstrap's responsive CSS adapts to phones, tablets, and desktops.
• A mobile-first STRATEGY: Mobile-first styles are built into the Bootstrap framework.
• Bootstrap 4 is compatible with all modern browsers, including Chrome, Firefox, INTERNET Explorer 10+, Edge, Safari, and OPERA.