Bootstrap provides several classes for common interface elements like images, dropdowns, buttons, and navigation. These include classes for responsive images, rounded corners, image thumbnails, and disabling floating. Bootstrap also supports interactive dropdowns without JavaScript using specific wrapper and button classes. Button groups can be created horizontally or vertically in different sizes. Input groups combine form controls and text on the same line. Content can be collapsed using a wrapping div class linked to a toggle element. Navigation bars and lists are built with nav and list item classes that can be further customized.

2. • Images
• Dropdowns
• Button groups
• Input groups
• Collapse
• Navs
• Navbars

3. • Bootstrap provides classes that can be used when working
with the <img> tag, such as:
• class = “ ” for responsive images

4. • Rounding the corners of images:

5. • Rounding only corners of a specific side:
• Image thumbnails ( ):

6. • Aligning images left:
/ / / /
• Aligning images right:
/ / / /
• Disable floating:
/ /

7. • Images
• Dropdowns
• Button groups
• Input groups
• Collapse
• Navs
• Navbars

8. • Bootstrap4 provides the classes that can create an interactive
dropdown without the need for JavaScript.
• Class “ ” is used for the wrapper div.
• Class “ ” and data-toggle=“dropdown” are used
for the main button.
• “ ” is used for the wrapper div of all the items in
the list.
• And “ ” is used for each item in the list.

9. • Same as the dropdown menu, except for using the class
“ ” instead of “ ” for the wrapper div.

10. • For further customization:
– Use the class “ ” to add a header to a group of the
items in the list.
– Use the class “ ” with an empty div to create a line
separating between two groups of list items.
Non-link
header divider

11. • Images
• Dropdowns
• Button groups
• Input groups
• Collapse
• Navs
• Navbars

12. • The class “ ” can be used to group several
buttons together whether horizontally or vertically
(“ ”)

13. • add the class “ ” or “ ” to change
the size of the button group.
• Omitting these classes will result in a button group at
the default size.

14. • Images
• Dropdowns
• Button groups
• Input groups
• Collapse
• Navs
• Navbars

15. • Input groups (class = “ ”) enable the combination of
form controls and text on the same line.
“
” wraps
an element in a
decorative grey
area.

17. • Images
• Dropdowns
• Button groups
• Input groups
• Collapse
• Navs
• Navbars

18. • Content can be collapsed by giving its
wrapping div the class “ ” and
referencing its id to a link or a button that has
the attribute: data-toggle = “collapse”

19. • Images
• Dropdowns
• Button groups
• Input groups
• Collapse
• Navs
• Navbars

20. • Use the class “ ” with a <ul> or a <nav>
element to create a base navigation bar that
can be further customized.
Use “ ” with <li> used in a navigation
bar, and “ ” with anchor tags.
“ ”

21. • “ ”:
• “ ”:
Notice the effect is only
applied to the link with
the “ ” class

22. • Images
• Dropdowns
• Button groups
• Input groups
• Collapse
• Navs
• Navbars

23. • Is a simple wrapper for positioning branding (logo),
navigation, and other elements into a navigation
header.

24. • Using the class “ ” or “ ” fixes the
navigation bar to its location (All content will scroll
behind it):

25. Questions?