TQL

logo

Welcome To Ask Me

1. Explain what is Bootstrap?

Bootstrap is a HTML, CSS, and JS framework for building the rich web applications with minimal effort. This framework emphasis more on building mobile web applications

2. Explain 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.

3. 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

4. What is a Bootstrap Container, and how does it work?

A bootstrap container is a handy class that generates a central region on the page where we can put our site content. The bootstrap .container has the advantage of being responsive and containing all of our other HTML code. Containers are used to pad the content within them, and there are two types of containers:

  • The .container class creates a fixed-width container that is responsive.
  • The .container-fluid class creates a full-width container that spans the entire viewport width.

5. What is Contextual classes of table in Bootstrap?

ClassDescription

.active

Applies the hover color to a particular row or cell

.success

Indicates a successful or positive action

.warning

Identifies a warning that might need attention

.danger

Indicates a dangerous or potentially negative action

6. Explain what is Bootstrap Grid System?

For creating page layout through a series of rows and columns that house your content Bootstrap Grid Sytem is used.

7. Give an example of a basic grid structure in Bootstrap.

Example of a basic grid structure:

1
2
3
4
5
6
7
8
9
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
 
<div class = "row">...</div>
</div>
<div class = "container">....

8. Why do we use Jumbotron in Bootstrap?

Jumbotron is used for highlighting content in bootstrap. It could either be a slogan or probably a headline. It increases the heading size and gives a margin for the content of the landing page. To implement Jumbotron in a Bootstrap, you have to use:

Create a container <div> with the class of .jumbotron
For example, use <div class=”container”>

9. What is a progress bar in bootstrap?

Progress bar is used with HTML tag style in HTML element using <progress> keyword. In bootstrap we use html5 <progress> with CSS classes that have special features in bootstrap, that is only made for the progress bar.

10. How do you make images responsive?

Bootstrap 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.

11. What is the difference between Bootstrap 4 and Bootstrap 5

PARAMETERBOOTSTRAP 4BOOTSTRAP 5
Grid System5 tier grid system(xs, sm, md, lg, xl).6 tier grid system(xs, sm, md, lg, xl, xxl).
ColorIt has limited colors.Extra colors have been added with the looks.
JqueryIt has jQuery along with all the related plugins.Jquery is removed and it has switched to vanilla JS with some working plugins.
Internet ExplorerBootstrap 4 supports both IE 10 and 11.Bootstrap 5 doesn’t support IE 10 and 11.
Form elementsRadio buttons and checkboxes look different in different OS and browsers.The look of form elements does not change on different OS or browsers.
Utilities APIUtilities cannot be modified in Bootstrap 4.Bootstrap 5 allows us to modify and also create our own utility.
Vertical ClassesRelative positioning of columns is allowed.Relative positioning of columns is not allowed.
Bootstrap IconsBootstrap 4 doesn’t have its own SVG icons. Bootstrap 5 has its own SVG icons.
JumbotronBootstrap 4 supports the jumbotron.Bootstrap 5 doesn’t support the jumbotron.
Card deckThe card deck class, used to create a set of cards with equal width and height, is available in bootstrap 4.Card deck class has been removed in bootstrap 5.
NavbarWe have the inline-block attribute, and the default for the dropdown-menu-dark class is a white dropdown.The inline-block property has been removed, and the dropdown-menu-dark class now uses a black dropdown as the default.
Static Site GeneratorJekyll software is used by Bootstrap 4.Hugo software is used by Bootstrap 5.

12. What is a Button Group, and what is the class for a basic Button Group?

Multiple buttons can be placed together on a single line using button groups. You can use this to group objects together, such as alignment buttons.

The .btn-group class is used for basic button groups. You can use the class .btn to wrap a set of buttons in .btn-group.

13. What is a breadcrumb in Bootstrap?

Breadcrumbs are a wonderful way to display a site’s hierarchy-based information. Breadcrumbs can show the dates of publication, categories, and tags in the case of blogs. They show where the current page is in the navigational hierarchy.

In Bootstrap, a breadcrumb is essentially an unordered list with the class .breadcrumb. CSS adds the separator for you automatically

14. How can one create an alert in Bootstrap?

Create a wrapper <div> and add a class of .alert and one of the contextual classes to create a basic alert (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark).

15. What is a bootstrap card and how would you create one?

In Bootstrap 4, a card is a bordered box with padding surrounding its content. It has options for headers, footers, content, and colors, among other things.

