Explore topic-wise InterviewSolutions in .

Fixed Navigation BAR in BOOTSTRAP allow you to fix the navbar at the top. USE the .navbar-fixed-top class to achieve the same:

To check with a scrollbar, we have styled the body height as 1200px:

Now, when you will scroll the page, the navigation bar would remain fixed on the top. You may have seen the same on a lot of websites these days.

The following example fix the navbar to the top:

The output displays the navigation bar fixed at top. Notice the scrollbar on the right. The changes in the scrollbar won’t affect the position of the navigation bar at the top:

To align the menus on your website, you can use the .dropdown-menu-right class. It aligns the dropdown menus on the right.

The following is an example that aligns the menu to the right on clicking:

The output:

Above, we have created and set the menus on the right as shown below: 

For selecting a single option from a set of multiple options, we use select. However, with select as multiple (select multiple), we can select more than one option.

The following is an example displaying “multiple” select in Bootstrap:

The below output is visible with select options: 

Now, press “CTRL” key and select multiple options. On selection the options, it gets highlighted as shown below: 

Add emphasis to a paragraph with BOOTSTRAP lead class. It is Typography class in Bootstrap. Let us SEE an example to understand the difference between lead body copy and a regular demo paragraph: 

The output displays how to use the lead class in Bootstrap to stand out paragraph:

In Bootstrap forms, you can add a block level help text USING help-block class.

Let us see an example:

The output: 

Breadcrumbs display hierarchy-based information and the current page location. On a website, breadcrumbs display categories, and tags and help users in navigation and letting them know where they have reached.

Bootstrap has the concept of Breadcrumbs with a class .breadcrumb. The separator for Breadcrumb is added by bootstrap.min.css:

Let us now SEE an EXAMPLE in Bootstrap to ADD Breadcrumbs:

The above code displays the following breadcrumb navigation:

The two classes you need to use for adding auto margins to flex items are .mr-auto and .ml-auto.

Let us first see .mr-auto that place items to the right:

The OUTPUT shifts items to the right: 

Let us first see .ml-auto that place items to the left: 

The output shifts items to the left: 

Yes, a BOOTSTRAP Well is a container. It is a container in <div&GT; through which the content appears sunken. As you can see below a basic container is Create a Bootstrap Well: 

We will now implement the above in a web page:

Above creates the following well:

The size of Well can also be changed in Bootstrap using well-sm and well-lg classes. Here, we are implementing them:

Here is the output:

The .form-check-inline class is used in Bootstrap to MAKE the checkboxes to appear on the same line. This form of checkboxes is known as Inline Checkboxes.

The example below displays checkbox to appear on the same line:

The output:

To nest button groups within another button group, you need to include one button group into another. The following is an example that displays nested Button Groups. Here, we have three buttons in a Button group. The second button has a nested Button Groups that displays the YEAR in which India won WORLD Cup.

The example:

Here is the output that displays nested Button Groups. The second button in the button group is nested as shown below:

Use the .modal-dialog-centered class to center the Bootstrap modal vertically and horizontally within the page.

Generally, by DEFAULT, a modal appears like this. You can see it is not vertically and horizontally centered:

But, the modal after using the .modal-dialog-centered class will look vertically and horizontally centered:

Let us now see an example: 

The above centers the Bootstrap modal vertically and horizontally within the page: 

To add fading effect for a BOOTSTRAP Modal, use the .fade class. Add this class in the modal container

Let US see an example of Bootstrap modal fading effect:

The output looks like this:

On clicking the “Open” button, the modal opens and the fading effect is visible. The same fading effect can be seen on closing the modal:

Use the flex-lg-nowrap class in Bootstrap 4 to not allow flex-item to WRAP on large screen. Use it LIKE this:

Fixed Navigation Bar in Bootstrap allow you to fix the navbar at the bottom. Use the .navbar-fixed-bottom class to ACHIEVE the same:

To CHECK with a scrollbar, we have styled the body height as 1200px: 

Now, when you will scroll the page, the navigation bar would remain fixed on the bottom.

The following example fix the navbar to the bottom:

The output displays the navigation bar fixed at bottom. Notice the scrollbar on the right. The changes in the scrollbar won’t AFFECT the position of the navigation bar at the bottom:

To create a colored Navbar, firstly work around the same procedure to create a Navbar. Then, use the .bg-color classes to change the background color. These classes include: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light classes.

Let us first begin with creating a blue colored Navbar using .bg-primary color classes:

The OUTPUT displays a colored Navbar:

Now, let us add more navbars with different colors using the classes discussed above:

The output with Navbars in different colors:

In a NavBar, if you want to highlight the current link, then use the .active class.

Let’s say we have a Navbar with some ITEMS and out of which you want to highlight the “Entertainment” link, which is the current link. For that, use the .active class like this:

