[Bootstrap] 웹사이트 만들기 - 블로그 섹션

블로그 섹션 결과물

PC 화면

 

패드 화면

 

모바일 화면

 

index.html

    <!-- 블로그 섹션 -->
    <section id="blog">
        <div class="container text-center overflow-hidden py-5">
            <div class="py-5">
                <h2 class="fw-bold mb-3">ART Cook 블로그</h2>
                <p class="lead text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, sequi.</p>
            </div>

            <div class="row pb-5 gy-4">
                <div class="col-md-6 col-lg-3">
                    <div class="card w-100" style="width: 18rem;">
                        <img src="images/blog1.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                        <h5 class="card-title fs-4">블로그 1</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-warning btn-sm">Go somewhere</a>
                        </div>
                    </div> 
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card w-100" style="width: 18rem;">
                        <img src="images/blog2.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                        <h5 class="card-title fs-4">블로그 2</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-warning btn-sm">Go somewhere</a>
                        </div>
                    </div> 
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card w-100" style="width: 18rem;">
                        <img src="images/blog3.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                        <h5 class="card-title fs-4">블로그 3</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-warning btn-sm">Go somewhere</a>
                        </div>
                    </div> 
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card w-100" style="width: 18rem;">
                        <img src="images/blog4.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                        <h5 class="card-title fs-4">블로그 4</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-warning btn-sm">Go somewhere</a>
                        </div>
                    </div> 
                </div>     
            </div>
        </div>
    </section>

 

<card>

부트스트랩의 카드 예제 활용

https://getbootstrap.com/docs/5.3/components/card/#about

Cards