Bootstrap 4 / Badge / New, 숫자 등 작은 라벨 만들기
Badge
새 글일 경우 New를 붙이거나, 글 목록에 댓글 개수를 보여주는 것을 보신 적이 있을 겁니다. Bootsrap의 Badge를 이용하면 쉽게 모양을 꾸밀 수 있습니다.
기본
클래스에 'badge badge-primary' 등을 붙이면 배지가 만들어집니다. 글자 크기는 em 단위로 정해져 있어서, 주위 글자 크기에 맞게 조정됩니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-12"> <h1>Badge</h1> <p> <span class="badge badge-primary">badge-primary</span> <span class="badge badge-secondary">badge-secondary</span> <span class="badge badge-success">badge-success</span> <span class="badge badge-danger">badge-danger</span> <span class="badge badge-warning">badge-warning</span> <span class="badge badge-info">badge-info</span> <span class="badge badge-light">badge-light</span> <span class="badge badge-dark">badge-dark</span> </p> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </body> </html>
badge-pill
클래스에 badge-pill를 추가하면 더 둥근 모양으로 만들어집니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-12"> <h1>Badge</h1> <p> <span class="badge badge-pill badge-primary">badge-primary</span> <span class="badge badge-pill badge-secondary">badge-secondary</span> <span class="badge badge-pill badge-success">badge-success</span> <span class="badge badge-pill badge-danger">badge-danger</span> <span class="badge badge-pill badge-warning">badge-warning</span> <span class="badge badge-pill badge-info">badge-info</span> <span class="badge badge-pill badge-light">badge-light</span> <span class="badge badge-pill badge-dark">badge-dark</span> </p> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </body> </html>
예제
글 목록에 라벨을 붙이는 간단한 예제입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-12"> <h1>Badge</h1> <ul class="list-group"> <li class="list-group-item">Lorem <span class="badge badge-primary">New</span></li> <li class="list-group-item">Ipsum <span class="badge badge-danger">10</span></li> </ul> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </body> </html>