Bootstrap

Bootstrap

Sources:

• Web Dev Simplified Shopping Cart Video (https://www.youtube.com/watch?v=lATafp15HWA)
• https://getbootstrap.com/docs/4.0/utilities/spacing/

Colours

Boostrap Name	Colour
primary	blue
secondary	grey
success	green
danger	red
warning	yellow
info	turquoise
light	greyer white
dark	black (but not #000000)
white	white (#ffffff)

Other colours: indigo, purple, pink, red, orange, yellow, green, teal, cyan, gray-100, gray-200, ... gray-900, muted, etc

Breakpoints

Breakpoint	Class Infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Margin/Padding

The classes are named using the format:

• {property}{sides}-{size} for xs and
• {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto

Display

As such, the classes are named using the format:

• .d-{value} for xs
• .d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.

Where value is one of:

• none, inline, inline-block, block, grid, table, table-cell, table-row, flex, inline-flex

The media queries affect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on lg, xl, and xxl screens.

Examples:

Behaviour	Class Combination
Hidden on all	.d-none
Hidden only on xs	.d-none .d-sm-block

Classes:

• text-white: text color of white
• bg-white: background of white
• shadow-sm: small shadow (i.e. around the element)
  • sizes (smallest to largest): -none, -sm, (blank), -lg
• w-25: width 25%
  • other values: -50, -75, -100, -auto
  • same with height (e.g. h-25)
• border: border
• border-top: border only at the top
• border-0: border subtracted
• border-top-0: border on all sides except for the top
• border-primary: blue border
• border-1: border with of 1
  • other values: -2, ... -5
• rounded: round all 4 corners
  • can do -top, -end, -bottom, -start, -circle, -pill
  • rounded-0, ... rounded-3
• overflow
  • overflow-auto: vertically scroll
  • overflow-hidden: clips extra content
  • overflow-visible: content overflows out of the item
  • overflow-scroll: scroll both directions
• visible or invisible: takes up space on the page, but sets the visibility of the object
• float
  • float-start: float left (all sizes)
  • float-end: float right (all sizes)
  • float-none: don't float (all sizes)
  • float-sm-start: Float start on viewports sized SM (small) or wider

Omitted

• vertical alignment (e.g. align-baseline, etc)

Questions

• how to incorporate bootstrap into your code