S k i p t o m a i n c o n t e n t
<span class="latin" style="width:19px;height:19px;">B</span><span class="latin" style="width:19px;height:19px;">o</span><span class="latin" style="width:19px;height:19px;">o</span><span class="latin" style="width:19px;height:19px;">t</span><span class="latin" style="width:19px;height:19px;">s</span><span class="latin" style="width:19px;height:19px;">t</span><span class="latin" style="width:19px;height:19px;">r</span><span class="latin" style="width:19px;height:19px;">a</span><span class="latin" style="width:19px;height:19px;">p</span>
B o o t s t r a p
●
D o c s ●
E x a m p l e s ●
I c o n s ●
T h e m e s ●
B l o g ●
<span class="latin" style="width:19px;height:19px;">G</span><span class="latin" style="width:19px;height:19px;">i</span><span class="latin" style="width:19px;height:19px;">t</span><span class="latin" style="width:19px;height:19px;">H</span><span class="latin" style="width:19px;height:19px;">u</span><span class="latin" style="width:19px;height:19px;">b</span> G i t H u b
●
<span class="latin" style="width:19px;height:19px;">T</span><span class="latin" style="width:19px;height:19px;">w</span><span class="latin" style="width:19px;height:19px;">i</span><span class="latin" style="width:19px;height:19px;">t</span><span class="latin" style="width:19px;height:19px;">t</span><span class="latin" style="width:19px;height:19px;">e</span><span class="latin" style="width:19px;height:19px;">r</span> T w i t t e r
●
<span class="latin" style="width:19px;height:19px;">O</span><span class="latin" style="width:19px;height:19px;">p</span><span class="latin" style="width:19px;height:19px;">e</span><span class="latin" style="width:19px;height:19px;">n</span><span class="latin" style="display:block;width:19px;height:19px;"> </span><span class="latin" style="width:19px;height:19px;">C</span><span class="latin" style="width:19px;height:19px;">o</span><span class="latin" style="width:19px;height:19px;">l</span><span class="latin" style="width:19px;height:19px;">l</span><span class="latin" style="width:19px;height:19px;">e</span><span class="latin" style="width:19px;height:19px;">c</span><span class="latin" style="width:19px;height:19px;">t</span><span class="latin" style="width:19px;height:19px;">i</span><span class="latin" style="width:19px;height:19px;">v</span><span class="latin" style="width:19px;height:19px;">e</span> O p e n C o l l e c t i v e
●
B o o t s t r a p B o o t s t r a p v 5 . 3 ( s w i t c h t o o t h e r v e r s i o n s )
●
L a t e s t ( 5 . 3 . x )
●
v 5 . 2 . 3 ●
v 5 . 1 . 3 ●
v 5 . 0 . 2 ● v 4 . 6 . x ● v 3 . 4 . 1 ● v 2 . 3 . 2 ● A l l v e r s i o n s
●
T o g g l e t h e m e
●
L i g h t
●
D a r k
●
A u t o
N e w !
N e v e r - E n d i n g S u p p o r t f o r B o o t s t r a p
B u i l d f a s t , r e s p o n s i v e s i t e s w i t h B o o t s t r a p
P o w e r f u l , e x t e n s i b l e , a n d f e a t u r e - p a c k e d f r o n t e n d t o o l k i t . B u i l d a n d c u s t o m i z e w i t h S a s s , u t i l i z e p r e b u i l t g r i d s y s t e m a n d c o m p o n e n t s , a n d b r i n g p r o j e c t s t o l i f e w i t h p o w e r f u l J a v a S c r i p t p l u g i n s .
npm i bootstrap@5.3.3
R e a d t h e d o c s
C u r r e n t l y v 5 . 3 . 3 · D o w n l o a d · A l l r e l e a s e s G e t s t a r t e d a n y w a y y o u w a n t
J u m p r i g h t i n t o b u i l d i n g w i t h B o o t s t r a p — u s e t h e C D N , i n s t a l l i t v i a p a c k a g e m a n a g e r , o r d o w n l o a d t h e s o u r c e c o d e .
R e a d i n s t a l l a t i o n d o c s
I n s t a l l v i a p a c k a g e m a n a g e r
I n s t a l l B o o t s t r a p ’ s s o u r c e S a s s a n d J a v a S c r i p t f i l e s v i a n p m , R u b y G e m s , C o m p o s e r , o r M e t e o r . P a c k a g e m a n a g e d i n s t a l l s d o n ’ t i n c l u d e d o c u m e n t a t i o n o r o u r f u l l b u i l d s c r i p t s . Y o u c a n a l s o u s e a n y d e m o f r o m o u r E x a m p l e s r e p o t o q u i c k l y j u m p s t a r t B o o t s t r a p p r o j e c t s .
npm install bootstrap@5.3.3 gem install bootstrap -v 5.3.3
R e a d o u r i n s t a l l a t i o n d o c s f o r m o r e i n f o a n d a d d i t i o n a l p a c k a g e m a n a g e r s .
I n c l u d e v i a C D N
W h e n y o u o n l y n e e d t o i n c l u d e B o o t s t r a p ’ s c o m p i l e d C S S o r J S , y o u c a n u s e j s D e l i v r . S e e i t i n a c t i o n w i t h o u r s i m p l e q u i c k s t a r t , o r b r o w s e t h e e x a m p l e s t o j u m p s t a r t y o u r n e x t p r o j e c t . Y o u c a n a l s o c h o o s e t o i n c l u d e P o p p e r a n d o u r J S s e p a r a t e l y .
< link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin = "anonymous" ></ script > R e a d o u r g e t t i n g s t a r t e d g u i d e s G e t a j u m p o n i n c l u d i n g B o o t s t r a p ' s s o u r c e f i l e s i n a n e w p r o j e c t w i t h o u r o f f i c i a l g u i d e s .
W e b p a c k
P a r c e l
V i t e
C u s t o m i z e e v e r y t h i n g w i t h S a s s
B o o t s t r a p u t i l i z e s S a s s f o r a m o d u l a r a n d c u s t o m i z a b l e a r c h i t e c t u r e . I m p o r t o n l y t h e c o m p o n e n t s y o u n e e d , e n a b l e g l o b a l o p t i o n s l i k e g r a d i e n t s a n d s h a d o w s , a n d w r i t e y o u r o w n C S S w i t h o u r v a r i a b l e s , m a p s , f u n c t i o n s , a n d m i x i n s .
L e a r n m o r e a b o u t c u s t o m i z i n g
I n c l u d e a l l o f B o o t s t r a p ’ s S a s s I m p o r t o n e s t y l e s h e e t a n d y o u ' r e o f f t o t h e r a c e s w i t h e v e r y f e a t u r e o f o u r C S S . // Variable overrides first
$primary : #900 ;
$enable-shadows : true ;
$prefix : "mo-" ;
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap" ;
L e a r n m o r e a b o u t o u r g l o b a l S a s s o p t i o n s .
I n c l u d e w h a t y o u n e e d T h e e a s i e s t w a y t o c u s t o m i z e B o o t s t r a p — i n c l u d e o n l y t h e C S S y o u n e e d . // Functions first
@import "../node_modules/bootstrap/scss/functions" ;
// Variable overrides second
$primary : #900 ;
$enable-shadows : true ;
$prefix : "mo-" ;
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables" ;
@import "../node_modules/bootstrap/scss/variables-dark" ;
@import "../node_modules/bootstrap/scss/maps" ;
@import "../node_modules/bootstrap/scss/mixins" ;
@import "../node_modules/bootstrap/scss/root" ;
// Optional components
@import "../node_modules/bootstrap/scss/utilities" ;
@import "../node_modules/bootstrap/scss/reboot" ;
@import "../node_modules/bootstrap/scss/containers" ;
@import "../node_modules/bootstrap/scss/grid" ;
@import "../node_modules/bootstrap/scss/helpers" ;
@import "../node_modules/bootstrap/scss/utilities/api" ;
L e a r n m o r e a b o u t u s i n g B o o t s t r a p w i t h S a s s .
B u i l d a n d e x t e n d i n r e a l - t i m e w i t h C S S v a r i a b l e s
B o o t s t r a p 5 i s e v o l v i n g w i t h e a c h r e l e a s e t o b e t t e r u t i l i z e C S S v a r i a b l e s f o r g l o b a l t h e m e s t y l e s , i n d i v i d u a l c o m p o n e n t s , a n d e v e n u t i l i t i e s . W e p r o v i d e d o z e n s o f v a r i a b l e s f o r c o l o r s , f o n t s t y l e s , a n d m o r e a t a : r o o t l e v e l f o r u s e a n y w h e r e . O n c o m p o n e n t s a n d u t i l i t i e s , C S S v a r i a b l e s a r e s c o p e d t o t h e r e l e v a n t c l a s s a n d c a n e a s i l y b e m o d i f i e d .
L e a r n m o r e a b o u t C S S v a r i a b l e s
U s i n g C S S v a r i a b l e s U s e a n y o f o u r g l o b a l : r o o t v a r i a b l e s t o w r i t e n e w s t y l e s . C S S v a r i a b l e s u s e t h e v a r ( - - b s - v a r i a b l e N a m e ) s y n t a x a n d c a n b e i n h e r i t e d b y c h i l d r e n e l e m e n t s . .component {
color : var ( -- bs-gray-800 );
background-color : var ( -- bs-gray-100 );
border : 1 px solid var ( -- bs-gray-200 );
border-radius : .25 rem ;
}
.component-header {
color : var ( -- bs-purple );
} C u s t o m i z i n g v i a C S S v a r i a b l e s O v e r r i d e g l o b a l , c o m p o n e n t , o r u t i l i t y c l a s s v a r i a b l e s t o c u s t o m i z e B o o t s t r a p j u s t h o w y o u l i k e . N o n e e d t o r e d e c l a r e e a c h r u l e , j u s t a n e w v a r i a b l e v a l u e . body {
--bs-body-font-family : var ( -- bs-font-monospace );
--bs-body-line-height : 1 .4 ;
--bs-body-bg : var ( -- bs-gray-100 );
}
.table {
--bs-table-color : var ( -- bs-gray-600 );
--bs-table-bg : var ( -- bs-gray-100 );
--bs-table-border-color : transparent ;
} C o m p o n e n t s , m e e t t h e U t i l i t y A P I
N e w i n B o o t s t r a p 5 , o u r u t i l i t i e s a r e n o w g e n e r a t e d b y o u r U t i l i t y A P I . W e b u i l t i t a s a f e a t u r e - p a c k e d S a s s m a p t h a t c a n b e q u i c k l y a n d e a s i l y c u s t o m i z e d . I t ' s n e v e r b e e n e a s i e r t o a d d , r e m o v e , o r m o d i f y a n y u t i l i t y c l a s s e s . M a k e u t i l i t i e s r e s p o n s i v e , a d d p s e u d o - c l a s s v a r i a n t s , a n d g i v e t h e m c u s t o m n a m e s .
Q u i c k l y c u s t o m i z e c o m p o n e n t s A p p l y a n y o f o u r i n c l u d e d u t i l i t y c l a s s e s t o o u r c o m p o n e n t s t o c u s t o m i z e t h e i r a p p e a r a n c e , l i k e t h e n a v i g a t i o n e x a m p l e b e l o w . T h e r e a r e h u n d r e d s o f c l a s s e s a v a i l a b l e — f r o m p o s i t i o n i n g a n d s i z i n g to c o l o r s a n d e f f e c t s . M i x t h e m w i t h C S S v a r i a b l e o v e r r i d e s f o r e v e n m o r e c o n t r o l . ●
H o m e ●
P r o f i l e ●
C o n t a c t ●
H o m e ●
P r o f i l e ●
C o n t a c t < ul class = "nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id = "pillNav2" role = "tablist" style = "--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);" >
< li class = "nav-item" role = "presentation" >
< button class = "nav-link active rounded-5" id = "home-tab2" data-bs-toggle = "tab" type = "button" role = "tab" aria-selected = "true" > Home</ button >
</ li >
< li class = "nav-item" role = "presentation" >
< button class = "nav-link rounded-5" id = "profile-tab2" data-bs-toggle = "tab" type = "button" role = "tab" aria-selected = "false" > Profile</ button >
</ li >
< li class = "nav-item" role = "presentation" >
< button class = "nav-link rounded-5" id = "contact-tab2" data-bs-toggle = "tab" type = "button" role = "tab" aria-selected = "false" > Contact</ button >
</ li >
</ ul >
E x p l o r e c u s t o m i z e d c o m p o n e n t s
C r e a t e a n d e x t e n d u t i l i t i e s U s e B o o t s t r a p ' s u t i l i t y A P I t o m o d i f y a n y o f o u r i n c l u d e d u t i l i t i e s o r c r e a t e y o u r o w n c u s t o m u t i l i t i e s f o r a n y p r o j e c t . I m p o r t B o o t s t r a p f i r s t , t h e n u s e S a s s m a p f u n c t i o n s t o m o d i f y , a d d , o r r e m o v e u t i l i t i e s . @import "bootstrap/scss/bootstrap" ;
$utilities : map-merge (
$utilities ,
(
"cursor" : (
property : cursor ,
class : cursor ,
responsive : true ,
values : auto pointer grab ,
)
)
);
E x p l o r e t h e u t i l i t y A P I
P o w e r f u l J a v a S c r i p t p l u g i n s w i t h o u t j Q u e r y
A d d t o g g l e a b l e h i d d e n e l e m e n t s , m o d a l s a n d o f f c a n v a s m e n u s , p o p o v e r s a n d t o o l t i p s , a n d s o m u c h m o r e — a l l w i t h o u t j Q u e r y . B o o t s t r a p ' s J a v a S c r i p t i s H T M L - f i r s t , m e a n i n g m o s t p l u g i n s a r e a d d e d w i t h d a t a a t t r i b u t e s i n y o u r H T M L . N e e d m o r e c o n t r o l ? I n c l u d e i n d i v i d u a l p l u g i n s p r o g r a m m a t i c a l l y .
L e a r n m o r e a b o u t B o o t s t r a p J a v a S c r i p t
D a t a a t t r i b u t e A P I W h y w r i t e m o r e J a v a S c r i p t w h e n y o u c a n w r i t e H T M L ? N e a r l y a l l o f B o o t s t r a p ' s J a v a S c r i p t p l u g i n s f e a t u r e a f i r s t - c l a s s d a t a A P I , a l l o w i n g y o u t o u s e J a v a S c r i p t j u s t b y a d d i n g d a t a a t t r i b u t e s .
D r o p d o w n
● D r o p d o w n i t e m ● D r o p d o w n i t e m ● D r o p d o w n i t e m
< div class = "dropdown" >
< button class = "btn btn-primary dropdown-toggle" type = "button" data-bs-toggle = "dropdown" aria-expanded = "false" >
Dropdown
</ button >
< ul class = "dropdown-menu" >
< li >< button class = "dropdown-item" type = "button" > Dropdown item</ button ></ li >
< li >< button class = "dropdown-item" type = "button" > Dropdown item</ button ></ li >
< li >< button class = "dropdown-item" type = "button" > Dropdown item</ button ></ li >
</ ul >
</ div >
L e a r n m o r e a b o u t o u r J a v a S c r i p t a s m o d u l e s a n d u s i n g t h e p r o g r a m m a t i c A P I .
C o m p r e h e n s i v e s e t o f p l u g i n s B o o t s t r a p f e a t u r e s a d o z e n p l u g i n s t h a t y o u c a n d r o p i n t o a n y p r o j e c t . D r o p t h e m i n a l l a t o n c e , o r c h o o s e j u s t t h e o n e s y o u n e e d . A l e r t
S h o w a n d h i d e a l e r t m e s s a g e s t o y o u r u s e r s .
B u t t o n
P r o g r a m m a t i c a l l y c o n t r o l t h e a c t i v e s t a t e f o r b u t t o n s .
C a r o u s e l
A d d s l i d e s h o w s t o a n y p a g e , i n c l u d i n g s u p p o r t f o r c r o s s f a d e .
C o l l a p s e
E x p a n d a n d c o l l a p s e a r e a s o f c o n t e n t , o r c r e a t e a c c o r d i o n s .
D r o p d o w n
C r e a t e m e n u s o f l i n k s , a c t i o n s , f o r m s , a n d m o r e .
M o d a l
A d d f l e x i b l e a n d r e s p o n s i v e d i a l o g s t o y o u r p r o j e c t .
O f f c a n v a s
B u i l d a n d t o g g l e h i d d e n s i d e b a r s i n t o a n y p a g e .
P o p o v e r
C r e a t e c u s t o m o v e r l a y s . B u i l t o n P o p p e r .
S c r o l l s p y
A u t o m a t i c a l l y u p d a t e a c t i v e n a v l i n k s b a s e d o n p a g e s c r o l l .
T a b
A l l o w B o o t s t r a p n a v c o m p o n e n t s t o t o g g l e c o n t e n t s .
T o a s t
S h o w a n d h i d e n o t i f i c a t i o n s t o y o u r v i s i t o r s .
T o o l t i p
R e p l a c e b r o w s e r t o o l t i p s w i t h c u s t o m o n e s . B u i l t o n P o p p e r .
P e r s o n a l i z e i t w i t h B o o t s t r a p I c o n s
B o o t s t r a p I c o n s i s a n o p e n s o u r c e S V G i c o n l i b r a r y f e a t u r i n g o v e r 1 , 8 0 0 g l y p h s , w i t h m o r e a d d e d e v e r y r e l e a s e . T h e y ' r e d e s i g n e d t o w o r k i n a n y p r o j e c t , w h e t h e r y o u u s e B o o t s t r a p i t s e l f o r n o t . U s e t h e m a s S V G s o r i c o n f o n t s — b o t h o p t i o n s g i v e y o u v e c t o r s c a l i n g a n d e a s y c u s t o m i z a t i o n v i a C S S .
G e t B o o t s t r a p I c o n s
M a k e i t y o u r s w i t h o f f i c i a l B o o t s t r a p T h e m e s
T a k e B o o t s t r a p t o t h e n e x t l e v e l w i t h p r e m i u m t h e m e s f r o m t h e o f f i c i a l B o o t s t r a p T h e m e s m a r k e t p l a c e . T h e m e s a r e b u i l t o n B o o t s t r a p a s t h e i r o w n e x t e n d e d f r a m e w o r k s , r i c h w i t h n e w c o m p o n e n t s a n d p l u g i n s , d o c u m e n t a t i o n , a n d p o w e r f u l b u i l d t o o l s .
B r o w s e B o o t s t r a p T h e m e s
<span class="latin" style="width:19px;height:19px;">B</span><span class="latin" style="width:19px;height:19px;">o</span><span class="latin" style="width:19px;height:19px;">o</span><span class="latin" style="width:19px;height:19px;">t</span><span class="latin" style="width:19px;height:19px;">s</span><span class="latin" style="width:19px;height:19px;">t</span><span class="latin" style="width:19px;height:19px;">r</span><span class="latin" style="width:19px;height:19px;">a</span><span class="latin" style="width:19px;height:19px;">p</span> B o o t s t r a p
● D e s i g n e d a n d b u i l t w i t h a l l t h e l o v e i n t h e w o r l d b y t h e B o o t s t r a p t e a m w i t h t h e h e l p o f o u r c o n t r i b u t o r s . ● C o d e l i c e n s e d M I T , d o c s C C B Y 3 . 0 . ● C u r r e n t l y v 5 . 3 . 3 .
L i n k s ● H o m e ● D o c s ● E x a m p l e s ● I c o n s ● T h e m e s ● B l o g ● S w a g S t o r e
G u i d e s ● G e t t i n g s t a r t e d ● S t a r t e r t e m p l a t e ● W e b p a c k ● P a r c e l ● V i t e
P r o j e c t s ● B o o t s t r a p 5 ● B o o t s t r a p 4 ● I c o n s ● R F S ● E x a m p l e s r e p o
C o m m u n i t y ● I s s u e s ● D i s c u s s i o n s ● C o r p o r a t e s p o n s o r s ● O p e n C o l l e c t i v e ● S t a c k O v e r f l o w
Webpack
Parcel
Vite
Bootstrap
●Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
●Code licensed MIT, docs CC BY 3.0.
●Currently v5.3.3.