Now, let us see how we can create more items in Navbar and highlight one of them. For the SECOND Navbar, we have HIGHLIGHTED the item “Tech”:

The OUTPUT: 

With Bootstrap, you can change the theme of the default navigation bar. Yes, you can create an inverted NAVBAR using the .navbar-inverse CLASS.

We create a default navbar using navbar-default class:

Above will create a default navbar with the following STYLE:

Replace the .navbar-default class with the class to create inverted Navbar:

The following is an example that displays how we can crate inverted Navbar (black COLORED):

The above code creates the following inverted navbar unlike the default navbar:

The table without a border is known as borderless border. Bootstrap provides a separate class to create a borderless table. This class removes borders from a table.

The EXAMPLE displays both bordered as well as borderless table:

The output displays both bordered as well as borderless table: 

The .table-hover class is used in BOOTSTRAP to add a hover effect on table rows. A GREY background color is VISIBLE when mouse hovers.

The following is an example:

The output displays the following table:

On mouse hover over any of the row, a gray background color is visible:

Display flex items in between on medium SCREEN USING the justify-content-md-between class in Bootstrap.

The following is an example:

The following output displays the flex items are visible in between the flex container on medium screen size:

Display flex items in the center of a flex container on extra-large screen using the justify-content-XL-center class USED in Bootstrap.

We have used xl for extra-large screen SIZE:

<div class="d-flex justify-content-xl-center bg-primary">

Above, bg-primary is a contextual class to set background color.

Bootstrap Well is a container that adds a rounded border around an element. It adds padding and gray background color.

The size of Well can be changed in Bootstrap USING well-sm and well-lg classes. Here, we are implementing them:

Here is the output:We can also create a Bootstrap Well with the default size:

The FOLLOWING is an example WHEREIN we have created a Bootstrap Well with the default size: 

Above creates the following “Well”:

The collapsibles are used in Bootstrap to hide and shows large amount of content.

The following are used for Collapsible:

Let us see an example of Bootstrap collapse with .collapse class:

The following is the output that shows toggled content (show or hide) on button click. First, let us see the result on running:

After that, click the above button that TOGGLES content. On clicking, the collapsed content will be visible: 

The .card-deck is USED in Bootstrap to CREATE a grid of cards of EQUAL height and width. Let us first see how we can set TWO cards inside the .card-deck class:

The above sets two cards of equal height and width:

Let us now add more cards to the grid of cards. This will show how the card align themselves:

The output displays 4 cards in the deck of cards:

The contextual classes are used in Bootstrap to ADD background color to a card. The following are the contextual classes that can be used: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

The following is an example that adds background color to a Bootstrap card:

The output displays cards with different background colors:

To create alert messages on your website, work with the Alert component in Bootstrap. We will use the .alert class for this purpose.

The dismissal alert provided user with an option to close the alert message. For this purpose, use the .alert-dismissible class. After that include class="close" and data-dismiss="alert".

Here, we will use &times; HTML character to display the close sign for closing alert buttons.

Let us see an example:

The output displays dismissible alerts:

To include list groups within any panel, try the following steps:

<LI>Firstly, create a panel with .panel and .panel-default class in the <div>
• Now, ADD panel heading and body using the .panel-heading and .panel-body classes respectively.
• After that, under the .panel <div>, include a list group using .list-group class in a <ul>.

Let us now see how we can create list groups within a panel:

The OUTPUT displays a panel and 8 group items in a List Group:

The .btn-group-vertical class is used in Bootstrap to form a set of BUTTONS appear vertically stacked. This is a class for Button Groups.

The following is an example:

Here is the output that displays a group of buttons vertically stacked:

Yes, we can align single rows of items from the START USING the align-items-*-start class USED in Bootstrap.

Let’s say you need to align from the start on small screen SIZE, for that in place of *, ADD sm for small i.e.:

<P>A dropdown menu is a standard menu that drop down. But, for your website or web project, if you WANT it to drop up, then it is possible.

The following is an EXAMPLE that has drop up menu instead of dropdown. We used the .dropup class in DIV to fulfill our purpose.

The output looks like this:

Now, clicking on the menu will generate the menu upwards i.e. dropup: 

To add badges to List Groups in Bootstrap, you NEED to add the following in <li class = "list-group-item">:

Let us now add:

The following is an EXAMPLE:

The output:

Display flex ITEMS vertically with reversed order on large screen USING the flex-lg-column-reverse CLASS in BOOTSTRAP.

To align a flex item in the CENTER on SMALL SCREEN using the align-self-sm-center class in Bootstrap. This is how you include the class:

With Bootstrap, we can easily stack multiple progress bars. For that, include only a single .progress class and place all the Progress Bars inside it.

