3-1. 경계선
부트스트랩에는 CSS 코드를 사용하지 않고도 빠르게 요소의 경계선을 설정할 수 있는 클래스가 많이 있습니다.
■ 경계선 색상
부트스트랩에서 경계선 색상을 설정하는 클래스는 다음과 같습니다.
.border-primary, .border-secondary, .border-success, .border-danger, .border-warning,
.border-info,.border-light, .border-dark, .border-white
<style>
.box div { float: left; width: 70px; height: 70px; margin: 10px; }
</style>
<body>
<div class="container mt-3 box">
<h3>경계선 색상</h2>
<div class="border border-primary"></div>
<div class="border border-secondary"></div>
<div class="border border-success"></div>
<div class="border border-danger"></div>
<div class="border border-warning"></div>
<div class="border border-info"></div>
<div class="border border-light"></div>
<div class="border border-dark"></div>
<div class="border border-white"></div>
</div>
</body>
ex3-1.html의 실행 결과
■ 경계선 두께
부트스트랩에서 경계선 두께 설정하는 클래스는 다음과 같습니다.
.border-1, .border-2, .border-3, .border-4, .border-5
<style>
.box div { float: left; width: 70px; height: 70px; margin: 10px; }
</style>
</head>
<body>
<div class="container mt-3 box">
<div class="border border-1"></div>
<div class="border border-2"></div>
<div class="border border-3"></div>
<div class="border border-4"></div>
<div class="border border-5"></div>
</div>
</body>
ex3-2.html의 실행 결과
■ 경계선 종류
부트스트랩에서 경계선을 설정하는 클래스는 다음과 같습니다.
.border, .border-0, .border-top-0, .border-end-0, .border-bottom-0, .border-start-0
<style>
.box div { float: left; width: 70px; height: 70px; margin: 10px; }
</style>
<body>
<div class="container mt-3 box">
<h3>경계선 종류</h2>
<div class="border border-info"></div>
<div class="border border-0 border-info"></div>
<div class="border border-top-0 border-info"></div>
<div class="border border-end-0 border-info"></div>
<div class="border border-bottom-0 border-info"></div>
<div class="border border-start-0 border-info"></div>
</div>
</body>
ex3-3.html의 실행 결과
■ 둥근 모서리 경계선
부트스트랩에서 경계선의 모서리를 둥글게 설정하는 클래스는 다음과 같습니다.
.rounded, .rounded-top, .rounded-end, .rounded-bottom, .rounded-start, .rounded-circle, .rounded-pill
.rounded-0, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5
<style>
.box1 div, .box2 div { float:left; width:100px; height:70px; margin:10px; }
.box1::after { content:""; display:block; clear:both;}
.box1 div { background-color:skyblue; }
.box2 div { background-color:pink; }
</style>
<body>
<div class="container mt-3 box">
<h3>둥근 모서리 경계선</h2>
<div class="box1">
<div class="rounded"></div>
<div class="rounded-top"></div>
<div class="rounded-end"></div>
<div class="rounded-bottom"></div>
<div class="rounded-start"></div>
<div class="rounded-circle"></div>
<div class="rounded-pill"></div>
</div>
<div class="box2">
<div class="rounded-0"></div>
<div class="rounded-1"></div>
<div class="rounded-2"></div>
<div class="rounded-3"></div>
<div class="rounded-4"></div>
<div class="rounded-5"></div>
</div>
</div>
</body>
ex3-4.html의 실행 결과
