1. What is Bootstrap?

Answer: Bootstrap is an open-source front-end framework developed by

Twitter, used for building responsive, mobile-first websites. It includes pre-
designed components, JavaScript plugins, and a responsive grid system to
ensure consistency and speed in web development.

2. What are the core components of Bootstrap?

Answer: The core components of Bootstrap include:
 Grid system: To structure layouts.
 CSS components: Buttons, forms, tables, modals, etc.
 JavaScript plugins: Modal, Tooltip, Carousel, etc.
 Utilities: Helpers for margins, paddings, typography, etc.

3. What is the difference between .container and .container-fluid?

Answer:
 .container: A fixed-width container that adjusts based on the viewport
size.
 .container-fluid: A full-width container that spans the entire width of the
viewport, regardless of screen size.

4. Explain the Bootstrap grid system.

Answer: Bootstrap uses a 12-column grid system, which allows content to be
divided into 12 equal parts. The grid system is responsive, and its layout can
change based on screen size. Columns are defined using classes like .col-*, .col-
md-*, .col-lg-*, etc.

5. What is the use of the .row class in Bootstrap?

Answer: The .row class is used to create a horizontal group of columns in the
grid system. It helps ensure that columns align properly and that the content is
responsive.

6. What is a "container" in Bootstrap?

Answer: A container is a wrapper for grid-based layout that ensures proper
alignment of the grid and its elements. It can be fixed-width (.container) or full-
width (.container-fluid).

7. What are Bootstrap breakpoints?

Answer: Bootstrap breakpoints are predefined screen widths where the layout
of the grid changes based on the screen size. The default breakpoints are:
 xs (Extra small): <576px
 sm (Small): ≥576px
 md (Medium): ≥768px
 lg (Large): ≥992px
 xl (Extra Large): ≥1200px

8. What are Bootstrap’s utility classes?

Answer: Bootstrap’s utility classes provide quick ways to apply CSS styles like
margin, padding, text alignment, visibility, colors, and more. Examples
include .m-3 for margin, .text-center for text alignment, etc.

9. What is the role of data-toggle="collapse"?

Answer: data-toggle="collapse" is an attribute used to toggle the visibility of an
element, such as in collapsible navigation bars or accordions.

10. What is the purpose of .navbar in Bootstrap?

Answer: The .navbar class is used to create a responsive navigation bar,
providing an easy way to organize and display navigation links in a web
application.

11. What is a carousel in Bootstrap?

Answer: A carousel is a component that allows users to display multiple
content items (images, slides, etc.) in a sliding format, either automatically or
by user interaction.

12. How do you create a dropdown in Bootstrap?

Answer: A dropdown can be created using the .dropdown class, and the
dropdown items are wrapped with .dropdown-menu and .dropdown-item. The
dropdown is typically triggered using the data-toggle="dropdown" attribute.

13. What are glyphicons in Bootstrap?

Answer: Glyphicons are a set of icon fonts included in Bootstrap for adding
visual icons to your web project. They can be applied using the .glyphicon class.

14. What are btn-primary, btn-secondary, etc., in Bootstrap?

Answer: These classes define button styles.
 .btn-primary is used for the primary action button (e.g., submit).
 .btn-secondary represents a secondary action button, used for less
important actions.

15. What is the purpose of .jumbotron class?

Answer: The .jumbotron class is used to create a large, highlighted area to
showcase key content, often with a background color and large text, typically
used for headers or promotional content.

16. How do you make a Bootstrap form responsive?

Answer: To make a form responsive, Bootstrap's grid system and predefined
classes like .form-group, .form-control, and .col-* can be used to structure the
form and adjust the layout based on screen size.

17. What is a Bootstrap modal?

Answer: A modal is a dialog box or popup window that appears on top of the
main content. It is typically used to display additional content or require user
interaction.

18. What is the use of .alert class in Bootstrap?

Answer: The .alert class is used to create a styled message box that is typically
used to display feedback messages, such as success, error, or warning
messages.

19. What are Bootstrap’s responsive utilities?

Answer: Responsive utilities are classes that allow you to show, hide, or modify
elements based on screen size. Examples include .hidden-xs, .visible-md, etc.

20. What is a Bootstrap grid column offset?

Answer: A column offset is used to create space between columns. It is defined
using .col-md-offset-* classes, where * specifies the number of columns to
offset.

21. What is the difference between .visible-* and .hidden-*?

Answer:
 .visible-* makes an element visible on specific screen sizes.
 .hidden-* hides an element on specific screen sizes.

22. What is a .btn-group in Bootstrap?

Answer: The .btn-group class is used to group multiple buttons together,
creating a set of buttons that act as a single unit, often with a shared border.

23. What is the difference between col- and col-md- classes?

Answer:
 col-: A general class that spans 12 columns for small to extra-large
screens.
 col-md-: Specifies the number of columns to span on medium-sized
screens (≥768px).

24. What is the role of the .img-fluid class?

Answer: The .img-fluid class ensures that images are responsive, meaning they
scale according to the size of their parent container, preventing overflow or
distortion.

25. What is the purpose of the .card class in Bootstrap?