<div class="card">
 <div class="card-header">Header</div>
 <div class="card-body">Body</div>
 <div class="card-footer">Footer</div>
</div>

Another example:

<div class="card" style="width:400px">
 <img class="card-img-top" src="img_avatar.png" alt="Card image">
 <div class="card-body">
   <h4 class="card-title">Richard Taylor</h4>
   <p class="card-text">Some example text.</p>
   <a href="#" class="btn btn-primary">See Profile</a>
 </div>
</div>

16. What are the two types of spinners that you can create using Bootstrap?

Use the .spinner-border class to make a spinner/loader.

<div class= "spinner-border" ></div>

If you want the spinner/loader to grow instead of “spin”, use the .spinner-grow class.

<div class= "spinner-grow" ></div>

17. Explain input groups in Bootstrap.

The .input-group class is a container for enhancing an input by adding a “help text” icon, text, or button in front or behind the input field.

To add the help text in front of the input, use .input-group-prepend, and to add it behind the input, use .input-group-append.

Finally, style the provided help text with the .input-group-text class.

18. Discuss Bootstrap table and various classes that can change the appearance of the table.

  • A basic Bootstrap 4 table features horizontal divisions and light padding.
  • The .table class gives a table some basic styling.
  • The .table-striped class gives zebra stripes to the table.
  • The .table-bordered class adds borders to the table and cells on all sides.
  • On table rows, the .table-hover class adds a hover effect (grey background color).

Here is how the zebra-striped table looks like:

19. Explain 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

20. Explain how you can create Nav elements in Bootstrap?

Bootstrap offers various options for styling navigation elements all of them use the same markup and base class .nav.

To create Tabular Navigation or Tabs

  • Start with a basic unordered list with the base class of .nav
  • Then add class .nav-tabs

21. Bootstrap Vs foundation?

When the context is about Bootstrap vs. Foundation, Bootstrap has an upper hand. Foundation emphasizes mainly on providing developers with responsive frameworks. But, Bootstrap is exclusive for framework designing. The updates and features you would find with Foundation are somewhat out of context at times. This gives Bootstrap a clear edge in the competition between the two.  

22. What do you know about the Bootstrap Grid System?

The Bootstrap Grid System is a mobile-first, responsive grid system that scales up to 12 columns as the device or viewport size grows. Predefined classes for quick layout options and powerful mix-ins for creating successful semantic layouts are included in the system.

There are five classes in the Bootstrap 4 grid system:

  • .col- for extra small devices, whose screen width is less than 576px.
  • .col-sm- small devices, whose screen width is equal to or greater than 576px.
  • .col-md- medium devices, whose screen width is equal to or greater than 768px.
  • .col-lg- large devices, whose screen width is equal to or greater than 992px.
  • .col-xl- extra large devices, whose screen width is equal to or greater than 1200px.

23. In Bootstrap, what are the two codes for displaying code?

In Bootstrap, there are two straightforward ways to display code:

  • The <code> element is used to showcase a piece of inline code.
  • You can use the <pre> tag to display a code that has multiple lines or even a block element

24. What is bootstrap pagination and how are they classified?

<ul class="pagination">
   <li class="page-item"><a class="page-link" href="#">Previous</a></li>
   <li class="page-item"><a class="page-link" href="#">1</a></li>
   <li class="page-item"><a class="page-link" href="#">2</a></li>
   <li class="page-item"><a class="page-link" href="#">3</a></li>
   <li class="page-item"><a class="page-link" href="#">4</a></li>
   <li class="page-item"><a class="page-link" href="#">Next</a></li>
 </ul>

Pagination is how Bootstrap handles an unordered list. The following classes are provided by bootstrap to manage pagination:

.pagination: This class is required to enable pagination on your page.

.disabled, .active: Use .disabled for unclickable links and .active to indicate the current page when customising links.

.pagination-Ig and .pagination-sm: use these to get different size items.

25. What do you understand by column ordering in Bootstrap?

One of the most intriguing properties of bootstrap is column ordering. The columns can be readily written in a specific order by utilizing relevant functions. You might alternatively put them in a different column. Use the push and pull column classes to easily rearrange or rearrange the order of the columns. These classes are used in conjunction with the .col-xs-#, .col-sm-#, .col-md-#, and .col-lg-# Bootstrap grid classes.

.col-xs-push-# and .col-xs-pull-# are the push and pull classes for the Bootstrap grid. This also works well for sm, md, and lg. The pull class moves columns to the left, whereas the push class moves them to the right.

Interview Questions