COLORS & TYPOGRAPHY
lead - makes the text a paragraph text that is slightly larget thatn th usual paragraph text
text-center, text-start, text-end - positions text or aligns tex
text-decoration-underline, text-decoration-line-through - adds styles to a text
fw-bold - font weight bold class. more include fw-light fst-italic - apllies the italics font style to the font
text-primary, text-muted - gives color to text
BUTTONS & BUTTON GROUPS
bg-primary - gives background color btn - turns any tag to a button btn-primary - gives button a background color btn-outline-primary - gives the border a color btn-lg, btn-sm, btn-md - changes the size of the buttons btn-group - used in a container e.g div that wrap sets of buttons. It displays the button together giving them a joined effect. Although they can have their individual colors and properties
UTILITY CLASSES
m-1, m-2, m-3, m-4, m-5 - applies margins on all sides of an element in 5 different degrees p-1, p-2, p-3, p-4, p-5 - applies paddings on all sides of an element in 5 different degrees - my-3 or py-3- applies margins or paddings to the top and bottom mt-3, mb-4, ms-2, me-1 - top, bottom, left, right respectively. Same as paddings where m should be relaced with p
border - adds border around a content border-top, border-bottom, border-start, border-end - adds border on the specific side. border-primary - gives color to the border border-5 - adds thickness to the border applied rounded - gives rounded corners to the border applied rounded-pill - gives a more emphasized rounded corner to the border applied shadow-lg, shadow-md, shadow-sm - applies shadows in varing sizes
CONTAINERS
.container, .container-lg etc - will give a fixed layout. The width of this layout adjusts at different breakpoints. They usually have 100% width until it becomes a container of different width at different screen sizes container-fluid - gives a layout that is 100% width on every screen size row & col - they are used in divs inside a div with container class. col divides a row into columns col-4 - define the col width usually between 1 - 12. 12 is the default col-sm-4, col-lg-6 - defines the col width for different screen size. You can redistribute the widths of cols using these justify-content-start, justify-content-end, justify-content-spacebetween, justify-content-center - used to position colums in a row