JOBSEEKER?

Bootstrap Interview Questions

Practice for Bootstrap interviews by solving TestDome questions. Our interview questions are used by more than 7,000 companies and 450,000 individual test takers.

Jobseekers: Certify Your Knowledge

Take a Certification Test

Companies: Use Our Tests for Screening

Buy a Pack Of Candidates

Need to practice your Bootstrap skills for an upcoming job interview? Try solving these Bootstrap interview questions that test knowledge of Bootstrap concepts such as modals, plugins, grid layout and other skills. We’ll provide feedback on your answers, and you can use a hint if you get stuck.

These Bootstrap interview questions are examples of real tasks used by employers to screen job candidates such as Bootstrap developers, front-end developers, UI/UX developers, and others that require knowledge of the Bootstrap framework in order to design user interfaces and make the code more robust and maintainable.

1. Modal Dialog

Modals Plugins
   
Easy  

The HTML page contains a button and modal dialog.

Using just Bootstrap's HTML attributes and no JavaScript, add attributes to the elements so that:

  1. When the Open button is clicked, the modal dialog is opened.
  2. When the Close button is clicked, the modal dialog is closed.
HTML5, CSS3, Bootstrap 4  
 


  •   Open button has correct attributes : Wrong answer
  •   Close button has correct attributes: Wrong answer
  •   Open button shows dialog: Wrong answer
  •   Close button hides dialog: Wrong answer


2. Tooltip

Plugins Tooltips
   
Easy  

Using only Bootstrap's style classes alter the anchor so that when mouse is hovered over it, the following tooltip is displayed:

A bootstrap hover-over effect.

HTML5, CSS3, Bootstrap 4  
 


  •   Tooltip visibility: Wrong answer
  •   Tooltip location: Wrong answer
  •   Tooltip contents: Wrong answer


3. Warning Button

Buttons Styling
   
Easy  

Using only Bootstrap classes, write the HTML markup to display a Button that looks like this.

The image icon URL is 'https://tinyurl.com/qqmbrex'.

HTML5, CSS3, Bootstrap 4  
 


  •   Button text: Wrong answer
  •   Button type and image: Wrong answer
  •   Button shape: Wrong answer
  •   Button color: Wrong answer


4. Test Links

Grid layout
   
Hard  

Using Bootstrap classes, modify the div element with the id "links" so that on extra small resolutions (<576px), each link and ad takes one whole row. It should look like this:

On small resolutions and higher (≥576px), both links should take one half of the row and the ads should be invisible. It should look like this:

HTML5, CSS3, Bootstrap 4  
 


  •   Each element takes the whole screen width on extra small screens: Wrong answer
  •   Links are in the same row on larger screens: Wrong answer
  •   Each link takes half the screen width on larger screens: Wrong answer
  •   Ads are invisible on larger screens: Wrong answer


If you feel ready, take one of our timed public Bootstrap Interview Questions tests:
HTML/CSS

HTML/CSS and Bootstrap Online Test (Easy / Hard)

HTML/CSS, JavaScript with jQuery, and Bootstrap Online Test (Easy / Hard)

HTML/CSS, JavaScript, and Bootstrap Online Test (Easy / Hard)

Not exactly what you are looking for? Go to our For Jobseekers section.
Dashboard Start Trial Sign In Home Tour Tests Questions Pricing For Jobseekers