Accordion
Accordion indicator in left position
Basic Alerts
Bootstrap default style
Solid color alerts
add .solid class to change the solid color.
Badges Size
Default Bootstrap Badges
Badges Light
Default Bootstrap Badges
1 2 3 4 5 6 7 8
Badges
Default Bootstrap Badges
Pill Badge
add .badge-pill to change the style
Buttons
Default button style
Buttons
Button Light style
Outline Buttons
Default outline button style
Button Sizes
add .btn-lg .btn-sm .btn-xs to change the style
Outline Button Sizes
add .btn-lg .btn-sm .btn-xs to change the style
Button Right icons
add .btn-icon-right to change the style
Button Left icons
add .btn-icon-left to change the style
Dropdown Button
Default dropdown button style
Disabled Button
add disabled="disabled" to change the style
Socia icon Buttons with Name
add .btn-facebook, .btn-twitter, .btn-youtube... to change the style
Button group
Default Button group style
Button toolbar
Default Button toolbar style
Button Sizing
Default button size style
Button Nesting
Default button nesting style
Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list
Dropdown Divider
The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border
Dropdown Header
The .dropdown-header class is used to add headers inside the dropdown menu
Disable and Active items
The .dropdown-header class is used to add headers inside the dropdown menu
Align Right
To right-align the dropdown, add the .dropdown-menu-right class to the element with .dropdown-menu
Dropup
The .dropup class makes the dropdown menu expand upwards instead of downwards
dropend
Trigger dropdown menus at the right of the elements by adding .dropend to the parent element
Dropleft
Trigger dropdown menus at the right of the elements by adding .dropleft to the parent element
Button Dropdowns
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Custom style
Use .custom-dropdown this class for this style
Card with title
He lay on his armour-like back, and if he lifted his head a little he
could see his brown belly, slightly domed and divided by arches into
stiff
sections. The bedding was hardly able to cover it and
seemed ready to slide off any moment.
Card with title and subtitle
card subtitle here
He lay on his armour-like back, and if he lifted his head a little he
could see his brown belly, slightly domed and divided by arches into
stiff
sections. The bedding was hardly able to cover it and
seemed ready to slide off any moment.
Card with title and footer
He lay on his armour-like back, and if he lifted his head a little he
could see his brown belly, slightly domed and divided by arches into
stiff
sections. The bedding was hardly able to cover it and
seemed ready to slide off any moment.
Card with title, subtitle and footer
card subtitle here
He lay on his armour-like back, and if he lifted his head a little he
could see his brown belly, slightly domed and divided by arches into
stiff
sections. The bedding was hardly able to cover it and
seemed ready to slide off any moment.
Card with title and action next to it
He lay on his armour-like back, and if he lifted his head a little he
could see his brown belly, slightly domed and divided by arches into
stiff
sections. The bedding was hardly able to cover it and
seemed ready to slide off any moment.
Card with footer text and action
He lay on his armour-like back, and if he lifted his head a little he
could see his brown belly, slightly domed and divided by arches into
stiff
sections. The bedding was hardly able to cover it and
seemed ready to slide off any moment.
Card with two footer actions
He lay on his armour-like back, and if he lifted his head a little he
could see his brown belly, slightly domed and divided by arches into
stiff
sections. The bedding was hardly able to cover it and
seemed ready to slide off any moment.
Card with image above header
He lay on his armour-like back, and if he lifted his head a little he
could see his brown belly, slightly domed and divided by arches into
stiff
sections. The bedding was hardly able to cover it and
seemed ready to slide off any moment.
Card with image above footer
He lay on his armour-like back, and if he lifted his head a little he
could see his brown belly, slightly domed and divided by arches into
stiff
sections. The bedding was hardly able to cover it and
seemed ready to slide off any moment.
With Captions
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Third slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Slides only
Basic List Group
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
List Active items
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
List Disabled items
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Links and buttons items
Flush
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
With badges
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Cras justo odio 14
- Morbi leo risus 1
- Morbi leo risus 1
Custom content
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Media Object
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Nesting
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Align Top
Top-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Align Center
Center-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Align Bottom
Bottom-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Order
Media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media list
-
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Bootstrap Modal
Default Progress bars
Default progress bar style
Default Tab
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.