wrkbrs

Difference between input-group and form-group 본문

Bootstrap

Difference between input-group and form-group

zcarc 2019. 1. 15. 05:59

Input groups are extended Form Controls. Using input groups you can easily prepend and append text or buttons to the text-based inputs. For example, you can add the $ symbol, @ for a Twitter username, or anything else as required.

Form groups are used to wrap labels and form controls in a div to get optimum spacing between the label and the control.

Therefore, use both form-group and input-group as required. Do wrap your label and input in a form-group tag. If any of your input field required to prepended/appended with text/button, wrap the control with input-group. Below is the example, combining both of them. Hope this helps

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<body>
    <div class="container-fluid justify-content-center">
        <form role="form" class="pt-3">
            <div class="form-group row">
                <label for="inputfield1" class="col-sm-2 control-label">Generic input</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputfield1" placeholder="Generic input..." />
                </div>
            </div><!-- .form-group -->
            <div class="form-group row">
                <label for="inputfield2" class="col-sm-2 control-label">Money value</label>
                <div class="input-group col-sm-10">
                    <span class="input-group-prepend input-group-text">$</span>
                    <input type="text" class="form-control" id="inputfield2" placeholder="Money value..." />
                    <span class="input-group-append input-group-text">.00</span>
                </div>
            </div><!-- .form-group -->
            <div class="form-group row">
                <label for="inputfield3" class="col-sm-2 control-label">Username</label>
                <div class="input-group col-sm-10">
                    <span class="input-group-prepend input-group-text">@</span>
                    <input type="text" class="form-control" id="inputfield3" placeholder="Username..." />
                </div>
            </div><!-- .form-group -->
        </form>
    </div>
</body>






https://stackoverflow.com/questions/36835615/difference-between-input-group-and-form-group

저작자표시 비영리 변경금지

'Bootstrap' 카테고리의 다른 글

패널 안에 있는 이미지 가운데 정렬  (0) 2019.01.21
부트스트랩 Form 가운데 정렬  (0) 2019.01.21
폼 그룹 너비 맞추기 how to format bootstrap input form - all labels with the same width  (0) 2019.01.21
부트스트랩4 튜토리얼  (0) 2018.12.30
부트스트랩 강좌 티스토리  (0) 2018.10.30
'Bootstrap' Related Articles more