12 웹 브라우저에 가서 새로 고침하면 사이트 정보가 표시됩니다. 그런데 콘텐트 영역이 비좁네요. 헤더-푸터 레이아웃과 상관없지만 보기 좋게 하기 위해 여기 간격을 넓혀 보겠습니다.

그림 2-34 사이트 정보 추가 확인

13 코드의 콘텐트 부분을 <div></div> 태그로 감싸고 부트스트랩에서 제공하는 class 속성을 추가합니다. 배경 색상은 어둡게(bg-dark), 텍스트 색상은 하얗게(text-white), 상하좌우 여백은 5배만큼(p-5) 줍니다.

<!-- content -->

<div class="bg-dark text-white p-5">
    <h1>{{username}}님, 반갑습니다!</h1>
</div>