Bootstrap Interview Questions and Answers For Graduates Part-1
1.What is Bootstrap Grid System?
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.
2.What are Bootstrap media queries?
Media Queries in Bootstrap allow you to move, show and hide content based on viewport size.
Show a basic grid structure in Bootstrap.
Following is basic structure of Bootstrap grid −
<div class = “container”>
<div class = “row”>
<div class = “col-*-*”></div>
<div class = “col-*-*”></div>
<div class = “row”>…</div>
<div class = “container”>….
3.What are Offset columns?
Offsets are a useful feature for more specialized layouts. They can be used to push columns over for more spacing, for example. The .col-xs = * classes don’t support offsets, but they are easily replicated by using an empty cell.
4.How can you order columns in Bootstrap?
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.
5.How do you make images responsive?
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.
6.Explain the typography and links in Bootstrap.?
Bootstrap sets a basic global display (background), typography, and link styles −
Basic Global display − Sets background-color: #fff; on the <body> element.
Typography − Uses the @font-family-base, @font-size-base, and @line-height-base attributes as the typographic base
Link styles − Sets the global link color via attribute @link-color and apply link underlines only on :hover.
7.What is Normalize in Bootstrap?
Bootstrap uses Normalize to establish cross browser consistency.
Normalize.css is a modern, HTML5-ready alternative to CSS resets. It is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.
8.What is Lead Body Copy?
To add some emphasis to a paragraph, add class = “lead”. This will give you larger font size, lighter weight, and a taller line height
9.Explain types of lists supported by Bootstrap.?
Bootstrap supports ordered lists, unordered lists, and definition lists.
Ordered lists − An ordered list is a list that falls in some sort of sequential order and is prefaced by numbers.
Unordered lists − An unordered list is a list that doesn’t have any particular order and is traditionally styled with bullets. If you do not want the bullets to appear then you can remove the styling by using the class .list-unstyled. You can also place all list items on a single line using the class .list-inline.
Definition lists − In this type of list, each list item can consist of both the <dt> and the <dd> elements. <dt> stands for definition term, and like a dictionary, this is the term (or phrase) that is being defined. Subsequently, the <dd> is the definition of the <dt>.
10.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.