[basic] BS4 - Jumbotron (BS점보트론) - 박스형 vs 와이드형

목차

1. Jumbotron (점보트론) 소개
2. Jumbotron (점보트론) 구문
3. Jumbotron (점보트론) 기본 CSS

Jumbotron (점보트론) 소개

 

특별한 내용이나 정보에 특별한주의를 기울이는 큰 회색 상자.

※ 다른 BS(요소/클래스) 포함 거의 모든 유효한 HTML 추가 가능.

 

Jumbotron (점보트론) 구문

[모서리 둥근 박스형 점보트론] - 기본형

 

<div class="container">

  <div class="jumbotron">

    <h1>홈짱닷컴</h1>      

    <p>Homzzang.com</p>

  </div>

  <p>코딩언어 그누보드・서버관리</p>      

</div>

 

예제보기

---

[각진 전체너비 점보트론] - .jumbotron-fluid 클래스 추가

 

<div class="jumbotron jumbotron-fluid">

  <div class="container">

    <h1>홈짱닷컴 Homzzang.com</h1>

    <p>코딩언어・그누보드・서버관리</p>

  </div>

</div>

 

결과보기 

Jumbotron (점보트론) 기본 CSS

[공통]

 

@media (min-width: 576px) {

    .jumbotron {

        padding: 4rem 2rem;

    }

}

 

---

[둥근 형태]

 

.jumbotron {

    padding: 2rem 1rem;

    margin-bottom: 2rem;

    background-color: #e9ecef;

    border-radius: .3rem;

}

 

---

[각진 형태]

 

.jumbotron-fluid {

    padding-right: 0;

    padding-left: 0;

    border-radius: 0;

}