> For the complete documentation index, see [llms.txt](https://dtian.gitbook.io/daily-report-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dtian.gitbook.io/daily-report-1/day-58-13-11.md).

# Day 58 - 13/11

Plan: 

* making code clean
* learning bootstrap

Progress:

## <mark style="color:blue;">Breakpoint</mark>

xs: 0,

sm: 576px,

md: 768px,

lg: 992px,

xl: 1200px,

xxl: 1400px

* min-width:&#x20;

```scss
@include media-breakpoint-up(sm)
```

* max-width:&#x20;

  ```scss
  @include media-breakpoint-down(sm)
  ```
* single breakpoint:&#x20;

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

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

## <mark style="color:blue;">Container</mark>

* `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

## <mark style="color:blue;">Grid</mark>

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

```html
<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`

## <mark style="color:blue;">Gutters</mark>&#x20;

* `.gx-` : horizontal columns padding (0-5)
* `.gy-` : vertical columns padding
* `.g-` : horizontal and vertical columns padding
* `.g-0` : no padding