bootstrap.css 파일을 살펴보면

form-group은 기본적으로 아래와 같습니다.

.form-group {
  margin-bottom: 15px;
}


다만,

다른 CSS Selector와 연동해서

여러가지 속성을 재 정의해주는 역할을 합니다.


form-group은

폼 컨트롤들을 의미적으로 묶는 역할을 한다고 보시면 됩니다.

그런 후

인라인 폼이냐? 수평 폼이냐? 등을 다른 CSS Selector와 연관해서

결정합니다.


form-control 속성과 관련된 모양들은

Bootstrap  사이트에서 제공하는 정해진 모양이 있다보니,

저도

그 모양을 외우진 않고,


Visual Studio의 확장 기능인 Bootstrap Code Snippet Pack을 사용해서

구현하곤 합니다.

안재억 님이 쓰신 원문 글입니다.


안녕하세요, 이번에 bootstrap3강의를 들으면서 궁굼한 점이 생겨서 질문드립니다. <div class="form-group"> <label for="txtUserName" class="control-label col-md-2">이름</label> <div class="col-md-10"> <input type="text" name="na" id="na" class="form-control" /> </div> </div> 이 코드 안에서 첫번째 div태그에서 class속성에 form-group값을 주면 밑에 레이블태그나 인풋태그의 class속성값에 control-label, form-control 값들을 주지 않아도 하나의 태그처럼 묶이는 건가요? 만약 전체를 감싸는 div태그안에 form-group속성값만 있어도 여러개의 태그가 하나의 태그처럼 묶인다고 하면 레이블이나 인풋태그의 class속성값에 들어가는 값들은 bootstrap.css파일안에 있는 값들을 적용하기 위해서인가요?