Bootstrap and Web Icons Notes

Bootstrap

What is Bootstrap?

  • Bootstrap is a free front-end framework.
  • It is used for faster and easier web development.
  • It includes HTML and CSS-based design templates.
  • These templates are for typography, forms, buttons, tables, navigation, modals, image carousels, and more.
  • It also has optional JavaScript plugins.
  • Bootstrap facilitates the creation of responsive designs.

Bootstrap Versions

  • Bootstrap 5, released in 2021, is the newest version (Bootstrap was initially released in 2013).
  • Bootstrap 5 includes new components and a faster stylesheet, and is more responsive.
  • Bootstrap 5 supports the latest stable releases of major browsers and platforms.
  • Internet Explorer 11 and earlier versions are not supported.
  • A primary difference between Bootstrap 5 and versions 3 & 4 is the switch to vanilla JavaScript instead of jQuery.
  • Bootstrap 3 and Bootstrap 4 are still supported for critical bug fixes and documentation changes.
  • It is safe to continue using Bootstrap 3 and 4; however, new features will not be added to these versions.

Advantages of Bootstrap

  • Easy to use: Basic knowledge of HTML and CSS is sufficient to start using Bootstrap.
  • Responsive features: Bootstrap's CSS adapts to various devices like phones, tablets, and desktops.
  • Mobile-first approach: Mobile-first styles are integral to the core framework.
  • Browser compatibility: Bootstrap 5 is compatible with modern browsers.

Where to Get Bootstrap 5?

  • Two methods to start using Bootstrap 5:
    • Include Bootstrap 5 from a CDN.
    • Download Bootstrap 5 from getbootstrap.com.

Bootstrap CDN

  • CSS:
    • html &nbsp;&nbsp;&nbsp;&nbsp;<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  • JavaScript:
    • html ¨K49K &nbsp;&nbsp;&nbsp;&nbsp;

Creating a Web Page with Bootstrap 5

  1. Add the HTML5 doctype
    • Bootstrap 5 utilizes HTML elements and CSS properties requiring the HTML5 doctype.
    • Include the HTML5 doctype at the beginning of the page, along with the lang attribute, correct title, and character set.
    • Example: html <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Example</title> <meta charset="utf-8"> </head> </html> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  2. Bootstrap 5 is mobile-first
    • Bootstrap 5 is designed to be responsive for mobile devices.
    • Mobile-first styles are part of the core framework.
    • Include the following <meta> tag inside the <head> element for proper rendering and touch zooming: html <meta name="viewport" content="width=device-width, initial-scale=1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    • width=device-width sets the page width to match the device screen width.
    • initial-scale=1 sets the initial zoom level when the page loads.
  3. Containers
    • Bootstrap 5 requires a containing element to wrap site content.
    • Two container classes:
      • .container: Provides a responsive, fixed-width container.
      • .container-fluid: Provides a full-width container, spanning the entire viewport width.

Containers

  • Containers are the most basic layout element in Bootstrap.
  • They are required when using the default grid system.
  • Containers are used to contain, pad, and sometimes center content.
  • While containers can be nested, most layouts do not need nested containers.
Fixed Container
  • Use the .container class to create a responsive, fixed-width container.
  • The width (max-width) changes on different screen sizes.
Fluid Container
  • Use the .container-fluid class to create a full-width container.
  • It always spans the entire screen width (width is always 100%).
Container Padding
  • By default, containers have left and right padding but no top or bottom padding.
  • Spacing utilities (e.g., extra padding and margins) are often used to enhance appearance.
  • For example, .pt-5 means "add a large top padding".
Container Border and Color
  • Other utilities like borders and colors are used with containers.
Responsive Containers
  • Use the .container-sm, .container-md, .container-lg, .container-xl, or .container-xxl classes to determine when the container should be responsive.
  • The max-width of the container changes on different screen sizes/viewports.

Bootstrap 5 Grid System

  • Built with flexbox, allowing up to 12 columns across the page.
  • Columns can be grouped to create wider columns if you don't want to use all 12 columns individually.
  • The grid system is responsive, and columns rearrange automatically based on screen size.
  • The sum of columns should add up to 12 or fewer (not required to use all 12 columns).

Grid Classes

  • Six grid classes:
    • .col-: Extra small devices (screen width less than 576px)
    • .col-sm-: Small devices (screen width equal to or greater than 576px)
    • .col-md-: Medium devices (screen width equal to or greater than 768px)
    • .col-lg-: Large devices (screen width equal to or greater than 992px)
    • .col-xl-: X-large devices (screen width equal to or greater than 1200px)
    • .col-xxl-: XX-large devices (screen width equal to or greater than 1400px)
  • To use the grid system:
    • Create a row (<div class="row">).
    • Add the desired number of columns (tags with appropriate .col-*-* classes).
    • The first asterisk () represents responsiveness (sm, md, lg, xl, or xxl), and the second () represents a number that should add up to 12 for each row.

