Notice
Recent Posts
Recent Comments
Links
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
In Total
관리 메뉴

A Joyful AI Research Journey🌳😊

Bootstrap: item을 상단으로 붙이기: align-items-start 본문

💻Bootcamp Self-Study Revision✨/HTML5, CSS, Bootstrap, JSP

Bootstrap: item을 상단으로 붙이기: align-items-start

yjyuwisely 2023. 6. 2. 12:40

현재 팀 프로젝트 (3)에서 만들고 있는 화면인데

Bootstrap ver.5를 이용해서 item을 상단으로 붙이려면 

align-items-start을 사용한다.

사용한 코드)

<div
    class="page-wrapper d-flex align-items-start justify-content-center">
    <div class="content">
        <div class="row justify-content-center">
            <div class="col-lg-6 card shadow rounded-4 border-0">
                <div class="card-body">
                    <div class="row">
                        <div class="page-header">
                            <div class="page-title text-center">
                                <h3 class="fs-3">입고 등록</h3>
                                <!-- <h6>Create new product</h6> -->
                            </div>
                        </div>
                        <div class="col-lg-12 col-sm-6 col-12">
                            <div class="form-group">
                                <label>물품명</label> <input type="text" class="inputStyle">
                            </div>
                        </div>
                        <br>
                        <div class="col-lg-12 col-sm-6 col-12">
                            <div class="form-group">
                                <label>분류</label> <input type="text" class="inputStyle">
                            </div>
                        </div>
                        <br>
                        <div class="col-lg-12 col-sm-6 col-12">
                            <div class="form-group">
                                <label>현재고</label> <input type="text" class="inputStyle">
                            </div>
                        </div>
                        <br>
                        <div class="col-lg-12 col-sm-6 col-12">
                            <div class="form-group">
                                <label>들어온 재고</label> <input type="text" class="inputStyle">
                            </div>
                        </div>
                        <br>
                    </div>
                    <div class="col-lg-12 text-center">
                        <a href="javascript:void(0);" class="btn btn-submit fs-5 fw-bolder d-inline-block col-12">재고
                            등록하기</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

 

728x90
반응형
저작자표시 비영리 동일조건

'💻Bootcamp Self-Study Revision✨ > HTML5, CSS, Bootstrap, JSP' 카테고리의 다른 글

Bootstrap: 모바일로 봤을 때 테이블의 여러 칼럼이 세로로 일렬로 정렬되게 만들기 col-sm-12  (0) 2023.06.18
CSS: 화면 절반만 스크롤바 가능하게 만들기 overflow-y:auto 이용하기  (0) 2023.05.22
CSS: 모바일로 봤을 때 배경 화면을 하단에 고정하기  (0) 2023.05.17
Bootstrap: toggle bar 우측 고정: ms-auto 사용하기  (0) 2023.05.09
'💻Bootcamp Self-Study Revision✨/HTML5, CSS, Bootstrap, JSP' Related Articles more
Comments