Bootstrap Questions And Answers

21⟩ Tell me how will you create a animated progress bar using bootstrap?

To create an animated progress bar −

☛ Add a <div> with a class of .progress and .progress-striped. Also add class .active to .progress-striped.

☛ Next, inside the above <div>, add an empty <div> with a class of .progress-bar.

☛ Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

Is this answer helpful? 0 Yes | 0 No

Answer This Question

184 views

22⟩ Explain me how will you create a Bootstrap Dismissal Alert?

To build a dismissal alert −

☛ Add a basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).

☛ Also add optional .alert-dismissable to the above <div> class.

☛ Add a close button.

☛ Use the <button> element with the data-dismiss = "alert" data attribute.

Is this answer helpful? 0 Yes | 0 No

Answer This Question

149 views

23⟩ Do you know what are input groups?

Input groups are extended Form Controls. Using input groups you can easily prepend and append text or buttons to the text-based inputs.

By adding prepended and appended content to an input field, you can add common elements to the user's input. For example, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be common for your application interface.

To prepend or append elements to a .form-control −

☛ Wrap it in a <div> with class .input-group

☛ As a next step, within that same <div> , place your extra content inside a <span> with class .input-group-addon.

☛ Now place this <span> either before or after the <input> element.

Is this answer helpful? 0 Yes | 0 No

Answer This Question

149 views

24⟩ Explain me how do you use the Dropdown plugin?

You can toggle the dropdown plugin's hidden content −

☛ Via data attributes − Add data-toggle = "dropdown" to a link or button to toggle a dropdown as shown below −

<a data-toggle = "dropdown" href = "#">Dropdown trigger</a>

...

</ul>

</div>

☛ If you need to keep links intact (which is useful if the browser is not enabling JavaScript), use the data-target attribute instead of href="#" −

Dropdown

</a>

...

</ul>

</div>

☛ Via JavaScript − To call the dropdown toggle via JavaScript, use the following method −

$('.dropdown-toggle').dropdown()

Is this answer helpful? 0 Yes | 0 No

Answer This Question

147 views

25⟩ Explain me how many different media queries are used by the Bootstrap grid system by default?

The Bootstrap grid system provides four tiers of classes: xs for phones (<768px), sm for tablets (≥768px), md for desktops (≥992px), and lg for large desktops (≥1200px). The hidden trick in this question is that there are only three media queries. Bootstrap is mobile first by design, so the default styles are for small devices, and media queries are then added on for larger screens, as follow in LESS code:

/* Extra small devices (phones, less than 768px) */

/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }

Is this answer helpful? 0 Yes | 0 No

Answer This Question

149 views

26⟩ Tell me what will be the output of the following HTML code <ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> <ul> <li>Nested item 2.1</li> <li>Nested item 2.2</li> <li>Nested item 2.3</li> </ul> <li>Item 3</li> </ul>

If we apply .list-unstyled to a list, it will remove the default list-style and left margin on the list items. But only for the immediate children. Main list items will be without any style, and nested list items will still have default unordered nested list-style.

Is this answer helpful? 0 Yes | 0 No

Answer This Question

178 views

27⟩ Do you know 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

☛ .carousel (options)

☛ .carousel (‘cycle’)

☛ .carousel (‘pause’)

☛ .carousel (‘number’)

☛ .carousel (‘prev’)

☛ .carousel (‘next’)

Is this answer helpful? 0 Yes | 0 No

Answer This Question

150 views

28⟩ Explain me what is the difference between Bootstrap and Foundation?

Bootstrap:

☛ Bootstrap offers unlimited number of UI elements

☛ Bootstraps uses pixels

☛ Bootstrap encourages to design for both desktop and mobile.

☛ Bootstrap support LESS as its preprocessor

Foundation:

☛ In Foundation UI element options are very limited in numbers

☛ Foundation use REMs

☛ Foundation encourages to design mobile first

☛ Foundation support Sass and Compass as its preprocessor

Is this answer helpful? 0 Yes | 0 No

Answer This Question

148 views

29⟩ Tell me what media object in Bootstrap is and what are their types?

Media objects in Bootstrap enables 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 specified in using the class .media-object. Media-objects are of two types,

They are of two types

☛ .media

☛ .media-list

Is this answer helpful? 0 Yes | 0 No

Answer This Question

142 views

30⟩ Do you know why to choose Bootstrap for building the websites?

There are few reason why we choose Bootstrap for building websites

☛ Mobile Support: For mobile devices it provides full support in one single file rather than in separate file. It supports the responsive design including adjusting the CSS based on the different types of device, size of the screen etc. It reduces extra effort for developers.

☛ Easy to learn: Writing application in bootstrap is easy if you know CSS and HTML

☛ Browser Support: It supports all the popular browsers like Firefox, Opera, Safari, IE etc.

Is this answer helpful? 0 Yes | 0 No

Answer This Question

128 views

31⟩ Do you know 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

☛

 tag: If you want to display the code as a standalone block element or it has multiple lines then you should use  tag

Is this answer helpful? 0 Yes | 0 No

Answer This Question

119 views

32⟩ Tell me what will be the default Bootstrap look of the alert created with this following code <div class="alert" role="alert">Warning! Tell me what I'm missing something.</div>

Alert messages are used to provide feedback message that usually require the attention of the user. Here it is important to note that Bootstrap Alerts don’t have default class. If a contextual class such as .alert-success, .alert-info, .alert-warning, or .alert-danger, is not provided, a default gray alert will be created.