Typography

  • Native font stack: Bootstrap uses a "native font stack" or "system font stack" for optimal text rendering on every device and OS.
  • These system fonts are designed for modern devices with improved rendering on screens and variable font support.
  • The font-family is applied to the <body> and inherited globally throughout Bootstrap.

Headings and Paragraphs

  • All heading elements (e.g., <h1>) and <p> elements have their margin-top removed.
  • Headings have margin-bottom: .5rem added, and paragraphs have margin-bottom: 1rem for easy spacing.

Display Headings

  • Display headings are used to stand out more than normal headings.
  • They have a larger font-size and lighter font-weight.
  • Six classes are available: .display-1 to .display-6.

Lists

  • All lists (<ul>, <ol>, and <dl>) have their margin-top removed and a margin-bottom: 1rem.
  • Nested lists have no margin-bottom.
  • The padding-left on <ul> and <ol> elements has been reset.

Responsive Images

  • Images in Bootstrap are made responsive with .img-fluid.
  • This applies max-width: 100%; and height: auto; to the image, allowing it to scale with the parent element.

Image Thumbnails

  • Use .img-thumbnail to give an image a rounded 1px border appearance, in addition to border-radius utilities.

Tables

  • Add the base class .table to any <table>, then extend with optional modifier classes or custom styles.
  • All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independently from the parent.

Table Variants

  • Various contextual classes can be added to tables, such as .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, and .table-dark.

Accented Tables

  • Striped rows: Use .table-striped to add zebra-striping to any table row within the <tbody>.

Bordered Tables

  • Add .table-bordered for borders on all sides of the table and cells.

Bootstrap 5 Forms

  • Stacked Form: All textual <input> and <textarea> elements with class .form-control get proper form styling.

Form Row/Grid (Inline Forms)

  • Use .row and .col to make form elements appear side by side.

Select Menu

  • Select menus are used to allow users to pick from multiple options.
  • Style a select menu in Bootstrap 5 by adding the .form-select class to the <select> element.

Select Menu Size

  • Use the .form-select-lg or .form-select-sm class to change the size of the select menu.

Checkboxes

  • Checkboxes are used to allow users to select any number of options from a list of preset options.
  • To style checkboxes, use a wrapper element with class="form-check" to ensure proper margins for labels and checkboxes.
  • Add the .form-check-label class to label elements and .form-check-input to style checkboxes properly inside the .form-check container.
  • Use the checked attribute if you want the checkbox to be checked by default.

Radio Buttons

  • Radio buttons are used to limit the user to just one selection from a list of preset options.

Toggle Switches

  • Use the .form-switch class together with the .form-check container to style a checkbox as a toggle switch.

Bootstrap 5 Jumbotron

  • A jumbotron was introduced in Bootstrap 3 as a big padded box for calling extra attention to some special content or information.
  • Jumbotrons are no longer supported in Bootstrap 5.
  • However, you can use a <div> element and add special helper classes together with a color class to achieve the same effect.

Alerts

  • Alerts are created with the .alert class, followed by one of the contextual classes: .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, or .alert-dark.

Basic Progress Bar

  • To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element.
  • Use the CSS width property to set the width of the progress bar.

Spinners

  • To create a spinner/loader, use the .spinner-border class.
  • Use any text color utilities to add a color to the spinner (e.g., .spinner-border text-primary).

Cards

  • A card in Bootstrap 5 is a bordered box with some padding around its content.
  • It includes options for headers, footers, content, colors, etc.
  • The .card-header class adds a heading to the card, and the .card-footer class adds a footer to the card.
  • To create a simple horizontal menu, add the .nav class to a <ul> element, followed by .nav-item for each <li>, and add the .nav-link class to their links.

Fixed Navigation Bar

  • The navigation bar can be fixed at the top or bottom of the page.
  • A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.
  • The .fixed-top class makes the navigation bar fixed at the top.

Carousel Slideshow

  • The Carousel is a slideshow for cycling through elements.

Modals

  • The Modal component is a dialog box/popup window that is displayed on top of the current page.

What is an Icon

  • An icon refers to a small selectable or non-selectable image representing or leading to something else in a computer's graphical user interface (GUI) or on the web.

FontAwesome

  • Font Awesome is the internet's icon library and toolkit used by millions of designers, developers, and content creators.
  • To use the free Font Awesome 5 icons, you can download the Font Awesome library, or sign up for an account at Font Awesome to get a code (called KIT CODE) to use when adding Font Awesome to your web page.
  • Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons.

FontAwesome Basics

  • To add an icon, you need:
    • The shorthand class name for the style you want to use.
    • The icon name, prefixed with fa- (meaning “Font Awesome”).

FontAwesome Styling

  • If you change the font-size or color of the icon's container, the icon changes. The same applies to shadow and anything else inherited using CSS.

Sizing Icons

  • The fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, or fa-10x classes are used to adjust the icon sizes relative to their container.