실무자를 위한 Bootstrap 5 필수 코드 스니펫 모음 | 개발노트

Bootstrap 5 소개

Bootstrap 5는 전 세계에서 가장 널리 사용되는 프론트엔드 오픈소스 툴킷의 최신 버전입니다. 이전 버전과 달리 jQuery 의존성을 완전히 제거하여 가볍고 빠른 렌더링 속도를 자랑하며, 최신 CSS 기능(Grid, Flexbox)을 기반으로 더욱 강력해진 반응형 레이아웃 시스템을 제공합니다. 또한, 방대한 유틸리티 클래스(Utility API)를 통해 별도의 CSS 작성 없이도 세밀한 디자인 수정이 가능합니다.

해당 스니펫은 공식 사이트에서는 메뉴 별로 클릭하여 찾기 번거로워서 쉽게 복사하여 사용할 수 있도록 변경된 코드 입니다. 내용을 추가 수정될 수 있습니다.

Starter Template (CDN)

새 페이지를 만들 때 기본으로 사용하는 골격입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 5 Demo</title>
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    
    <div class="container py-4">
      <h1>Hello, world!</h1>
    </div>

    <!-- Bootstrap JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Layout

Breakpoints & Containers

<!-- 기본 컨테이너 (반응형 폭) -->
<div class="container">
  Content
</div>

<!-- 100% 폭 컨테이너 -->
<div class="container-fluid">
  Full Width Content
</div>

Grid & Columns

<!-- 그리드 시스템 (Row & Col) -->
<div class="row">
  <div class="col">
    Auto Column
  </div>
  <div class="col-6">
    50% Width
  </div>
</div>

Gutters (간격)

<!-- g-3: 가로세로 간격 / gx: 가로 / gy: 세로 -->
<div class="row g-3">
  <div class="col-6">
    <div class="p-3 border bg-light">Col 1</div>
  </div>
  <div class="col-6">
    <div class="p-3 border bg-light">Col 2</div>
  </div>
</div>

Utilities & Z-index

<!-- Flex 정렬 및 Z-index -->
<div class="d-flex justify-content-center z-2 position-relative">
  <div>Centered Item</div>
</div>

CSS Grid (Option)

<!-- CSS Grid 활성화 시 사용 -->
<div class="grid">
  <div class="g-col-4">Column 4</div>
  <div class="g-col-4">Column 4</div>
  <div class="g-col-4">Column 4</div>
</div>

Content

Typography

<h1 class="display-1">Display 1</h1>
<p class="lead">Lead Paragraph</p>
<p class="text-muted">Muted Text</p>
<p class="fw-bold">Bold Text</p>
<p class="text-center">Center Text</p>

Images & Figures

<!-- 반응형 이미지 -->
<img src="..." class="img-fluid" alt="...">

<!-- 썸네일 -->
<img src="..." class="img-thumbnail" alt="...">

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded">
  <figcaption class="figure-caption">Caption</figcaption>
</figure>

Tables

<table class="table table-striped table-hover">
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Forms

Overview & Form Control

<div class="mb-3">
  <label for="email" class="form-label">Email</label>
  <input type="email" class="form-control" id="email">
</div>
<div class="mb-3">
  <label for="text" class="form-label">Textarea</label>
  <textarea class="form-control" id="text" rows="3"></textarea>
</div>

Select

<select class="form-select">
  <option selected>Open menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

Checks & Radios

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">Check</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="radio" id="radio1">
  <label class="form-check-label" for="radio1">Radio</label>
</div>

Range & Input Group

<label for="range" class="form-label">Range</label>
<input type="range" class="form-range" id="range">

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Floating Labels

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatInput" placeholder="name">
  <label for="floatInput">Email address</label>
</div>

Validation

<form class="needs-validation" novalidate>
  <div class="col-md-4">
    <label for="val" class="form-label">Input</label>
    <input type="text" class="form-control" id="val" required>
    <div class="valid-feedback">Good!</div>
  </div>
</form>

Components (A-L)

Accordion

<div class="accordion" id="accEx">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#col1">
        Item #1
      </button>
    </h2>
    <div id="col1" class="accordion-collapse collapse show" data-bs-parent="#accEx">
      <div class="accordion-body">Content</div>
    </div>
  </div>
</div>

Alerts & Badge & Breadcrumb

<div class="alert alert-primary" role="alert">
  Alert Message
</div>

<span class="badge text-bg-secondary">New</span>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active">Library</li>
  </ol>
</nav>

Buttons & Group

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Outline</button>

<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Card

<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Text</p>
    <a href="#" class="btn btn-primary">Go</a>
  </div>
</div>

Carousel

<div id="carEx" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Close Button & Collapse

<button type="button" class="btn-close"></button>

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collEx">
  Toggle
</button>
<div class="collapse" id="collEx">
  <div class="card card-body">Content</div>
</div>

Dropdowns

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>

List Group

<ul class="list-group">
  <li class="list-group-item active">Active</li>
  <li class="list-group-item">Item</li>
</ul>

Components (M-Z)

Modal

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modEx">
  Launch Modal
</button>

<div class="modal fade" id="modEx" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Body</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Navbar

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
      </ul>
    </div>
  </div>
</nav>

Navs & Tabs

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>

Offcanvas

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offEx">
  Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offEx">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">Content</div>
</div>

Pagination & Placeholders

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

Popovers & Tooltips

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" title="Title" data-bs-content="Content">
  Popover
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Tooltip">
  Tooltip
</button>

Progress & Spinners

<div class="progress">
  <div class="progress-bar"></div>
</div>

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Scrollspy & Toasts

<div data-bs-spy="scroll" data-bs-target="#navbar">...</div>

<div class="toast show">
  <div class="toast-header">
    <strong class="me-auto">Toast</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">Hello</div>
</div>