Bootstrap Interview Questions & Answers

Download PDF

Bootstrap well is a container <div> that makes the content to appear sunken or an inset effect on the page. In order to create a well, wrap the content that you would like to appear in the well with a <div> containing the class of .well.

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Button groups allow multiple buttons to be stacked together on a single line. This is useful when you want to place items like alignment buttons together.

Bootstrap container is a class which is useful and creating a centred area in the page for display.

Bootstrap collapsing elements enables you to collapse any particular element without writing any JavaScript code or the accordion markup. In Bootstrap to apply collapsing elements you have to add data-toggle= “collapse” to the controller element along with a data-target or href to automatically assign control of a collapsible element. Likewise, you can use .collapse (options), .collapse (‘show’) or .collapse (‘hide’)

Fluid layout adapts itself to different browser. Means design automatic adjust according to browser size.

Bootstrap collapsing elements enables you to collapse any element without using external JavaScript.

As the name suggest this component can optionally increase the size of headings and add a lot of margin for landing page content. To use the Jumbotron −

☛ Create a container <div> with the class of .jumbotron.
☛ In addition to a larger <h1>, the font-weight is reduced to 200px.

<span class="badge"></span> in LI Tag

This class allows to float a media object (images, video, and audio) to the left or right of a content block.

Bootstrap 3 allows to make the images responsive by adding a class .img-responsive to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

Bootstrap labels are great for offering counts, tips, or other markup for pages. Use class .label to display labels.

Panel components are used when you want to put your DOM component in a box. To get a basic panel, just add class .panel to the <div> element. Also add class .panel-default to this element.

Version: 3.3.7, Dated: July 25, 2016

Responsive layout which is able to adapt itself to different sizes as well, but when resizing, the number of columns changes according to the available space.

To use the icons, simply use the following code just about anywhere in your code. Leave a space between the icon and text for proper padding.

<span class = "glyphicon glyphicon-search"></span>

In bootstrap, Jumbotron is generally used for content that you want to highlight like some slogan or marketing headline etc. in other words it is used to enlarge the size of the headings and to add a margin for landing page content

To use the Jumbotron in Bootstrap

Create a container <div> with the class of .jumbotron

You can easily change the order of built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes where * range from 1 to 11.

You can stack the pills vertically using the class .nav-stacked along with the classes: .nav, .nav-pills.

Bootstrap is compatible with all modern browsers like Google Chrome, Mozilla Firefox, Internet Explorer, Safari, and Opera.

.container

The Scrollspy (auto updating nav) plugin allows you to target sections of the page based on the scroll position. In its basic implementation, as you scroll, you can add .active classes to the navbar based on the scroll position.

A modal is a child window that is layered over its parent window. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent window. Child windows can provide information, interaction, or more.

Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript.

To create a tabbed navigation menu −

Start with a basic unordered list with the base class of .nav.
Add class .nav-tabs.