All Bootstrap Interview Questions

What is Bootstrap?

Bootstrap is a popular free and open source front end framework. It gives ready made CSS classes and JavaScript plugins for a responsive grid, buttons, forms, cards, navbars, modals and more, so you can build good looking mobile first websites fast, without writing all the CSS yourself. The current stable version is Bootstrap 5.3. See Bootstrap Introduction.

What are the advantages of Bootstrap?

• Responsive and mobile first: the same code works on phones, tablets and desktops.
• Fast development: many ready components, you only add classes.
• Consistent design and the same look in all modern browsers.
• Easy to learn and a big community with many examples.
• Customizable with CSS variables and Sass.

The disadvantages: many sites look the same if you do not customize it, and the CSS file has many classes which you may not use. See Bootstrap Introduction.

Who developed Bootstrap and when?

Bootstrap was started inside Twitter by Mark Otto and Jacob Thornton, to have one consistent set of tools for the internal projects. It was released as an open source project in 2011, and it is now maintained by a community of developers. Bootstrap 5 was released in 2021, and Bootstrap 5.3 is the current stable line.

What is the Bootstrap grid system?

The grid divides the width of a row into 12 columns. You put columns (.col-*) inside a row (.row), and the row inside a container. The numbers of one line should add up to 12. With breakpoints (col-md-6) the layout changes on different screen sizes.

<div class="container text-center">
  <div class="row">
    <div class="col-12 col-md-8 border bg-light py-2">col-md-8</div>
    <div class="col-12 col-md-4 border bg-light py-2">col-md-4</div>
  </div>
</div>

See Grid System.

How do you add Bootstrap to a web page?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

The CSS goes in the head, and the JS bundle (which includes Popper) before the closing body tag. You can also use npm (npm install bootstrap) or download the files. Do not forget the viewport meta tag. See Setup and Installation.

What are the breakpoints in Bootstrap 5?

The xxl breakpoint is new in Bootstrap 5. Classes without a prefix work on all sizes, and the ones with a prefix work from that width and up. See Grid System.

What is the difference between container and container-fluid?

There are also responsive containers like .container-md, which are 100% wide below the breakpoint. See Containers.

What are row and col classes in Bootstrap?

.row creates a horizontal group of columns (a flex container with negative margins and gutters). .col creates equal width columns, .col-6 takes 6 of 12 columns, and .col-md-4 takes 4 of 12 from the md breakpoint. Always put columns inside a row, and the row inside a container. See Grid System.

How do you make an image responsive in Bootstrap?

<img src="images/photo.jpg" class="img-fluid" alt="Responsive image">

.img-fluid sets max-width: 100%; height: auto;. Other useful classes are .img-thumbnail, .rounded and .rounded-circle. See Images.

How do you create buttons in Bootstrap?

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-danger btn-sm">Small outline</button>
<a href="#" class="btn btn-success btn-lg" role="button">Large link button</a>

See Buttons.

How do you make a full width button in Bootstrap 5?

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Full width with d-grid</button>
</div>
<button class="btn btn-secondary w-100 mt-2" type="button">Full width with w-100</button>

See Buttons.

What are Bootstrap alerts and how do you close them?

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> Check the fields.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

See Alerts.

What is a card in Bootstrap?

<div class="card" style="max-width: 18rem">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Card text goes here.</p>
    <a href="#" class="btn btn-primary btn-sm">Button</a>
  </div>
</div>

See Cards.

How do you create a responsive navbar in Bootstrap?

The classes needed: .navbar and .navbar-expand-lg (the menu opens in a row from 992px), .navbar-brand, .navbar-toggler (the hamburger button, with data-bs-toggle="collapse" and data-bs-target), and .collapse.navbar-collapse with the .navbar-nav list. Full example: Bootstrap Navbar.

How do you make a table responsive in Bootstrap?

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

The class .table-responsive-md (and sm, lg, xl, xxl) makes the table scroll only below that breakpoint. See Tables.

How do you open a modal in Bootstrap?

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Open</button>

const modal = new bootstrap.Modal(document.getElementById('myModal'));
modal.show();

See Modal.

What is the viewport meta tag and why is it needed for Bootstrap?

<meta name="viewport" content="width=device-width, initial-scale=1">

Without it, mobile browsers pretend to have a wide screen (about 980px) and shrink the page, and the Bootstrap breakpoints do not work as expected. See Bootstrap Get Started.

What is the mobile first approach in Bootstrap?

Classes without a breakpoint (like col-12) apply to all screen sizes, starting from the smallest. Classes with a breakpoint (like col-md-6) apply from that width and up. So you write the mobile layout first, and then add the rules for tablets and desktops. See Grid System.

How do you center content in Bootstrap?

<div class="d-flex justify-content-center align-items-center bg-body-tertiary border" style="height: 140px">
  <div class="p-3 bg-primary text-white rounded">Centered both ways</div>
</div>

• Horizontal text: .text-center.
• A block with a width: .mx-auto.
• Both directions: .d-flex .justify-content-center .align-items-center on the parent with a height.

See Flex Utilities.

What are the spacing classes (margin and padding) in Bootstrap?

The format is {m|p}{t|b|s|e|x|y}-{0-5|auto}. Examples: mt-3 (margin top), px-4 (padding left and right), mx-auto (center a block), p-md-5 (padding 5 from the md breakpoint). Size 1 is 0.25rem and size 5 is 3rem. See Spacing.