Please enable JavaScript.

Coggle requires JavaScript to display documents.

Bootstrap, Utilities, Colors Sets - Coggle Diagram

- - - - .alert-primary
        .alert-COLOR SET
    - - Trigger
        
        $('.alert').alert()
        
        $('.alert').alert('close')
        
        $('.alert').alert('dispose')
  - - - .badge-primary
        .badge-COLOR SET
      - badge-pill
        (rounded)
  - - - .btn-primary
        .btn-COLOR SET
      - .btn-link
      - .btn-outline-primary
        COLOR SET
      - .btn-lg
        .btn-sm
      - .btn-block
      - .active
    - - .btn-group
        
        .btn-group-lg
        .btn-group-sm
      - .btn-toolbar
      - .btn-group-vertical
  - - - .card-text
    - - .list-group-item
    - - .border-secondary
        COLOR SET
      - bg-primary
        COLOR SET
      - .bg-transparent
    - - ..row-cols-1
      - .row-cols-md-2
        
        .col mb-4
      - .card-columns
  - - - .carousel-inner
        
        .carousel-item active
        .carousel-item
        
        .carousel-caption
    - - interval
      - keyboard
      - pause
      - ride
      - wrap
      - touch
  - - - .multi-collapse
  - - - .dropdown-menu
        
        .dropdown-item
        
        .dropdown-divider
        
        dropdown-item active
  - - - .form-control
        
        .form-control-file
        
        .form-control-lg
        
        .form-control-sm
        
        .form-control-range
        
        .form-control-plaintext
      - .form-check
        
        .form-check-input
        
        form-check-label
        
        .form-check-inline
    - - .form-row
        
        col
        
        .col-form-label-sm
        
        .col-form-label-lg
        
        .col-auto
        .col-4
    - - .form-text
        (Help text)
    - - .is-valid
        .is-invalid
      - .invalid-feedback
        .valid-feedback
      - .valid-tooltip
        .invalid-tooltip
    - - .custom-checkbox
      - .custom-radio
      - .custom-control-inline
      - .custom-control
      - .custom-checkbox
      - .custom-switch
      - .custom-select
      - .custom-range
      - .custom-file
    - - .input-group-prepend
      - .input-group-text
      - .input-group-append
      - .input-group-sm
        .input-group-lg
  - - - .active
      - .disabled
      - .list-group-item-action
        (for <a> or <button>)
      - .list-group-item-primary
        COLOR SET
    - - -{ sm| md | lg | xl }
  - - - .media-body
  - - - .modal
        
        .modal-dialog
        
        .modal-content
        
        .modal-body
        
        .modal-title
        
        grid
        
        .modal-footer
        
        .modal-header
        
        .modal-dialog-scrollable
        
        .modal-dialog-centered
        
        .modal-sm
        -{ lg | xl }
        
        data-backdrop="static"
    - - .toast
        
        .toast-header
        
        .toast-body
        
        Stacking
  - - - .nav-item
        
        .nav-link
        
        .nav-link active
        
        .nav-link disabled
      - .justify-content-center
        .justify-content-end
      - .flex-column
      - .nav-tabs
      - .nav-pills
      - .nav-fill
      - .nav-justified
      - .tab-content
        
        .tab-pane
  - - - .navbar-expand-lg
        { sm | md | lg | xl }
      - .navbar-brand
      - .navbar-toggler
      - .collapse .navbar-collapse
        
        .navbar-nav
        
        .nav-item
        
        .nav-link
        
        .form-inline
      - .navbar-text
      - .navbar-dark .bg-dark
        .navbar-light .bg-primary
  - - - .page-item
        
        .page-link
        
        .disabled
        .active
      - .pagination-lg
        .pagination-sm
      - .justify-content-center
        .justify-content-end
  - - - .progress-bar
        
        require
        
        role="progressbar"
        
        aria-valuenow="100"
        
        aria-valuemin="0"
        
        aria-valuemax="100"
      - style
        
        .bg-success
        .bg-info
        COLOR SET
        
        ..progress-bar-striped
        
        .progress-bar-animated
- - - - list-inline
        list-inline-item
      - list-unstyled
  - - - .float-left
        .float-right
      - mx-auto
  - - - .table-dark
      - .table-striped
      - .table-bordered
      - .table-borderless
      - .table-hover
        (mouse over highlight selected row)
      - .table-sm
        (row height smaller)
      - .table
        (main class must have)
    - - .thead-light
      - .thead-dark
    - - td
        
        share
        
        .table-active (grey)
        .table-primary
        .table-COLOR SET
      - tr
    - - .table-responsive-*
        { ms | md | lg | xl }
      - .table-responsive
        (scroll horizontally)
- - - - xs
      - sm
      - md
      - lg
      - xl
    - - row
        
        col
        
        width
        
        col-sm-6
        
        col
        
        col-md-auto
        
        col-12
        
        beak line
        .w-100
        
        Mix and match
        col-6 col-md-4 col-xl-6
        
        Reorder
        
        order-last
        
        order-first
        
        order-12
        
        order-1
        
        offset
        
        offset-md-4
        
        col-sm-5 offset-sm-2 col-md-6 offset-md-0
        
        ml-auto
        
        ml-md-auto
        
        mr-auto
        
        no-gutters
        (no padding, margin)
      - alignment
        
        vertical
        
        col
        
        .align-self-start
        .align-self-center
        .align-self-end
        
        row
        
        .align-items-center
        .align-items-start
        .align-items-end
        
        horizontal
        (row only)
        
        .justify-content-start
        .justify-content-center
        .justify-content-end
        .justify-content-around
        .justify-content-between
    - - media
        
        media-body
      - alignment
        
        .align-self-start
        .align-self-center
        .align-self-end
      - <ul class="list-unstyled">
        
        <li class="media">
- - - - embed-responsive-item