bg-dark text-light
text-bg-dark
text-bg-primary
opacity-25
bg-opacity-25
text-opacity-25
link-dark
=> Used with <a>
hstack
vstack
gap-N
d-flex
d-none
d-lg-none
d-block
=> By defaultflex-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 sizeborder
border-N
border-primary
rounded-N
rounded-pill
rounded-circle
rounded-top
p-N
=> Paddingpy-N
px-N
py-N
m-N
=> Marginmy-N
m-auto
text-center
row
row-cols-N
=> Makes N columns every rowrow-cols-lg-N
=> Makes N columns every row at "lg" size and abovecol
=> Bootstrap is divided into 12 grid, Should be inside row
col-N
=> Taking N out of 12 spacecol-auto
=> Taking as little as space as possiblecol-lg-N
=> Taking N space in "lg" screen sizeoffset-N
=> Off by N space out of 12g-N
=> Gapgx-N
gy-N
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 smallertable-hover
table-active
=> Used with <tr>
table-responsive
=> Used with large tables, table
class is wrapped inside thistable-responsive-lg
table-group-divider
=> Used with table header/footer/body tag<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 colorform-range
=> Used with type rangeform-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 elementsinput-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
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-sidebtn-group-lg
btn-group-vertical
alert
alert-dark
alert-danger
fade
show
role="alert"
data-bs-dismiss="alert"
=> Used with buttoncard
card-img-top
card-body
card-title
card-subtitle
card-text
card-img-overlay
card-header
card-footer
card-group
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 buttondata-bs-target="#idName"
data-bs-dismiss="modal"
=> Used with button to closedata-bs-toggle="collapse"
=> Used with button to create collapsible componentsdata-bs-target="#idName"
aria-expanded="true"
aria-controls="row"
row collapse show
=> Used with <div>
navbar navbar-expand
navbar-brand
=> Used with <a>
for Logonavbar-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