Bootstrap: Glossary Week 2

A Bootstrap Breadcrumb component can be used to indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. There is no HTML element for <breadcrumb>, and the Bootstrap Breadcrumb component classes are intended to be used with <nav>, <ol>, and <li> elements.

In web development, there are three types of breadcrumbs generally: location-based, attribute, and path-based (history trail). See the second link below for more information on the types of breadcrumbs.

• Bootstrap Breadcrumbs
• How to use breadcrumbs on websites

The <button> element is a part of HTML. The <a> (anchor) element and the <input> element can also be used as buttons. The Bootstrap Button component provides us with numerous classes to help style buttons easily, including btn-lg, btn-primary, btn-outline-*, and more.

• Bootstrap Buttons
• MDN – The <button> element

The Bootstrap Card is a flexible, lightweight, extensible CSS-based component that can be used to set off content in a webpage in many different ways. A basic Card can be very simple, yet there are many ways to extend it for specific needs. Some optional extension Card classes include: card-header, card-body, card-text, card-title, and more. There is no HTML element named <card>, and Bootstrap Card component classes are typically used with <div>s, <p>s, <h*>s and other HTML elements as appropriate.

• Bootstrap Cards

Components in Bootstrap are sets of classes used on HTML elements to create parts of a common webpage user interface (UI). Some components are sets of classes used on HTML elements with the same name as the component, as with Bootstrap Forms (used with the <form> element) and Bootstrap Tables (used with the <table> element). Other components do not have a named HTML element equivalent, such as Bootstrap Cards, Breadcrumbs, and Carousels; they are used with other HTML elements such as <div>s.

• Bootstrap Components

A selector is a method used to select an element or elements that one would like to style. There are several different types of selectors such as ID selector, Type selector and so on. Each one requiring different syntax in order to be defined.

The <form> element is a part of HTML. Forms are used to gather user input that can then be stored in a database, or used to perform functions such as searching a site. Bootstrap offers many classes that can be used to style and improve the appearance of forms, such as form-control, col-form-label, form-check-inline, and more.

• W3Schools – Forms
• Bootstrap Forms

(Hypertext REFerence) The HTML code used to create a link to another page. The HREF is an attribute of the anchor tag, which is also used to identify sections within a document.

Icon font toolkits package sets of useful icons as characters in fonts, so that you can download the font set and have at your disposal a large variety of icons to use, such as an icon of a phone to use when referencing phone numbers, or a small Twitter icon to use as a link to a Twitter account.

Two commonly used icon font toolkits, or icon sets, are Font-Awesome and Bootstrap-Social.

A smaller version of a given image or symbol used on websites using Bootstrap’s”img-thumbnail” class embedded in the <img> tag.

The <img> element is a part of HTML. There is no Image component in Bootstrap, but Bootstrap does offer two classes that can be used with images: img-thumbnail creates a rounded border around an image, and img-fluid helps make images responsive.

• Bootstrap Images

The media object in Bootstrap helps to position media (such as images or video) alongside other content (such as text) that does not wrap around the media. To create a media object in Bootstrap, you must use these two classes: media and media-body, typically with div elements.

• Bootstrap – Media Object

A navbar is usually a horizontal bar across a webpage with links to access different parts of the website (though it can also be vertical). Bootstrap offers a Navbar component that is easy to implement and can be made responsive. There is no HTML <navbar> element, but there is an HTML element called <nav> that is typically used with the Bootstrap Navbar component.

• Bootstrap Navbar

The <table> element is a part of HTML. In the early days of web development, tables were very often used for page layout purposes. In modern web development, this is considered bad practice, as CSS is used for layout these days. Tables should now be used for their original purpose: displaying tabular data. The Bootstrap Table component offers numerous classes to help easily style tables, including table-header, table-striped, table-hover, and many more.

• W3Schools – HTML Tables
• Bootstrap Tables