For example, firstly adding only a single Progress Bar in the .progress class:

Now, add another Progress Bar in the same .progress class:

LET us add more Progress Bars in the same .progress class:

The output displays multiple Progress Bars in a single .progress class:

If you want to create a tabbed navigation MENU, then USE the “nav-tabs” class like this:

Let us now see how we can form a tab based navigation menu:

The output looks like tabbed navigation menu as shown below. The Home tab is marked as the current page:

The input group size can be easily changed in Bootstrap, using the .input-group-lg and input-group-sm, classes.

Here, the .input-group-lg is used for large input groups. The .input-group-sm is used for small input groups.

The following is an example that displays how to change the size of the input groups in Bootstrap:

The output display different sizes of inputs:

For List Group Items, we use the <ul> element as shown below:

To LINK List Group Items, use the anchor tag. With that, use the <DIV> element INSTEAD of <ul>:

The following is an example displaying how you can link List Group Items:

The output is displayed here:

We have used the .active class to display the CURRENT link.

DISPLAY flex items around on LARGE SCREEN SIZE using the justify-content-lg-around class in Bootstrap.

To create a bordered table, use the .table-bordered class. The bordered table will have borders on the sizes of the table and its cells.

Here’s how you add a bordered table:

The below example displays how we can create a bordered table:

The above displays the following bordered table. We have here 7 rows and 2 columns:

To POSITION tooltip in Bootstrap, use the data-placement attribute.

To position tooltip in the bottom in Bootstrap, use the date-placement attribute with the FOLLOWING value:

The above will be used as:

The following is how you can position tooltip in the bottom in Bootstrap:

The following is the output that displays tooltip in the bottom:

To disable a button in Bootstrap, use the .disabled class. Disabling a button makes it unclickable. The design changes will include fade in color by 50% and LOSING the gradient.

Let us now see an example to disable a button in Bootstrap:

The output displays a disabled and another button which is active. The disabled button is unclickable. You can check the same by placing MOUSE cursor on the disabled button:

STRETCH GATHERED items on small SCREEN USING the align-content-sm-stretch class USED in Bootstrap.

The .alert-LINK class is USED in Bootstrap to include links in Alerts. You need to use the anchor element:

Since we are using contextual CLASSES to color alerts, you need to provide matching colored links within any alert.

The following is an example:

The OUTPUT:

Above, you can see the alert links have the same color as alerts. We added color to alerts using contextual classes.

Display FLEX items from the beginning using the justify-content-*-start class in BOOTSTRAP. For example, for large SCREEN size, use the class with lg:

For CAROUSEL controls, we need an id. Here, we have:

The following sets the <div> has a carousel:

The data-ride="carousel" attribute begins animating the carousel when the page loads.

The bottom of each slide has dots that indicates which slide you’re watching right now. The class .carousel-indicators specify it:

The slides are set with class .carousel-inner. We have set the next and previous controls as well with the data-slide attribute:

The following is an example:

The output: Next slide in the carousel: 

PROGRESS Bar display loading or a process. It’s easy to crate Progress Bar with Bootstrap using some PREDEFINED classes.

The .progress class is used in Bootstrap to create a Progress Bar. Include a .progress class to a <div> element. After that add an empty <div> with another class i.e. .progress-bar:

For users working with screen readers and to support accessibility, we have used  aria-valuemin and   aria-valuemax attributes.

The above code will create the following Progress Bar:

Above, we created a Progress Bar, but no information of the level of completion is visible. For that, you need to use label with Progress Bar.

Let us see how to add a label to our Progress Bar:

The OUTPUT displays the % level visible on the Progress Bar since we have added label:

The .label class is used in Bootstrap to create labels. The purpose of using labels is to provide additional information. For example, mentioning “NEW” for a PRODUCT. It can also be used to set count, tips, etc.

Let us see an example:

To change the color of the label, use contextual classes: .label-default, .label-primary, .label-success, .label-info, .label-WARNING or .label-danger, etc. An example:

Above gives a BLUE color to the label since we have used the label-primary class.

Now, we will work to create some more labels and color them:

The output

To add a heading to a panel, use the .panel-heading class. Include it as a <div> class:

Let US see an example of headings in Panel:

The FOLLOWING is the output:

Pills based navigation can be created in Bootstrap. With that, we can also FORM Pills with Dropdowns.

Create Pills with:

Use the class .nav-stacked to create Pills with Dropdowns:

Let us now see how we can create Pills with Dropdowns:

The following is an example:

Image thumbnail looks different from a regular image on a website. It has a gray border and PADDING, which MAKES it separate from other images.

The following is an example that displays an image as a thumbnail in Bootstrap USING the img-thumbnail class:

The output: