Bootstrap 4 Essential Training

  1. Getting Started

    • Introduction: CDN advantages: Bootstrap code is saved on the user's computer. Installation Methods: Preprocessed: offline development is possible; CDN: It requires a network connectivity throughout development.
    • Installation options: There are four ways to install a Bootstrap: Download the CSS and JS files, Bootstrap CDN, Download the source files, and finally, a Package Manager. To start downloading Bootstrap, go to the Bootstrap site.
    • Creating a basic template: Create what the basic template will look like with all the files we will need.

  2. Using Basic Styles

    • Basic styles overview: Basic styles are styles that change what the browser has for its styles, like: font, size, and a few other things.
    • Basic typography: Reboot.css has the basic resets for the typography for the sites. The best ways to style typography is to use: Rems vs Ems, Avoid margin-top, inherit when possible, border-box (which will be set for all elements anyway), native font stacks.
    • Typographic utilities: Here is a bunch of class names for modifying text in Bootstrap. You can horizontally align text using text-justify, along with a complicated formula:
      text(-xx)-POS:
xx: sm > 576px, md > 768px, lg > 992px, xl > 1200px
POS: left center right

      Also align-height:
      align-SID:
SID:
baseline top middle bottom
text-bottom text-top right

      Capitalization:
      text-TYP
TYP:
lowercase uppercase
capitalize monospace

      Font styles
      font-STYL
STYL:
italic weight-normal
weight-light weight-lighter
weight-bold weight-bolder

      Text-decoration-none: removes any underlined text, there is also text-reset: wich resets the text color to the same color as the parent. There is also:
      text-FLOW
wrap nowrap break truncate

    • Blockquotes and lists: Here are some class names to help with styling lists and blockquotes:
              Lists
* list-unstyled no bullets
* To make inline lists
    * list-inline on UL
    * list-inline-item on each LI


              Blockquote
* Use blockquote
* blockquote-footer for sources
* And Margin/Alignment classes in the CSS code
    • Using colors with Bootstrap: Here is a list of color classes that you could use:
      text-COLOR for text
primary secondary success danger warning info
light dark body black-50 white-50 muted white

      Here is background colors
      bg-COLOR for text
primary secondary success danger warning info
light dark white transparent

    • Work with images: Here are some image style classes:
              Image classes
* img-fluid responsive images
* img-thumbnail rounded 1px border

      You can also control the roundness of the images:
      ROUNDED(-SID)(-SHA)(-SIZ)
SID: top right bottom left
SHA: circle pill
SIZ: 0 sm lg

      And to align the images:
              Align images
* float-left or float-right
* text-center center inline
* mx-auto center block

      For Figures:
              Figures
* figure on the <figure> tag
* figure-img on the images
* figure-caption on the text

    • CSS variables: Its a new set of properties that can store certain styles into one value, and it can be used more than once. It also doesn't have a whole lot of browser support because it is new, so use the Can I Use site and look up variables. To use variables, use the: var() property and put it in the :root selector.
    • Text selection: Here are some classes for how users can interact with text on a page:
              Text selection
* user-select-auto It will reset the behavior of the other two classes
* user-select-all You will be able to select everything in an item
* user-select-none You can't select anything with this class

  3. Mastering Layout with Bootstrap

    • Layout overview: Bootstrap has a 12-column layout with the sizes: Extra small, Small, Medium, Large, Extra large.
    • Using containers: There are three main classes that you will be working with: container, row, and column.
      container(-SIZ)
SIZ: sm md lg xl fluid
They add 15px of padding

    • Working with rows and columns: You can give an element the class of row, and it will get ready for a grid layout. You can also give it a class of:
      row-cols(-BP)(-col)
BP: sm > 576px md > 768px lg > 992px xl > 1200px
COL: 1-6

      You can also use a class called no-gutters.
              Columns
* Up to 12 columns
* col(-BP)(-COL)
  BP: sm > 576px md > 768px lg > 992px xl > 1200px
  COL: 1-12

      To align columns:
      * Vertical
  align-TYP-DIR
  TYP: items self
  DIR: start center end
* Horizontal
  justify-content-DIR
  DIR: start center end around between

    • Multiple column classes: To make multiple columns:
              Multiple rows and columns
* container(-SIZ)
  SIZ: sm md lg xl fluid
* row row-cols(-BP)(-col)
  BP: sm > 576px md > 768px lg > 992px xl > 1200px
  COL: 1-6
* col(-BP)(-COL)
  BP: sm > 576px md > 768px lg > 992px xl > 1200px
  COL: 1-12

    • Offset columns: To offset columns:
              Column offsets
* offset-BP-COL
  BP: sm > 576px md > 768px lg > 992px xl > 1200px
  COL: 1-11

    • Nested columns: To nest columns, simply create a new row inside of a column.
    • Custom order: Here is the formula to order your content:
      order(-BP)(-ORD)
BP: sm > 576px md > 768px lg > 992px xl > 1200px
ORD: 1-12

    • Grid alignment options: For aligning items vertically:
      align-items-ALN
ALN: start center end

        For aligning individuals vertically
align-self-ALN
ALN: start center end
        For aligning horizontally (you need a width set)
justify-content-ALN
ALN: start center end around between

    • Display properties: Here are some position classes: fixed-top, fixed-bottom, sticky-top (lacks support). Display property mimics CSS, and here is the class formula:
      d(-BP)-TYP
BP: sm > 576px md > 768px lg > 992px xl > 1200px
TYP: none inline inline-block block
table table-row table-cell flex inline-flex

      Here is a class formula for when you are printing:
      d-print-TYP
TYP: none inline inline-block block
table table-row table-cell flex inline-flex

      Here is the main Flex container formula:
      d(-BP)(-inline)-flex
BP: sm > 576px md > 768px lg > 992px xl > 1200px

    • Flexbox container options: You can add more classes to the container element to control the flex items, or you can modify the items themselves. overview of the flex container class:
      d(-BP)(-inline)-flex
BP: sm > 576px md > 768px lg > 992px xl > 1200px

      Another class is the direction class:
      flex(-BP)(-DIR)(-reverse)
BP: sm > 576px md > 768px lg > 992px xl > 1200px
DIR: row column

      You can also change the order of the elements:
      order(-BP)-ORD
BP: sm > 576px md > 768px lg > 992px xl > 1200px
ORD: 1-12

      You can also justify the content:
      justify-content(-BP)-ALG
BP: sm > 576px md > 768px lg > 992px xl > 1200px
ALG: start center end around between

      Wrap is another class that you could use:
      flex(-BP)-WRP(-reverse)
BP: sm > 576px md > 768px lg > 992px xl > 1200px
WRP: wrap nowrap

      And you can align content vertically:
      align-content(-BP)-ALG
BP: sm > 576px md > 768px lg > 992px xl > 1200px
ALG: start end center around between stretch

    • Individual flex items: You can modify the elements inside of a flex container, here are some of the classes used:
      align-self(-BP)-ALG
BP: sm > 576px md > 768px lg > 992px xl > 1200px
ALG: start end center baseline stretch

      You can also control the order of other elements:
      order(-BP)-ORD
BP: sm > 576px md > 768px lg > 992px xl > 1200px
ORD: 1-12

    • Floating elements: Here is the float class formula:
      float-(BP)-SID
BP: sm > 576px md > 768px lg > 992px xl > 1200px
SID: left right none

    • Margin and padding: This is the margin/padding formula:
      (PRO)(SID)(-BP)-(N)SIZ
PRO: m margin p padding
SID t r b l x y
BP: sm > 576px md > 768px lg > 992px xl > 1200px
SIZ: 0 1 2 3 4 5 auto
N: negative (only works for margins)

    • Visibility: There are two classes that could be used for visibility, along with the display property:
              Visibility
* Invisible, Visible
* d(-BP)-TYP
  BP: sm > 576px md > 768px lg > 992px xl > 1200px
  TYP: none inline inline-block block
  table table-row table-cell flex inline-flex

    • Sizing utilities:Here is some classes for sizing:
              Sizing
* SIZ(-AMT)
  SIZ: w h mw mh vw vh min-vw min-vh
  AMT: 25 50 75 100 auto

    • Using borders: Here is the border class formula:
      BORDER(-SID)(-COL)(-0)
SID: top right bottom left
COL: primary secondary success danger warning
info light dark White

ROUNDED(-SID)(-SHA)(-SIZ)
SID: top right bottom left
SHA: circle pill
SIZ: 0 sm lg

  4. Style Element Overview

    • Create buttons: The basic class for creating a button is btn and you can specify a size:
      btn-SIZ
SIZ: sm lg

      You can use these classes with the <a>, <button>, <input> 
      btn-COLOR
COLOR: primary secondary success danger
     warning info light dark

      This is for outlines:
      btn-outline-COLOR
COLOR: primary secondary success danger
     warning info light dark

      If you want the button to span the entire width of the container: btn-block; there is also the classes active and disabled.
    • Button groups: To group simple buttons use the btn-group, btn-group-vertical, btn-toolbar,. There is also a class for the size of the groups:
      btn-group-SIZ
SIZ: sm lg

    • Use badges: There is the badge class, and a shape: badge-pill, and a color:
      badge-COLOR
COLOR: primary secondary success danger
     warning info light dark

    • Progress bar styles: You need the progress container, and the progress-bar item, to style the size use the width and height classes or style the progress bar itself. You can even put a label in front of the progress-bar item to name it. You can use the bg-COLOR class to style the progress bar a color, you can even use the progress-bar-striped class to give the bar a striped look, and you can animate it too with the progress-bar-animated. Here are a few accessibility properties you would need for your progress bar: role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax.
    • List groups: Here are some classes for modifying list groups: list-group container; then you put list-group-item on the list items. There is also li, button, and a classes. You can also use the active, disabled classes. list-group-item-action class can help with making the list item have an action. There are also some lighter colors that you could use:
      list-group-item-COLOR
COLOR: primary secondary success danger
     warning info light dark


      list-group-horizontal(-BP)
BP: sm > 576px md > 768px lg > 992px xl > 1200px

      You might want to use a badge too, using the badge classes, and use justify-content-between.
    • Breadcrumbs: You need the breadcrumb container, then the breadcrumb-item, and you can add the active class to see where you are in a page. You can also use these classes: li, nav>a.
    • Shadows: There are a few classes that can help make BOX shadows only: shadow-none, shadow-sm, shadow, shadow-lg.

  5. Using Layout Component

    • Add a jumbotron: You need the jumbotron container then there is an optional jumbotron-fluid, which takes up the entire space of the parent.
    • Table styles: The table class goes on the table tag, and will make the table look like an actual table, you can even use the table-dark class to make it a dark table. Here are some more styles: table-striped, table-bordered, table-borderless, table-hover. In the thead section, you can use: thead-light, and thead-dark to help style it. You can even do table colors:
      table-COLOR (TRs and TDs)
COLOR: active primary secondary success danger warning info light dark

      You could even use the normal bg colors:
      bg-COLOR
COLOR: primary success danger warning info

      and here is for text color:
      text-COLOR
COLOR: primary secondary success danger warning info light dark

      You can even change the size of the table too: table-sm,
      table-reponsive(-BP)
BP: sm > 576px md > 768px lg > 992px xl > 1200px

    • Basic card layouts: You need to have the card container, then the card-body container, which stores the content. And inside that container, there are a few classes that are available to use for the content: card-text, card-title, card-subtitle, card-link, card-img. You can use the traditional colors for design:
      bg-COLOR
COLOR: primary secondary success danger warning info light dark white


      border-COLOR
COLOR: primary secondary success danger warning info light dark


      text-COLOR
COLOR: primary secondary success danger warning info light dark

    • Card content classes: Along with the basic card layout classes, you can even have a card-header, and card-footer, and for images: card-img-top, card-img-bottom, card-img-overlay. You can even use list groups in your cards: list-group, list-group-item, list-group-flush.
    • Card layouts: You can use card-group, card-deck, card-columns as container layouts. Another way to organize the layout is to use the grid:
      row row(cols(-BP)(-COL))
BP: sm > 576px md > 768px lg > 992px xl > 1200px
COL: 1-6

    • Use the media object: You need the media container first then the media-body then use flexbox classes to modify the rest of the page or card.

  6. Using Form Styles

    • Create a basic form: Here are the basic form classes to use when making one: form-group, form-text, form-control, form-control-label, form-control-file.
    • Checkboxes and radio classes: Here are some classes that are related to form checkboxes and radios: form-check, form-check-label, form-check-input, form-check-inline.
    • Style options: Here are some form style classes: form-control-sm, form-control-lg, form-inline.
    • Multicolumn forms: Use the row and col classes as you normally would. You would also need to use these special classes: form-row, col-auto, and for labels the col-form-label class.
    • Create input groups: Here are the classes for input groups: input-group, input-group-prepend, input-group-append, input-group-text, and aria classes: aria-label, sr-only.
    • Custom form components: Here is a class that you can use to modify your forms:
      custom-TYP
