부트스트랩 레이아웃 위치
float위치설정
좌/우로 배치하는 원하는 요소에 float를 부트스트랩으로 간편하게 적용할 수 있습니다.
<element class="float-left"></element>
<element class="float-right"></element>float 클래스 대상의 부모에 clearfix를 적용하여 float오류를 해결합니다.
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>형제요소에 반복해서 float를 사용했을 시 특정 대상부터 float를 해제합니다.
<div class="float-left">Float left1</div>
<div class="float-left">Float left2</div>
<div class="float-none">Float none</div>margin:0 auto 가운데정렬
형제 요소 없이 가운데로 배치하고 싶은 대상에는 margin:0 auto를 다음과 같이 입력할 수 있습니다.
<element class="mx-auto"></element>
<!--가운데정렬 대상이 인라인 요소일때는 d-block를 추가해서 작성합니다.-->
<element class="mx-auto d-block"></element>position위치 설정
부트스트랩을 이용하여 position 속성으로 위치를 설정할 수 있습니다.
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div><div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>W/H 크기 설정
<div class="w-25">Width 25%</div>
<div class="w-50">Width 50%</div>
<div class="w-75">Width 75%</div>
<div class="w-100">Width 100%</div>
<div class="mw-100">Max Width 100%</div><div style="height:200px">
<div class="h-25">Height 25%</div>
<div class="h-50">Height 50%</div>
<div class="h-75">Height 75%</div>
<div class="h-100">Height 100%</div>
<div class="mh-100">Max Height 100%</div>
</div>display 설정
<div class="d-inline-block">Inline block DIV.</div>
<div class="d-inline">Inline DIV.</div>
<div class="d-none">Hidden DIV</div>
<div class="d-block">block DIV</div>
Comments, Trackbacks