20+ TOP Bootstrap 3 Interview Questions and Answers
1. What is Bootstrap ?
2. What is Bootstrap 3 Rows & Columns ?
Inside the container, the .row class is used to contain the grid columns. Rows should always be placed inside of a container (.container or .container-fluid) to ensure
proper spacing (between page content and the edge of the browser).
The Bootstrap .row uses negative margins (-15px) to counteract the padding (15px) of the container. The end result is no visual spacing (margin or padding) on the
sides of the row within the container. There are several reasons why the “negative margin” approach is used in Bootstrap.
3. What are the key components of Bootstrap ?
The key components of Bootstrap are:
CSS : It comes with plenty of CSS files
Layout Components : List of layout components
Scaffolding : It gives a basic structure with link styles, Grid system and background
Customize : To get your own version of framework you can modify your components.
4. What are the types of layout available in Bootstrap ?
There are two types of Layout available in Bootstrap:
Fluid Layout : It is used when you want to build an app that is 100% wide and use up all the width of the screen
Fixed Layout : It is used for a standard screen.
5. Why does Bootstrap use negative margins ?
All grid systems have spacing or “gutters” around columns. In the case of Bootstrap, the gutter is created using padding of 15px around each column. The effective
gutter displayed between neighboring columns in 30px. The outer columns (leftmost & rightmost) need to have 1/2 of the gutter (15px) on the outside to keep spacing
The relationship between .container and .row is made complete with columns (col-*). Each row is divided horizontally using Bootstrap’s column classes col-*.
6. Why does Bootstrap have 12 columns ?
Bootstrap has a 12-unit grid (instead of 10, 16, etc..) is that 12 evenly divides into 6 (halves), 4 (quarters) and 3 (thirds). This makes adapting to a variety of
layouts much easier. Bootstrap’s grid columns are identified by different col-(breakpoint)-(units) CSS classes. So for example, col-md-3 would be a column that takes up 3 of the 12 units (or 25%) across in a row.
7. How many bootstrap 3 Grid sizes .!
These grid sizes enable you to change the layout of columns to best match different screen widths and devices__ the essence of responsive design.
xs : for the smallest screen widths like smartphones < 768 px
sm : for small screen widths like smartphones and tablets >= 768 px
md : for medium screen widths like tablets and laptops >= 992 px
lg : for large screen widths like desktops >= 1200 px.
8. Bootstrap supports all modern browsers ?
Bootstrap 3 supports all the modern browsers with latest version i.e. Firefox, Google Chrome, IE (Internet Explorer), Opera and Safari.
9. Explain about bootstrap 3 tables ?
Tables can be easily made with basic html tag and specific classes provided in Bootstrap 3. You can make table with Striped rows, bordered table, hover rows, condensed
table and responsive table using their specific classes for right results. Read more about Bootstrap 3 tables here.
10. Can we make images responsive in bootstrap ?
Yes we can make images responsive by adding class .img-responsive which in turn applies CSS properties with max-width(100%) as well as height (auto) for covering parent element.
11. What are offset columns in Bootstrap ?
Offset columns are used for more specialized layouts. For more spacing they can be used by pushing column over.
For example : .col-xs=* classes do not support offset but they are easily simulated using an empty cell.
12. In Bootstrap what are the two ways you can display the code ?
In bootstrap you can display code in two ways :
<code> tag : If you are going to display code inline, you should use <code> tag
<pre> tag : If you want to display the code as a standalone block element or it has several lines then you should use <pre> tag.
13. What is bootstrap jumbotron ?
The Bootstrap jumbotron a lightweight, flexible component provides an excellent way to showcase the key content or information on a your website.
14. What is bootstrap tooltip ?
A Bootstrap tooltip is a small pop up that appears when user places the mouse pointer over an element such as link or buttons to provide hint or information about the element being hovered.
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
Via data attributes : To add a tooltip, add data-toggle = “tooltip” to an anchor tag. The title of the anchor will be the text of a tooltip.
Ex : <a href=”#” data-toggle=”tooltip” title=”Sample tooltip”> Mouse Hover over </a>
15. What is bootstrap popovers ?
The bootstrap popover plugin is very similar to tooltips. To create a popover, add the data-toggle=”popover” attribute to an element and the title attribute to
specify the header text of the popover, the data-content attribute to specify the text that should be displayed inside the popover’s body.
16. What are glyphicons ?
Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost.
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.
17. Explain the typography and links in Bootstrap.!
Bootstrap sets a basic global display (background), typography, and link styles :
a) Basic Global display : Sets background-color: #fff;
b) Typography : Uses the @font-family-base, @font-size-base, and@line-height-base attributes as the typographic base
c) Link styles : Sets the global link color via attribute @link-color and apply link underlines only on :hover
18. What is a Bootstrap collapsing element ?
The “.collapse” class is used to specify the collapsible element. Flexible plugin that utilizes a handful of classes for easy toggle behavior. Click on the button to
toggle between showing and hiding content.
.collapse hides content
.collapsing is applied during transitions
.collapse.in shows content
You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle=”collapse” is required.
19. Explain what media object in Bootstrap is and what are their types ?
Media objects in Bootstrap allow you to put media object like image, video or audio to the left or right of the content blocks. Media element can be created using the
class .media and the source is identified in using the class .media-object. Media-objects are of two types,They are :
20. Explain what is the use of Bootstrap Carousel plugin ?
The Carousel plugin is used to add a slider to your site. It is useful in condition where you want to display huge amount of contents within a small space on the web pages. Some of the standard carousel includes are :