bg-dark text-lighttext-bg-darktext-bg-primaryopacity-25bg-opacity-25text-opacity-25link-dark => Used with <a>hstackvstackgap-Nd-flexd-noned-lg-noned-block => By defaultflex-columnjustify-content-centeralign-items-centeralign-self-centerflex-grow-Ncontainercontainer-lg => Takes full width when screen size is less than "lg", works same for more than "lg" screen sizeborderborder-Nborder-primaryrounded-Nrounded-pillrounded-circlerounded-topp-N => Paddingpy-Npx-Npy-Nm-N => Marginmy-Nm-autotext-centerrowrow-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 rowcol-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-Ngy-Ntable => Used with <table>table-primary => Themes, Can also use with <tr> and <td>table-stripedtable-striped-columnstable-borderedtable-borderlesstable-sm => Removes some padding and makes table smallertable-hovertable-active => Used with <tr>table-responsive => Used with large tables, table class is wrapped inside thistable-responsive-lgtable-group-divider => Used with table header/footer/body tag<form>was-validated => Needs to be added via JS<label>form-label<input>form-controlform-control-lgform-control-plaintextform-control-color => Used with type colorform-range => Used with type rangeform-check => Used with type checkbox, Used with <div>form-switchform-check-inlineform-check-input => Used with <input>form-check-label => Used with <label>is-invalidis-valid<select>form-selectform-select-lg<div>input-group => Aligns side by side all child elementsinput-group-textform-floating => Label floats to the top, <input> should have a placeholder and before <label>invalid-feedback => Should be placed after <input>valid-feedbackbtn => Can also use with <a>btn-primarybtn-lgbtn-outline-primarybtn-linkdata-bs-toggle="button" => Toggle<div>btn-group => Align side-by-sidebtn-group-lgbtn-group-verticalalertalert-darkalert-dangerfadeshowrole="alert"data-bs-dismiss="alert" => Used with buttoncardcard-img-topcard-bodycard-titlecard-subtitlecard-textcard-img-overlaycard-headercard-footercard-groupmodalmodal-dialogmodal-contentmodal-headermodal-bodymodal-footermodal-dialog-centeredmodal-dialog-scrollablemodal-fullscreenfadedata-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-expandnavbar-brand => Used with <a> for Logonavbar-nav => Used with <ul>navbar-item => Used with <li>navbar-link => Used with <a>activedisabledaria-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