Wednesday 10 August 2016

Twitter Bootstrap Interview Questions and Answers

Twitter Bootstrap Interview Questions and Answers

Question: How to make twitter bootstrap menu dropdown on hover rather than click?
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    

Question: How can I make Bootstrap columns all the same height??
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;

Question: What is sr-only in Bootstrap 3??
It is class used to hide information intended only for screen readers from the layout of the rendered page.

Question: How to disallow twitter bootstrap modal window from closing?
<a data-backdrop="static" data-controls-modal="my_div_id" data-keyboard="false" href=""></a>

Question: What are different 4 tiers in twitter bootstrap?
  1. Extra small devices like smartphones (.col-xs-*)
  2. Small devices like tablets(.col-sm-*)
  3. Medium devices like laptops (.col-md-*)
  4. large devices like laptops/desktops(.col-lg-*)

Question: How to use media queries in twitter bootstrap 3?

Question: How to use media queries in twitter bootstrap 4?

Question: What is an em?
An em is a unit in the field of typography, One em is equal to the 16 point size.

Question: How to open a Bootstrap modal?

Question: How to make responsive image with align center?
.img-responsive {
    margin: 0 auto;

Question: How to create Confirm box before deleting modal/dialog?
Add data-target="#confirm-delete-id" in A tag

<a data-href="/delete-rec?id=203" data-target="#confirm-delete-id" data-toggle="modal" href="">Delete record #203</a>

Add HTML for confirmation box
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="confirm-delete-id" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
                <a class="btn btn-danger btn-ok" href="">Delete</a>


Question: How to disabled the button?
$('#buttonId').prop('disabled', true);