Bootstrap Interview Questions and Answers for 3 Month Experience

Question: Why Use Bootstrap?

1. Responsive features: Website built using bootstrop will automatically adjust themselves on all devices like all type phone, ipad, and all type of desktop/laptop.
2. Bootstrap is compatibile with all browser (mobile and desktop).
3. Easy to start.
4. Fast development

Question: How to start Bootstrap without downloading?
Just including following files in web page, and start working on bootstrp.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Question: What doctype use by bootstrap?
Just including following files in web page, and start working on bootstrap.

HTML5 doctype

Question: What are meta tag require to set for proper rending in mobile?
<meta name="viewport" content="width=device-width, initial-scale=1">


Question: Which main class need to declare for fixed layout and fluid layout?
.container For fixed layout.
.container-fluid For fluid layout.


Question: How many column are allowed in Bootstrap Grid System?
12


Question: How many Grid Classes are available in Bootstrap Grid System?
4

1. xs: phones
2. sm : tablets
3. md : desktops
4. lg : large desktops

Question: Basic Structure of a Bootstrap Grid?

<div class="row">
<div class="col-*-*">
</div>
</div>
<div class="row">
<div class="col-*-*">
</div>
<div class="col-*-*">
</div>
<div class="col-*-*">
</div>
</div>

Question: What are Structure of Bootstrap Grid?

Question: What are the classes used for Success and warning?
.bg-primary: Important message.
.bg-success: successful message.
.bg-info: Informatoinal message.
.bg-warning: Warning message.
.bg-danger: Represent message.



Question: How to make an image Rounded Corners?
Just add below class in img tag.

.img-rounded

Question: How to make an image Responsive?
Just add below class in img tag.

.img-responsive

Question: How to make an youtube video as Responsive?
Just add below class in iframe tag.

.embed-responsive-item

Question: How to make an div with rounded border?
Just add below class in tag.

.well

Question: How to make display successful or failure message with cross link?

<div class="container">
<h2>
Alerts</h2>
The .fade and .in classes adds a fading effect when closing the alert message.<br />
<div class="alert alert-success fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Success!</strong> Successful Message.
  </div>
<div class="alert alert-info fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Info!</strong> Informational Message.
  </div>
<div class="alert alert-warning fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Warning!</strong> Warning Message.
  </div>
<div class="alert alert-danger fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Danger!</strong> Something danger.
  </div>
</div>

Best Related Posts are Following:

1. Twitter Bootstrap Interview Questions and Answers.
2. How to detect and change Browser user agent?.
3. Overriding The Default Text Selection Color With CSS.
4. WebRTC Examples.
5. Dojo Interview Questions and Answers for Fresher.
6. EmberJS Interview Questions and Answers.
7. Basic Ember js Interview Questions and Answers.
8. Express Js Interview Questions and Answers.
9. Node Js Interview Questions and Answers for Experienced.
10. JQuery Interview Questions And Answers For Experienced.