TYP: select(-sm)(-lg) radio checkbox switch range file-input

      You can also do a custom-control-label for labels, custom-control-input for input. This class is for containers: custom-control where you put all your custom form classes and tags.

  7. Working with Interactive Components

    • Add tooltips: Use tooltips for links or form-controls: to use it, put the data-toggle="tooltip" in the element tag and put title="text" attribute too. To configure, you can use data, or a JS Configuration. either one you do you will still need to use JS to activate. Here is an example of what you would use:
      $(function () {
    $('[data-toggle="tooltip"]').tooltip({ OPTIONS })
})

      and it creates this code:
      <div class="tooltip bs-tooltip-top" role="tooltip">
    <div class="arrow"></div>
    <div class="tooltip-inner">
        Some tooltip text!
    </div>
</div>

      There are some common options that you can use in a tooltip:
          Common options for tooltips
* placement top right bottom left
* trigger click hover focus
* html true false

    • Display popovers: To get a popover set up, use data-toggle="popover", put in same place as the tooltip, then the title="text" attribute, and the data-content="content", and to activate them it is very much the same as tooltips:
      $(function () {
    $('[data-toggle="popover"]').popover({ OPTIONS })
})


          Common options for popovers
* placement top right bottom left
* trigger click hover focus
* container

    • Create alerts: You need the alert claass put on a container element, then you can use the:
      alert-COLOR
primary secondary success danger
warning info light dark

      There are also a few classes for internal elements: alert-heading, alert-link, you can even make it so that the user can dismiss the alert: alert-dismissible (optional) → fade show, and add a close button:
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
</button>

    • Use dropdowns: Here are a few classes for the dropdown menu: dropdown, dropdown-toggle, dropdown-menu, dropdown-item, dropdown-header, dropdown-divider. Any of the links can also be disabled. You can also change the size of the button: btn-sm, btn-lg, You can also use the dropup class to make the menu drop up; you can also align the menu to the right using: dropdown-menu-right. To split the dropdown menu, use: btn-group, dropdown-toggle-split.
    • Add collapsible accordians: You need a link or a button in order to get the collapse to activate, then you use the data-toggle="collapse, and to target the element, use an id or data-target, and for the element that will collapse, use the collapse class. For the accordian, you need the container and then the show class only once on that element. You will also need the dropdown-menu class, and it is common to put them all in a card style.
    • Use modals: Modals use a trigger button/link: link would need an #id, button would need a data-target. for both of them you would need a data-toggle="modal", and whatever you want to have the modal will need the modal class.
      Structural classes
* modal-dialog for the container
* modal-content for the content
* modal-header is for the header section of the modal
* modal-body is where you put all your content
* modal-footer is for the footer of the modal


      Modal options
* modal-title
* modal-dialog-centered
* modal-dialog-scrollable
* data-dismiss="modal"

    • Build carousels: To set up a carousel, use the carousel class, along with the optional slide, carousel-fade, and you might want to set a target for it too. You also put a carousel-inner class for inside of the carousel container, and inside of that use the carousel-item and if you have multiple items, to choose which one pops up, use the active class, and for images, use the d-block, and w-100, and you can also give them a carousel-caption class. Here are a bunch of data attributes that you could use:
      Data attributes
* ride: carousel | false
* interval: 5000/item
* pause: hover | false
* touch, keyboard, wrap: true

      There are some classes for carousel controls: carousel-control-(prev)(next), carousel-control-(prev)(next)-icon. There is also the carousel-indicators, and the data-target="target", data-slide-to="#" attributes.
    • Use scrollspy: A container has a data attribute data-spy="scroll", and then uses position-relative, ad you will need to target the element with a data-target="ID".
    • Toasts: Need a class of toast, then inside a class of toast-header, then a toast-body. Here are a couple of data attributes:
      Data attributes
* animation: true
* autohide: true
* delay: 500

      To set up you need JS to activae the toast, butyou will have to position the toast. And you will probably want a data-dismiss="toast".
    • Spinners: The spinner class is:
      spinner-TYP(-SIZ)
TYP: border grow
SIZ: sm


      text-COL
COL: primary secondary success danger warning info light dark

    • Pagination: The pagination class goes on the ul or ol tag, and the li's each get page-item, disabled, active, and for the links in the list items, they get the page-link.
    • Stretched links: You simply give an anchor tag or button the class of stretched-link and the parent element will become clickable. It works on cards and columns, and it will only work if the element has a position other than static, and its transform is not none.
    • Embeds: You put a container around the embedded code and you put the embed-responsive class in the container, you can also change the size also:
      embed-responsive-SIZ
SIZ: 21by9 16by9 4by3 1by1

      You can also add a embed-responsive-item.