Explore topic-wise InterviewSolutions in .

Use the CLASSES .input-lg and .input-sm to change the size of form controls in Bootstrap:

The following is an example:

The output displays regular, large and smaller inputs:

Since the TOTAL of columns is 12, we can easily create unequal columns. The Bootstrap Grid System displays 12 columns in a page. For unequal columns, we can display then as:

Let us implement the above in our Bootstrap code:

The output displays the following when screen size is above 768px:

CREATE an INLINE flexbox container for MEDIUM screen USING d-md-inline-flex class in Bootstrap.

No, Bootstrap 4 came with the concept of Flexbox to HANDLE layout. Design flexible responsive layout structure using flexbox.

The d-flex class is used in Bootstrap to set a flexbox container. LET us SEE an EXAMPLE wherein we are creating Flex Items:

The following is the output:

The role of responsive images is to adjust to all screen sizes whether its mobile, desktop or tablet:

For responsive image, set the following:

Using the img-fluid CLASS gives you both the above functionalities and scales perfectly on changing the screen size.

Here is an example that makes an image responsive:

The output displays a responsive image. Resize the web browser to check the effect:

Align GATHERED ITEMS at the end on SMALL SCREEN using the align-content-sm-end CLASS in Bootstrap.

The contextual classes are USED to change the BACKGROUND color of table rows or individual cells in Bootstrap 4. The FOLLOWING are the classes with the colors they represent:

• .table-success class: A positive action (Green)
• .table-warning class: A warning (Orange)
• .table-danger class: A negative action (Red)
• .table-primary class: An important action (Blue)
• .table-secondary class: A less important action (GREY)
• .table-active class: Hover color (Grey)
• .table-light class: Light grey table
• .table-dark class: Dark grey table

Let us now see an example to change the background color in a table:

Here is the output:

To display code with Bootstrap, work with the <code> tag. With that, we can also use the <pre> tag.

The <code> tag

For inline code, use the <code> tag. Here, we are displaying a header file code:

The output displays code. In our case, it is only a header file: 

The <pre> tag

If the code has multiple lines, then use the <pre> tag:

The output shows the code in multiple lines:

If you want to add additional information to your content, then use Badges in Bootstrap. Badges LOOKS like labels, but the corners of Badges are more rounded.

If you have a newly launched product and you add the same on your website, then you can add a Badge there as it is “NEW”.

To add a Badge, just add the following with the content of the Badge:

Or you can ALSO use it for count of posts in a blog:

Let us see an example:

The output displays a blue colored Badge, since we have used .badge-primary contextual class:

We can change the color of Badge by adding other contextual classes like .badge-secondary, badge-info, badge-danger, .badge-warning, .badge-light, .badge-dark, etc.

Let us see another example of colored badges:

The output:

The .active class is used in Bootstrap to create an animated Progress Bar. To your already created ProgressBar, include the .active class with the other Progress Bar classes like:

The animation would only be visible if you have already set the Progress Bar to have strip lines as shown in the following example. Here, we have 4 Progress Bars and all are animated:

The output DISPLAYED is animated:

Wrap flex items on MEDIUM SCREEN size using the flex-md-wrap CLASS in BOOTSTRAP.

Use the pull-right class in BOOTSTRAP to float an element to the right. Let us see an example wherein an element is displayed on the right:

The output displays our <div> on the right:

With Bootstrap, you can easily create a responsive table using the table-responsive class. The example below displays a responsive table that adds a horizontal scrollbar for screen less than 992px wide. It looks the same above 992px.

Note: Resize the web browser to check the effect

The above displays the following responsive table:

To condense a table means to cut the row padding in half to shrink it.

Here’s how you make a table condensed:

A regular table with border looks like this:

However, a table with bordered and condensed class looks like this. You can easily spot the difference in padding i.e. the following table itself looks condensed:

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

The condensed table as our output looks like this:

The .nav-justified class is used in Bootstrap to CENTER pills.

The following is an example:

The output when the screen size is less than 768px. The pills look stacked:

The output when the screen size is more than 768px:

With Bootstrap, it’s possible to display FLEX items horizontally using the .flex-row class.

You need to use the following:

Above, we have used the contextual class “bg-secondary” for background color.

Now, we will work on an example:

The above aligns the flex items horizontally:

To display flex items horizontally, use the flex-*-row class in Bootstrap. For difference screens, replace the * in the class name with the following:

For large screen:

For medium size screen:

For SMALL screen: 

To set an aligned object with content, use the Media Object. These objects can be image or video. The usage of media objects can be seen in the comment section of a website/ blog.

The .media class and .media-body class is USED in Bootstrap to work with media objects. Float a media object using .media class, WHEREAS .media-body class place media content inside a child CONTAINER.

The following is an example that creates a media object to align image with content:

The following is the output that displays an image aligned on the left with content:

If you want to align media object on the top, bottom, or middle POSITION, then you can use the flex. Nested media objects are also feasible in Bootstrap.

Form Layout in Bootstrap has the following three forms:

• Vertical Form
• Horizontal Form
• Inline Form

Let us learn about them one by one:

Vertical Form

This is the default form in Bootstrap. Let us see a code snippet to understand it:

The above DISPLAYS the following vertical form as the output:

Horizonal Form

The form-horizonal class is used in Bootstrap for Horizontal form. The labels are ALIGNED horizontally next to the input field on large and medium screens. However, on small screens i.e. < 767px, it will get converted to a vertical form. The form would then look like labels on top of each input).

Let us see a code to understand it:

Here is the output when the screen size is below 767 px:

Here is the output when the screen size is above 767 px:

Inline Form

Inline forms are the forms in which the elements are inline and left-aligned. For using it, add class .form-inline to the <form> tag.

Let us see an example:

Here is the output when the screen size is below 767 px:

Here is the output when the screen size is above 767 px. All the elements are now inline and left-aligned

Yes, we can easily create a Progress Bar with DIFFERENT colors using the contextual classes. The following are the contextual classes available for Progress Bar in Bootstrap:

• .progress-bar-success: Indicates success or positive action for a Progress Bar (Green)
• .progress-bar-info: Indicates informative action
• .progress-bar-warning: Indicate warning action (Orange)
• .progress-bar-danger: Indicates danger action (Red)

For our example, let us create a green colored Progress Bar:

The above displays the following green colored Progress Bar:

Let us now create multiple Progress BARS with different colors. Here, we are displaying information about an app based on its PERFORMANCE, crashes and errors. For all this information, we have used three Progress Bars:

The output displays Progress Bars with different colors:

To create a Navbar in Bootstrap, use the .navbar class. For responsiveness, follow it with .navbar-expand class with the values:

Now, in a navbar, you have links, which a user can click and navigate. To add links, use class “.navbar-nav” and under that the <LI> elements should be with a .nav-item class as shown below:

Let us SEE what we discussed above in the following example:

The following is the output that display the navigation bar with 6 links:

To CREATE a table in Bootstrap, use the .table class. However, to create a striped table, use the .table-stripped class. The striped table will have striped rows i.e. zebra striped rows.

Here’s how you add a striped table:

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

The above displays the below given output with striped rows (zebra striped). We have here 6 rows and 2 columns:

Responsive feature can be easily added to a navbar. Create a default navbar and make it responsive.

Under “navbar-header”, use the data- attribute TWICE. First data-toggle to inform JS that what is to be done with the button. However, the SECOND one i.e. data-target indicates the element to be toggled:

Now, WRAP the content in a <div> with collapse and navbar-collapse classes:

Let us now see an example to create a responsive navbar following the above steps:

The output shows the responsive menu:

To add OUTLINE to Buttons, Bootstrap 4 came up with some classes for outline buttons. For example, For a blue outline, use the .btn-outline-primary class. In the same way for red outline, use the .btn-outline-danger class.

The following is an example:

The output displays outline for Buttons:

The CENTER-block BOOTSTRAP class is useful in CHANGING the position of an element to center. The class APPLIES the following to center an element:

The following is an example that floats an element in the center in Bootstrap 3:

