41⟩ Is Bootstrap Open Source?
Bootstrap is completely free to download and use.
Bootstrap
Home Web Development Bootstrap
“Bootstrap based Frequently Asked Questions by expert members with experience as Bootstrap. These questions and answers will help you strengthen your technical skills, prepare for the new job test and quickly revise the concepts”
128 Bootstrap Questions And Answers
42⟩ What is panel in Bootstrap?
A panel in bootstrap is a bordered box with some padding around its content. To create a basic panel, we use .panel class to the <div> element, and content inside the panel has a .panel-body class.
43⟩ Explain what is column offset in bootstrap?
Column offset in bootstrap provides a more flexible approach for creating layouts. Use class .offset* to shift column right side of the screen. Here * represents number of columns to be shifted. E.g. If there is a class .offser4 on a div then it will shift 4 column from left side towards the right side of the screen.
Example
<div class="row">
<div>...</div>
<div class="offset3">
...
</div>
</div>
44⟩ Tell me what are the responsive design patterns?
Responsive design patterns provide a consistent look and feel and responsiveness across desktop, tablet and mobile devices
There are following patterns for responsive design.
☛ Column drop pattern
☛ Mostly fluid pattern
☛ Layout shifter pattern
☛ Tiny tweaks
☛ Off canvas
45⟩ Tell me what do you understand about Responsive websites?
The first understanding of Responsive websites that comes to a beginner's mind is that responsive means a website that responds to a user. But actually, responsiveness here means that a website is designed in such a way that it can be used on any platform whether it is a large desktop, laptop, tablet or mobile.
So a responsive website actually is one that responds to the changing width and height of a device or screen.
Benefits of a responsive website:
☛ We all know that in today's world, all of the business work can be done using a small device like a tablet or a mobile. So it makes it easier for the user to access the website using a device, thus, increasing the user base and traffic on a website.
☛ When the user base increases, it also adds to the increase in the business of the website and the product sale will also increase.
☛ Makes it easy for an organization to analyze the user base and its productivity.
☛ Increase in the visibility in search engines. This is the major part of the success of an organization.
☛ Save time and cost on mobile development.
46⟩ Tell me how will you create a striped progress bar using bootstrap?
To create a striped progress bar −
☛ Add a <div> with a class of .progress and .progress-striped.
☛ Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.
☛ Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.
47⟩ Explain me how to create thumbnails using Bootstrap?
To create thumbnails using Bootstrap −
☛ Add an <a> tag with the class of .thumbnail around an image.
☛ This adds four pixels of padding and a gray border.
☛ On hover, an animated glow outlines the image.
48⟩ Tell me 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.
49⟩ Tell me what is the difference between the following two lines of code? $('#myModalPrompt').modal({ keyboard false }); $.fn.modal.Constructor.DEFAULTS.keyboard = false;?
In the first line will initialize a modal dialog prompt with id #myModalPrompt, and set only it to ignore keyboard event. The second line will change the default settings for the modal plugin by modifying the plugin’s Constructor.DEFAULTS object, and will have an impact on all modal dialog prompts.
50⟩ Please consider the HTML code snippet below. <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="My Title">Hover over me</button> What is missing for a tooltip to show properly?
Bootstrap’s Tooltip plugin is not CSS-only, like other plugins are. For performance reasons, the Tooltip plugin is opt-in, and to use it you must initialize it using JavaScript with the following example code:
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
51⟩ Tell me what is Modal plugin used for in Bootstrap?
A modal is a child window that is layered over its parent window. Using a custom Jquery Plugin, Bootstrap Modal are created. To enrich user experience and to add functionality to users, modal windows are created with the help of Modal plugin.
52⟩ Tell me what are the types of layout available in Bootstrap?
In Bootstrap there are two types of Layout available
☛ Fluid Layout: Fluid layout is used when you want to create a app that is 100% wide and use up all the width of the screen
☛ Fixed Layout: For a standard screen you will use fixed layout (940 px) option
53⟩ Explain me 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>
<div class = "row">...</div>
</div>
<div class = "container">....
54⟩ Tell me which class make a set of buttons appear vertically stacked rather than horizontally?
.btn-group-vertical class make a set of buttons appear vertically stacked rather than horizontally.
55⟩ Explain me how will you create a alternate progress bar using bootstrap?
To create a progress bar with different styles −
☛ Add a <div> with a class of .progress.
☛ Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.
☛ Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.
56⟩ What are different types of Media Object?
☛ .media
☛ .media-list
57⟩ Explain what are the advantages of Bootstrap?
There are many advantages of using Bootstrap:
☛ Bootstrap Css library takes care of our UI to make interactive mobile + desktop enabled websites, developers can even create a fully furnished jaw dropping website easily.
☛ The speed of development can be increased with the help of Bootstrap.
☛ With the increase in mobile first, website designers need to work a lot in order to make the UI adapt to all kinds of devices, whereas with the help of bootstrap this overhead has been reduced to quite an extent.
☛ Responsive Grid: As you go in depth with Bootstrap and read about Grid you will see that 12 columns are grids and are responsive and you can make them self-adjusting according to the device.
☛ There is a huge list of Components -- Dropdown menu, badges etc. A few have been discussed in this article.
☛ Easy to read documentation: I personally believe if you want to learn Bootstrap from scratch http://getbootstrap.com/ documentation is easy and great to start with. I personally appreciate their efforts we can go back to the site whenever we something is needed in our View.
☛ Themes: Bootstrap provides free colorful themes that can be used in our Web Application.
58⟩ Tell me what are different shapes for image in bootstrap?
By Default bootstrap provides 3 classes for image shape.
☛ Rounded image
☛ Circle shape image
☛ Thumbnail image
Example:
<img src=""; alt="rounded image" class="img-rounded">
<img src=""; alt="circle image" class="img-circle">
<img src=""; alt="thumbnail image" class="img-thumbnail">
59⟩ What are the components of Bootstrap?
Bootstrap provides dozens of components which are helpful to create modern and responsive web pages. Bootstrap components are itself responsive.
Major components provided by bootstrap are listed below:
☛ Glyphicons
☛ Navigation bar
☛ Breadcrumbs
☛ Pagination
☛ Badges
☛ Dropdown
☛ Thumbnails
☛ Alerts
☛ Progress bars
☛ List groups
☛ Panels
☛ Tabs
☛ Tooltip
☛ Carousel
☛ Model popup
60⟩ Explain me the Bootstrap basic table?
The following table elements are used with Bootstrap:
☛ <table> - It is used for wrapping element for displaying data in a tabular format
☛ <thead> - It is used for container element for table header rows (<tr>) to label table columns.
☛ <tbody> - It is used for container element for table rows (<tr>) in the body of the table.
☛ <tr> - It is used for container element for a set of table cells (<td> or <th>) that appears on a single row.
☛ <th> - Special table cell for column (or row) labels. It must be used within a <thread>
☛ <td> - It is used for default table cell.
☛ <caption> - It is used for description or summary of what the table holds.
Bootstrap Basic Table:
We can create a basic Bootstrap table with basic styling that has a small cell padding and only horizontal dividers by adding Bootstrap class ".table" to the <table> element.
