Day 58 - 13/11

Plan:

• making code clean

• learning bootstrap

Progress:

Breakpoint

xs: 0,

sm: 576px,

md: 768px,

lg: 992px,

xl: 1200px,

xxl: 1400px

• min-width:

@include media-breakpoint-up(sm)

• max-width:

  @include media-breakpoint-down(sm)

• single breakpoint:

  @include media-breakpoint-only(md)
  equal to:
  @media (min-width: 768px) and (max-width: 991.98px)

• between breakpoint:

  @include media-breakpoint-between(md, xl)
  equal to:
  @media (min-width: 768px) and (max-width: 1199.98px)

Container

• container- will set a max-width at each responsive breakpoint

ex: container-lg sets max-width 100% till 768px

• container-fluid set a max-width 100% in every breakpoint

Grid

• a series of container, row, column will be used

<div class="container">
  <div class="row">
    <div class="col">

• grid support 6 responsive breakpoint, and has 12 template columns per row; can choose the number of col to span col-4 (span 4 columns)

• each col has horizontal padding (gutter); gx- to change horizontal padding, gy- to change vertical padding, g- to change both, g-0 to remove gutter

• col-{breakpoint}-auto : sizes column width base on content width

• .col-sm- : sizes columns the same way in every breakpoint larger than sm and all columns will stack horizontally when reach sm

• .row-cols- : set numbers of cols in each row

• .order- : control the visual order

• .offset-md- : set left margin of a column by numbers of column

• .me-auto : make the next sibling column away from it

• .ms-auto : make the previous sibling column away from it

• .col- : can be used outside of row with the max width of 100% equivalent to col-12

Gutters

• .gx- : horizontal columns padding (0-5)

• .gy- : vertical columns padding

• .g- : horizontal and vertical columns padding

• .g-0 : no padding