Is this answer helpful? 0 Yes | 0 No

Answer This Question

137 views

33⟩ Explain me 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>.

☛ You can make terms and descriptions in <dl> line up side-by-side using class dl-horizontal.

Is this answer helpful? 0 Yes | 0 No

Answer This Question

153 views

34⟩ Do you know what are bootstrap alerts?

Bootstrap Alerts provide a way to style messages to the user. They provide contextual feedback messages for typical user actions.

You can add an optional close icon to alert.

Is this answer helpful? 0 Yes | 0 No

Answer This Question

142 views

35⟩ Please consider the following HTML code snippet <div class="row"> <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div> <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div> <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div> <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div> </div> Tell me what will be the output of the following HTML code on mobile and on desktop view?

.col-xs-* class defines the number of grids for extra small devices, and .col-md-* defines the number of grids for desktop devices and above. This example will render on the desktop with four columns, and on mobile the columns will have full width and will be stacked on each other.

Is this answer helpful? 0 Yes | 0 No

Answer This Question

181 views

36⟩ What is Lead Body Copy in Bootstrap?

To add some emphasis to a paragraph, add class = "lead". This will give you larger font size, lighter weight, and a taller line height

Is this answer helpful? 0 Yes | 0 No

Answer This Question

149 views

37⟩ Tell me which class is used for basic pagination?

.pagination class is uesed to add the pagination on a page.

Is this answer helpful? 0 Yes | 0 No

Answer This Question

164 views

38⟩ Tell me how will you create a bootstrap alert?

You can add a basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).

Is this answer helpful? 0 Yes | 0 No

Answer This Question

142 views

39⟩ Explain what is the purpose of .media-list class in bootstrap?

If you are preparing a list where the items will be part of an unordered list, use a class. useful for comment threads or articles lists.

Is this answer helpful? 0 Yes | 0 No

Answer This Question

143 views

40⟩ How to classified pagination in bootstrap?

Add class "pagination" on your page for pagination.

.disabled, .active are available

.pagination-Ig, .pagination-sm to get different sizes

Is this answer helpful? 0 Yes | 0 No

Answer This Question

149 views

Bootstrap

Home Web Development Bootstrap

128 Bootstrap Questions And Answers

21⟩ Tell me how will you create a animated progress bar using bootstrap?

22⟩ Explain me how will you create a Bootstrap Dismissal Alert?

23⟩ Do you know what are input groups?

24⟩ Explain me how do you use the Dropdown plugin?

25⟩ Explain me how many different media queries are used by the Bootstrap grid system by default?

26⟩ Tell me what will be the output of the following HTML code <ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> <ul> <li>Nested item 2.1</li> <li>Nested item 2.2</li> <li>Nested item 2.3</li> </ul> <li>Item 3</li> </ul>

27⟩ Do you know what is the use of Bootstrap Carousel plugin?

28⟩ Explain me what is the difference between Bootstrap and Foundation?

29⟩ Tell me what media object in Bootstrap is and what are their types?

30⟩ Do you know why to choose Bootstrap for building the websites?

31⟩ Do you know in Bootstrap what are the two ways you can display the code?

32⟩ Tell me what will be the default Bootstrap look of the alert created with this following code <div class="alert" role="alert">Warning! Tell me what I'm missing something.</div>

33⟩ Explain me types of lists supported by Bootstrap?

34⟩ Do you know what are bootstrap alerts?

36⟩ What is Lead Body Copy in Bootstrap?

37⟩ Tell me which class is used for basic pagination?

38⟩ Tell me how will you create a bootstrap alert?

39⟩ Explain what is the purpose of .media-list class in bootstrap?

40⟩ How to classified pagination in bootstrap?

Quick Links:

Bootstrap

Home Web Development Bootstrap

128 Bootstrap Questions And Answers

21⟩ Tell me how will you create a animated progress bar using bootstrap?

22⟩ Explain me how will you create a Bootstrap Dismissal Alert?

23⟩ Do you know what are input groups?

24⟩ Explain me how do you use the Dropdown plugin?

25⟩ Explain me how many different media queries are used by the Bootstrap grid system by default?

26⟩ Tell me what will be the output of the following HTML code <ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> <ul> <li>Nested item 2.1</li> <li>Nested item 2.2</li> <li>Nested item 2.3</li> </ul> <li>Item 3</li> </ul>

27⟩ Do you know what is the use of Bootstrap Carousel plugin?

28⟩ Explain me what is the difference between Bootstrap and Foundation?

29⟩ Tell me what media object in Bootstrap is and what are their types?

30⟩ Do you know why to choose Bootstrap for building the websites?

31⟩ Do you know in Bootstrap what are the two ways you can display the code?

32⟩ Tell me what will be the default Bootstrap look of the alert created with this following code <div class="alert" role="alert">Warning! Tell me what I'm missing something.</div>

33⟩ Explain me types of lists supported by Bootstrap?

34⟩ Do you know what are bootstrap alerts?

36⟩ What is Lead Body Copy in Bootstrap?

37⟩ Tell me which class is used for basic pagination?

38⟩ Tell me how will you create a bootstrap alert?

39⟩ Explain what is the purpose of .media-list class in bootstrap?

40⟩ How to classified pagination in bootstrap?

BE THE FIRST TO KNOW

Quick Links: