# Bootstrap5 實用筆記
## bootstrap5 flex水平置中

    <header>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="logoWrap">
                        <img src="./assets/logo.png" alt="logo">
                        <h1>heiankyo</h1>
                    </div>
                </div>
            </div>
        </div>
    </header>

## bootstrapt5 flex水平置中+垂直置中

    <header>
        <div class="container">
            <div class="row page-section justify-content-center align-items-center">
                <div class="col-lg-8">
                    <div class="logoWrap">
                        <img src="./assets/logo.png" alt="logo">
                        <h1>heiankyo</h1>
                    </div>
                </div>
            </div>
        </div>
    </header>

.page-section {
    height:100vh;
}

## bootstrap5 圖片致中、文字致中
add text-center in parent element

<div class="col-lg-4 text-center">
    <img src="./assets/2021LOGO.png" alt="logo" class="logoImg">
    <a href="">
        <div class="reservation">預約課程</div>
    </a>
</div>

## bootstrap5 mobile尺寸隱藏
加入d-none d-md-block d-lg-block in col-lg-4在col-lg-4同一層

<div class="container">
    <div class="row">
        <div class="col-lg-4 d-none d-md-block d-lg-block">
            <h1 class="logo">仰式<br>
                漂浮
            </h1>
        </div>
        <div class="col-lg-4">
            <p class="about-1">
                我是飄飄，是一位從事微景觀創作的設計師，是一人品牌，
                所以從商品設計、課程規劃、授課等，
                都是自己來。我喜歡看漫畫、動畫（然後就會被叫阿宅），
                邊看邊在腦中收藏幻想系畫面。
                也喜歡去大自然走走，所有。
            </p>
        </div>
        <div class="col-lg-4">
            <p class="detail">Detail</p>
        </div>
    </div>
</div>
</section>