Starters
Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz.
CDN starter
Instantly include Bootstrap's compiled CSS and JavaScript via the jsDelivr CDN.
Sass & JS
Use npm to import and compile Bootstrap's Sass with Autoprefixer and Stylelint, plus our bundled JavaScript.
Sass & ESM JS
Import and compile Bootstrap's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim.
Bootstrap color modes
Import and compile Bootstrap's Sass with Stylelint, and the Bootstrap color modes.
Bootstrap Icons
Import and compile Bootstrap's Sass with Stylelint, PurgeCSS, and the Bootstrap Icons web font.
React
Import and bundle Bootstrap's source Sass and JavaScript with React, Next.js, and React Bootstrap.
스니펫
사용자 지정 CSS 등을 사용하여 기존 컴포넌트 및 유틸리티를 기반으로 하는 사이트 및 앱 구축을 위한 일반적인 패턴입니다.
Headers
브랜드, 내비게이션, 검색 등을 헤더 컴포넌트로 표시합니다.
Heroes
명확한 클릭 유도 버튼 (CTA)을 특징으로 하는 히어로로 홈페이지의 무대를 장식합니다.
Features
마케팅 콘텐츠의 기능, 이점 또는 다른 세부 정보를 설명합니다.
Sidebars
오프캔버스 또는 다중 열 레이아웃에 이상적인 일반적인 내비게이션 패턴입니다.
Footers
크든 작든 멋진 푸터로 모든 페이지를 강력하게 마무리합니다.
Dropdowns
필터, 아이콘, 사용자 정의 스타일 등으로 드롭다운 경험을 향상시킵니다.
List groups
모든 콘텐츠에 대한 유틸리티 및 사용자 정의 스타일로 목록 그룹을 확장합니다.
Modals
기능 둘러보기에서 대화 상자까지 모든 목적에 맞게 모달을 변환합니다.
Badges
Make badges work with custom inner HTML and new looks.
Breadcrumbs
Integrate custom icons and create stepper components.
Buttons
Create custom buttons for just about any use case with utilities.
Jumbotrons
Create modernized versions of the classic Bootstrap component.
사용자 지정 컴포넌트
사람들이 Bootstrap을 빠르게 시작하고 프레임워크에 추가하기 위한 모범 사례를 시연하는 데에 도움이 되는 새로운 컴포넌트 및 템플릿입니다.
Album
사진 갤러리, 포트폴리오 등을 위한 단순한 단일 페이지 템플릿입니다.
Pricing
카드로 만들어지고 맞춤 헤더와 푸터가 있는 가격 페이지 예시입니다.
Checkout
폼 컴포넌트 및 유효성 검사 기능을 보여주는 사용자 정의 결제 페이지 양식입니다.
Product
확장 그리드 및 이미지 작업이 포함된 제품 중심의 깔끔한 마케팅 페이지입니다.
Cover
심플하고 아름다운 홈페이지 제작을 위한 단일 페이지 템플릿입니다.
Carousel
내비바와 캐러셀을 사용자 지정한 다음 몇 가지 새로운 컴포넌트를 추가했습니다.
Blog
헤더, 내비게이션, 추천 콘텐츠가 있는 매거진 형식의 블로그 템플릿입니다.
Dashboard
고정 사이드바 및 내비바가 있는 기본적인 관리자 대시보드 셸입니다.
Sign-in
간단한 로그인 폼을 위한 사용자 정의 폼 레이아웃 및 디자인입니다.
Sticky footer
페이지 내용이 짧은 경우 표시 영역 하단에 바닥글을 첨부합니다.
Sticky footer navbar
고정된 상단 내비바를 사용하여 뷰포트 하단에 바닥글을 첨부합니다.
Jumbotron
유틸리티를 사용하여 Bootstrap 4의 점보트론을 다시 만들고 향상시켰습니다.
프레임워크
Bootstrap에서 제공하는 내장 구성 요소의 사용 구현에 중점을 둔 예시입니다.
Starter template
컴파일된 CSS와 JavaScript가 있는 기본적인 템플릿입니다.
Grid
4단계 계층, 중첩 등이 모두 포함된 다수의 그리드 레이아웃 예시입니다.
Cheatsheet
거의 모든 Bootstrap 컴포넌트가 포함되어 있습니다.
Cheatsheet RTL
거의 모든 Bootstrap 컴포넌트가 포함되어 있습니다. (RTL)
네비바
기본 내비바 컴포넌트를 사용하여 이동, 배치 및 확장하는 방법을 보여줍니다.
Navbars
네비바에 대한 모든 반응형 및 컨테이너 옵션 예시입니다.
Navbars offcanvas
Same as the Navbars example, but with our offcanvas component.
Navbar static
추가 콘텐츠가 있는 정적인 상단 내비바의 단일 내비바 예시입니다.
Navbar fixed
추가 콘텐츠가 있는 상단에 고정된 내비바의 단일 내비바 예시입니다.
Navbar bottom
추가 콘텐츠가 있는 하단에 고정된 내비바의 단일 내비바 예시입니다.
Offcanvas navbar
펼칠 수 있는 내비바를 슬라이딩 오프캔버스 메뉴로 전환합니다 (오프캔버스 컴포넌트를 사용하지 않음).
RTL
수정된 사용자 지정 컴포넌드 예시와 함께 작동하는 Bootstrap의 RTL 버전을 확인해보세요.
RTL 기능은 아직 실험적이며 피드백으로 발전할 것입니다. 무언가를 발견했거나 개선할 점이 있나요?
Album RTL
사진 갤러리, 포트폴리오 등을 위한 단순한 단일 페이지 템플릿입니다.
Checkout RTL
폼 컴포넌트 및 유효성 검사 기능을 보여주는 사용자 정의 결제 페이지 양식입니다.
Carousel RTL
내비바와 캐러셀을 사용자 지정한 다음 몇 가지 새로운 컴포넌트를 추가했습니다.
Blog RTL
헤더, 내비게이션, 추천 콘텐츠가 있는 매거진 형식의 블로그 템플릿입니다.
Dashboard RTL
고정 사이드바 및 내비바가 있는 기본적인 관리자 대시보드 셸입니다.
Bootstrap Themes로 더 나아가기
더 필요한 것이 있으신가요? Bootstrap 공식 테마 마켓플레이스의 프리미엄 테마를 통해서 Bootstrap를 다음 단계로 올려놓으세요. Bootstrap을 기반으로 확장된 고유의 프레임워크, 풍부한 새로운 컴포넌트 및 플러그인, 문서, 강력한 빌드 도구로 만들어졌습니다.
테마 탐색하기