Answer: The .card class is used to create flexible and customizable content
containers, often used for displaying items such as product details, news
articles, or other media.

26. What are the different types of Bootstrap buttons?

Answer: Bootstrap provides several button classes:
 .btn-primary: The main button, used for primary actions.
 .btn-secondary: A less emphasized button.
 .btn-success: Used for success actions (e.g., saving).
 .btn-danger: Used for critical actions (e.g., delete).

27. What are Bootstrap typography utilities?

Answer: Typography utilities in Bootstrap allow you to adjust the text styling
with predefined classes, such as .text-center, .text-left, .text-right, .font-weight-
bold, .text-muted, etc.

28. How can you create a sticky footer in Bootstrap?

Answer: A sticky footer can be created by using the position: absolute; style
and setting the footer to remain at the bottom of the viewport, even if the
content is shorter than the screen.

29. What is the difference between carousel and carousel-item in Bootstrap?

Answer:
 .carousel: The main container element for the carousel component.
 .carousel-item: Each individual slide inside the carousel.

30. How can you customize Bootstrap’s default styles?

Answer: You can customize Bootstrap’s default styles by:
 Overriding Bootstrap’s CSS using your custom styles.
 Using Bootstrap's SASS variables to modify the design and color scheme.
 Including external themes or CSS files.

31. What is the role of .float-* in Bootstrap?

Answer: The .float-* class is used to float elements to the left, right, or none.
The options include .float-left, .float-right, and .float-none.

32. How does Bootstrap handle image responsiveness?

Answer: Bootstrap’s .img-fluid class automatically makes images responsive by
setting their width to 100% of the parent container, making sure the image
scales well across different screen sizes.
33. What is the .badge class in Bootstrap?
Answer: The .badge class is used to create small, rounded labels that often
display counts or statuses, such as notification numbers.

34. What are Bootstrap Spinners?

Answer: Spinners are loading indicators used to show the user that the content
is being loaded. Bootstrap provides predefined spinners like .spinner-border
and .spinner-grow.

35. What is the difference between .nav and .navbar?

Answer:
 .nav: A simple, horizontal navigation list.
 .navbar: A more advanced and responsive navigation bar that includes
elements like a brand logo, toggles, and dropdowns.

36. What is the .form-inline class in Bootstrap?

Answer: The .form-inline class is used to align form elements horizontally,
rather than stacking them vertically, making forms more compact.

37. How do you add icons to buttons in Bootstrap?

Answer: You can add icons to buttons by using icon libraries like Font
Awesome or Glyphicons and embedding the icon within the button HTML
code, e.g., <button class="btn btn-primary"><i class="glyphicon glyphicon-
star"></i> Click Me</button>.

38. What is the .container-sm class in Bootstrap?

Answer: The .container-sm class is a fixed-width container that starts at a
minimum of 576px wide and automatically adjusts for larger screen sizes.

39. What is the purpose of .text-nowrap class?

Answer: The .text-nowrap class prevents text from wrapping to a new line,
forcing it to stay on a single line even if it overflows the container.

40. How do you create a vertical navbar in Bootstrap?

Answer: A vertical navbar is created by using the .nav class along with .nav-pills
or .nav-tabs and wrapping them in a <div> with the class .d-flex and .flex-
column to stack the items vertically.

41. What is a "modal" in Bootstrap?

Answer: A modal is a dialog box or pop-up window that is displayed on top of
the main content. It’s commonly used for user interaction or showing
additional information.

42. What is the .sticky-top class?

Answer: The .sticky-top class is used to make an element stick to the top of the
viewport when scrolling, allowing it to stay visible even when the user scrolls
down.

43. How do you create a tooltip in Bootstrap?

Answer: A tooltip can be created using the data-toggle="tooltip" attribute and
initializing the tooltip via JavaScript.

44. What is the .input-group class in Bootstrap?

Answer: The .input-group class is used to add multiple elements within an
input field, such as a button, icon, or text, by grouping them together.

45. What is the .dropdown-menu-right class used for?

Answer: The .dropdown-menu-right class aligns the dropdown menu to the
right of the parent element, useful for right-aligned dropdowns in navigation
bars.
46. What are the default Bootstrap colors?
Answer: The default Bootstrap colors include:
 Primary: #007bff
 Secondary: #6c757d
 Success: #28a745
 Danger: #dc3545
 Warning: #ffc107
 Info: #17a2b8
 Light: #f8f9fa
 Dark: #343a40

47. How do you align text vertically in Bootstrap?

Answer: To align text vertically, use the .d-flex class along with .align-items-
center to center the content vertically in its parent container.

48. What are Bootstrap's CSS variables?

Answer: CSS variables in Bootstrap allow you to easily customize values such as
colors, fonts, spacing, and more, by changing the values in the root CSS file.

49. What is d-none class in Bootstrap?

Answer: The d-none class is used to hide elements on all screen sizes. It's part
of Bootstrap's responsive display utilities.

50. What is the .form-control class in Bootstrap?

Answer: The .form-control class is used to style form elements like text inputs,
text areas, and select boxes to make them consistent across different browsers
and devices.