gutter를 사용한 row, col 여백

<div class='color p-3 border bg-light>

p-3는 padding, 3의 간격을 의미한다.

이렇게 하니 뒤에 background color가 bg-light이라 흰색이 되었다.

하지만 나는 좌우 여백을 줄이고 상하 여백을 늘리는걸 원하고, 색깔은 옅은 회색을 원했기에

 

좌우여백: p-1 (color는 내가 회색으로 만들려고 옆에 추가한 그냥 임의의 class인데 안되서 삭제하였다.)

상하여백: row옆에  g-2가 아닌 g-4를 추가하고 (g=gutter)를 넣었다.

색깔: p-1을 css시트에서 background-color: lightgrey;로 하니 성공!

 

bg-light의 색깔을 css에서 바꾸어봤는데 안되더라... 아마 !important 부트스트랩 property 때문인 것 같은데 아니었다. 과연 무엇때문일까...? 어쨋뜬 p-1을 바꾸어서 해결했으니 됬다.

마지막 코드:

그리고 결과: