1 Layout

• 12 column layout default
  • className="col-2", className="col-3" ,… etc to determine size of element
• By default, we add columns NOT rows
  • Adding columns is adding left to right
  • Even with nesting grids, we still grow left to right
  • Can grow downwards by adding d-flex utility class to column

2 Resizing

• DO NOT add style like <button style={{"width": 100}}/>
  • It will not resize properly
• INSTEAD, add col-1 col-2 … col-12 to the className

<button className="col-3"/>

<div className="container-fluid text-center">
      <main className="main">
        <div className="row">
            <div className="col-3 d-flex flex-column mb-3">
                Sidebar
            </div>
            <div className="col-9 d-flex flex-column mb-3">
                Contentbar
            </div>
        </div>
       </main>
</div>

3 breakpoints

sm md lg are breakpoints meaning bootstrap auto-resizes when that window is too small.

Examples:

<div className="col-sm-3"></div> //small breakpoint
<div className="col-md-3"></div> //medium breakpoint

4 Padding and Margin

<div className="pr-3"></div> //pad right , 3 represents 1 space
<div className="pl-3"></div> //pad left
<div className="pu-3"></div> //pad left
<div className="pd-3"></div> //pad left
<div className="p-auto"></div> //pad all sides auto

<div className="mr-3"></div> //pad right
<div className="ml-3"></div> //pad left
<div className="mu-3"></div> //pad left
<div className="md-3"></div> //pad left
<div className="p-auto"></div> //pad all sides auto

5 Utility functions

• Utility functions are just strings you give as value to className parameter in React components, or class in HTML.
• Add utility function to <div className="rounded-0"... for sharp edges

Examples:

`<div className="col-3 d-flex flex-column">` //column with flexbox grow downwards