티스토리 뷰
웹 코딩을 하게 되면, block Element 는 inline 방식 으로 inline Element 는 block 방식으로 바꾸어야 할 경우가 있다. CSS 에서는 display: inline, display: block 속성을 사용하고, Bootstrap 에서는 d-inline, d-block 클래스 명을 사용한다.
div{ /*block Element*/
display: inline
}
span{ /*inline Element*/
display: block
}<div class="d-inline"></div>
<span class="d-block"></span>참고
[Bootstrap] 레이아웃 / CSS3 flex-1 / direction / wrap
. CSS flex CSS3 flexbox layout은 웹페이지의 컨테이너에 아이템의 폭과 높이 또는 순서를 변경해서 웹페이지의 사용 가능한 공간을 최대한 채우고 이를 디바이스 종류에 따라 유연하게 반영하도록 도
espania.tistory.com
https://espania.tistory.com/142
[Bootstrap] 레이아웃 / d-flex / justify-content / align-items / align-self
. d-flex (row) CSS3 display: flex; flex-direction: row; Bootstrap Item1 Item2 Item3 Item4 Item1 Item2 Item3 Item4 . d-flex (row-reverse) CSS3 display: flex; flex-direction: row-reverse; Bootstra..
espania.tistory.com
https://espania.tistory.com/360
[Bootstrap] 레이아웃 / display(d-none, invisible)
. display(d-none) 웹 페이지에서 Elment 들을 필요에 따라 보이지 않게 해야할 때가 있다. CSS 에서는 display: hidden or display: none 속성을 사용하고, Bootstrap 에서는 d-none 라는 클래스 명을 사용하여 E..
espania.tistory.com
'Bootstrap4' 카테고리의 다른 글
| [Bootstrap] 레이아웃 / d-flex / justify-content / align-items / align-self (0) | 2020.04.03 |
|---|---|
| [Bootstrap] 레이아웃 / CSS3 flex-1 / direction / wrap (0) | 2020.04.02 |
| [Bootstrap] 레이아웃 / order / offset (0) | 2020.03.28 |
| [Bootstrap] 레이아웃 / COLUMN-2 /justify-content / align-items (0) | 2020.03.28 |
| [Bootstrap] 레이아웃 / COLUMN-1 (0) | 2020.03.28 |