Bootstrap - C S S

  • Basic
    • Breakpoints
      • sm, md, lg, xl, xxl
    • Colors
      • bg-dark text-light
      • text-bg-dark
      • text-bg-primary
      • opacity-25
        • bg-opacity-25
        • text-opacity-25
      • link-dark => Used with <a>
    • Stack
      • hstack
      • vstack
      • gap-N
    • Display
      • d-flex
        • d-none
          • d-lg-none
        • d-block => By default
      • flex-column
      • justify-content-center
      • align-items-center
      • align-self-center
      • flex-grow-N
    • container
      • container-lg => Takes full width when screen size is less than "lg", works same for more than "lg" screen size
      • border
        • border-N
        • border-primary
        • rounded-N
          • rounded-pill
          • rounded-circle
          • rounded-top
      • Spacing
        • p-N => Padding
          • py-N
          • px-N
          • py-N
        • m-N => Margin
          • my-N
          • m-auto
      • Alignment
        • text-center
  • Rows & Columns
    • row
      • row-cols-N => Makes N columns every row
      • row-cols-lg-N => Makes N columns every row at "lg" size and above
    • col => Bootstrap is divided into 12 grid, Should be inside row
      • col-N => Taking N out of 12 space
      • col-auto => Taking as little as space as possible
      • col-lg-N => Taking N space in "lg" screen size
      • offset-N => Off by N space out of 12
    • g-N => Gap
      • gx-N
      • gy-N
  • Table
    • table => Used with <table>
      • table-primary => Themes, Can also use with <tr> and <td>
      • table-striped
      • table-striped-columns
      • table-bordered
      • table-borderless
      • table-sm => Removes some padding and makes table smaller
      • table-hover
      • table-active => Used with <tr>
    • table-responsive => Used with large tables, table class is wrapped inside this
      • table-responsive-lg
    • table-group-divider => Used with table header/footer/body tag
  • Forms
    • <form>
      • was-validated => Needs to be added via JS
    • <label>
      • form-label
    • <input>
      • form-control
        • form-control-lg
        • form-control-plaintext
        • form-control-color => Used with type color
      • form-range => Used with type range
      • form-check => Used with type checkbox, Used with <div>
        • form-switch
        • form-check-inline
          • form-check-input => Used with <input>
          • form-check-label => Used with <label>
      • is-invalid
        • is-valid
    • <select>
      • form-select
        • form-select-lg
    • <div>
      • input-group => Aligns side by side all child elements
        • input-group-text
      • form-floating => Label floats to the top, <input> should have a placeholder and before <label>
      • invalid-feedback => Should be placed after <input>
        • valid-feedback
  • Button
    • btn => Can also use with <a>
      • btn-primary
      • btn-lg
      • btn-outline-primary
      • btn-link
    • data-bs-toggle="button" => Toggle
    • <div>
      • btn-group => Align side-by-side
        • btn-group-lg
        • btn-group-vertical
  • Alert
    • alert
      • alert-dark
      • alert-danger
    • fade
      • show
    • role="alert"
    • data-bs-dismiss="alert" => Used with button
  • Card
    • card
      • card-img-top
      • card-body
        • card-title
        • card-subtitle
        • card-text
        • card-img-overlay
      • card-header
      • card-footer
    • card-group
  • Modal
    • modal
      • modal-dialog
        • modal-content
          • modal-header
          • modal-body
          • modal-footer
      • modal-dialog-centered
      • modal-dialog-scrollable
      • modal-fullscreen
    • fade
    • data-bs-toggle="modal" => Used with button
      • data-bs-target="#idName"
    • data-bs-dismiss="modal" => Used with button to close
    • data-bs-toggle="collapse" => Used with button to create collapsible components
      • data-bs-target="#idName"
      • aria-expanded="true"
      • aria-controls="row"
      • row collapse show => Used with <div>
  • Navbar
    • navbar navbar-expand
      • navbar-brand => Used with <a> for Logo
      • navbar-nav => Used with <ul>
        • navbar-item => Used with <li>
          • navbar-link => Used with <a>
            • active
            • disabled
            • aria-current="page"
      • navbar-text => Used with <div>
      • navbar-toggler => Used with <button>
        • data-bs-target="#idName"
        • navbar-toggler-icon => Used with <div>
    • navbar-dark bg-dark
Share: