생활속 보물창고 : 일상 속 유용한 정보를 공유드립니다.

최근 프로젝트를 진행하면서 정렬할 일들이 많아졌다. 본인은 프론트엔드를 기본적으로 다루는데는 괜찮았지만 세부적인 사항들(배치나 상세한 애니메이션)등에 어려움을 겪었다. 요소에 따라서 배치 방법이 달라지는 것도 어려움에 한몫을 했다. 본인은 주로 bootstrap css 라이브러리를 사용하는데 이번 포스팅에서는 bootstrap 버튼 정렬을 알아볼 것이다










# 오른쪽 정렬


<div class="form-row float-right">
      <button class="btn btn-primary" id="advanced-set-submit">제출하기</button>
  </div>


float-right 클래스를 부모 요소에 추가하면 된다




# 왼쪽 정렬


<div class="form-row float-left">
      <button class="btn btn-primary" id="advanced-set-submit">제출하기</button>
  </div>



마찬가지로 float-left 클래스를 부모 요소에 추가시켜주면 된다

반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band