The output: Bootstrap 4 came with the concept of flex. Using flex, you can easily center an element with.align-self-center class.

To add a footer to panel in Bootstrap, use the .panel-footer class:

  Panel Footer

Let us see an example to add footer to panel:

The output displays a footer in panel:

Let’s say you have Dropdown component in Bootstrap to create Dropdown menus.

The menus generally get displayed in the default format LIKE this:

If you want to align the above component to the right, then it is possible with Bootstrap. 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:

On dropdown MENUS, you may have seen an arrow icon. This is called carot arrow icon. Here’s an example:

In BOOTSTRAP, you can easily create a carot icon USING the .caret class.

The following is an example displaying dropdown menu with the carot arrow icon:

The OUTPUT:

The default navbar is a basic Navigation Bar that use the FOLLOWING class:

With that, set role as navigation:

Now, header class is added, which act as a container for LOGO or header. The logo is added using navbar-brand:

Let us see an example now:

The output: 

Create a FLEXBOX CONTAINER for small screen USING the d-sm-flex CLASS in Bootstrap.

On many WEBSITES, you may have seen cards with images that describes the profile of an author or contributor. Create these using cards in Bootstrap, which is a BORDERED box with some padding around it.

Use the .card class to create a card in Bootstrap. With that, Bootstrap provides .card-body class to add content INSIDE it.

Let US now learn how to create a basic card in Bootstrap:

The output displays the following card:

With Bootstrap, you can also add card titles.

Container (Fixed-Width)

USE the container element when you want fixed-width which is responsive. Include it like this:

Container Fluid (Full-Width)

Use the container-fluid element to provide a full-width container that spans the ENTIRE width of the viewport:

Include it like this:

The following describes the difference between both the LAYOUTS:

With Bootstrap, you can easily add Pagination on any web page. This is useful if you have a lot of linked posts and pages.

Some classes in Bootstrap are useful in creating a basic pagination. Let us see them below:

To create a basic pagination, you need to use the <ul> tag. Include the .pagination class to this <ul> and then add the .page-item to each <li> tag.

The following pagination has active post as 2nd. We have active USING the “.active” class to display the current post/ page:

The output below displays demo content and pagination with next/ previous links as well:

Bootstrap has around 260 glyphicons, which can be used on any website. For Bootstrap, these ICON fonts are available for free. Let us now see how we can use Glyphicons on our website:

Under the Bootstrap folder, which you MAY have downloaded to work with Bootstrap, a “fonts” folder can be SEEN. The same folder has all the icons. Every Glyphicon has a name, which you need to use as shown below:

Set the name of the glyphicon under “gplyphicon-name”:

You can set the icon in a button as well as shown below:

Here is an example that shows how to add icons:

The output displays the icons in a button:

Inline forms are the forms in which the elements are inline and left-aligned. To CREATE an inline form, include Bootstrap class .form-inline to the <form> tag.

Let us see an example:

Note: Resize the web browser to see the effect

Here is the output when the screen size is below 767 px:

Here is the output when the screen size is above 767 px. All the elements are now inline and left-aligned

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

Let us now learn how to 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 Bootstrap Panel COMPONENT allow you to add a bordered container with some padding AROUND the CONTENT inside it. The .panel CLASS is used in Bootstrap to create a panel. However, you need to include another class for content i.e. panel-body.

Let us see an example to create a panel:

The following output DISPLAYS Panels in Bootstrap:

You can also add a separate heading to a panel using the .panel-heading class. Let us see an example of headings in Panel:

The following is the output:

With Bootstrap, you can easily order columns with PUSH and pull i.e. change the order of built-in grid columns. Use the .col-md-push-* and .col-md-pull-* classes to change the order of columns. Here, * range from 1 to 12.

Let us SEE an example wherein we have ordered columns:

In the above web page, we have SHOWN what happens when we order columns using the push and pull classes.

Let us now see the output. Resize the browser window to get the following that displays the columns ordered successfully:

Move columns for more spacing to the right with offset columns in Bootstrap. For offsets on large displays, you need to use the .offset-md-* class. Through this, you can INCREASE the left margin of a column by * columns. The value of * here is from 1 to 11.

Let us see an EXAMPLE:

The FOLLOWING is the output, wherein you can see the left margin since we have set offset in the second column:

Bootstrap has a responsive, mobile first fluid GRID system that APPROPRIATELY scales up to 12 columns as the device or viewport size increases. This states that firstly Bootstrap targets mobile devices and then EXPANDS to other devices such as tablet and desktop.

The grid structure in Bootstrap looks like this:

Let us now understand what we did above:

We used the following to create a row:

To add columns:

The first * above is for screen responsiveness class i.e.:

The second * sets a number that adds up to 12 for a row, for example, a row with 4 equal columns:

Yes, with Bootstrap, you can easily center tabs. The .nav-justified class is used in Bootstrap to center tabs.

The following is an example:

The output when the screen size is less than 768px:

The output when the screen size is more than 768px:

The ALIGN-ITEMS-sm-BASELINE class is USED in Bootstrap to align single ROWS of items on the baseline on small screen.

Display FLEX items  vertically using the flex-xx-column class used in BOOTSTRAP. To display flex items vertically on small screen, use the flex-sm-column class:

Display FLEX items horizontally and right-align on MEDIUM screen USING the flex-md-row-reverse CLASS in Bootstrap.

Bootstrap has a responsive, mobile first fluid grid system that APPROPRIATELY SCALES up to 12 columns as the DEVICE or viewport size increases. This states that FIRSTLY Bootstrap targets mobile devices and then expands to other devices such as tablet and desktop. The Bootstrap Grid System displays 12 columns in a PAGE. These columns will rearrange on its own, since the Grid system is responsive.

Bootstrap provides the following classes:

Let us now understand this using an example.

For four equal columns, use four .col-sm-3 classes like this:

The output when screen size is more than 576px:

The output when screen size is less than 576px. As you can see the columns stack on top of each other:

Make flex-items SHRINK on small screen using the flex-sm-shrink-1 class USED in BOOTSTRAP.

The Bootstrap collapse is used to show and hide content. The following are used for Collapsible:

Bootstrap collapse with .collapse class

Let us see an example of Bootstrap collapse with .collapse class. It shows the content hidden by default:

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:

Bootstrap collapse with .collapse show

Let us see an example of .collapse with .show class. It hides the content by default:

The following is the output that displays the content by default since we used the show class as well:

Bootstrap needed something to wrap elements and CONTAIN its grid system, therefore that leaded to introduction of container, which can be fixed or fluid.

Fixed Container

Use the container class when you want fixed-WIDTH which is responsive. Include it like this:

The following is an example:

Fluid Container

Use the container-fluid element to provide a full width container that spans the entire width of the viewport:

Include it like this:

Let us SEE an example:

In a NavBar, if you want to make a link unclickable, then use the .disabled class.

Let’s say we have a Navbar with some items and out of which you want to disable the “Entertainment” link and make unclickable. For that, use the .disabled class LIKE this:

Now, let us see how we can create more items in Navbar and disable one of them. For the second Navbar, we have made the link “Tech” unclickable:

The output:

<P>To wrap items on different screens in Bootstrap, use the flex-wrap class. Let us see how to use this class for different screens:

• For small screen:

Use flex-sm-wrap for small screen:

• For medium size screen:

Use flex-md-wrap for medium screen:

• For large screen:

Use flex-lg-wrap for large screen:

• For extra large screen:

Use flex-xl-wrap for extra large screen:

The following is an example that wraps flex items on different screen size:

The output for screen size above 576px. The flex-sm-wrap wraps on small screen size:

The output for screen size above 768px. The flex-md-wrap wraps on medium screen size:

The output for screen size above 1200px. The flex-xl-wrap wraps on extra-large screen size:

The <small> ELEMENT is used if you want to add inline subheadings to headings. You can also use the .small class and get a text SMALLER than the normal text

To add an inline subheading to any of the headings, simply add <small> around any of the elements or add .small class and you will get smaller text in a lighter color.

The below example creates inline subheading under <h1> and <h2>:

The above displays the following OUTPUT with inline subheadings: