UI Elements

Buttons

Basic

Bootstrap includes six predefined button styles, each serving its own semantic purpose..

Outline

Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Rounded

Use class .btn-rounded for button round.

Sizes

Add .btn-lg or .btn-sm for additional sizes.

Width

Add .w-xs, .w-sm, .w-md and .w-lg class for additional buttons width.

Tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Link

Badges

Basic

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Success Info Warning Danger Dark
Pill

Use the .rounded-pill modifier class to make badges more rounded.

Primary Success Info Warning Danger Dark
Lighten

Use .bg-soft-* class for a badge lighten.

Primary Success Info Warning Danger Dark
Soft Pill

Use .bg-soft-* class for a pill badge.

Primary Success Info Warning Danger Dark
Badges in Buttons

Badges can be used as part of links or buttons to provide a counter.

Badges Position Examples

Example of Badges Position

Images

Rounded & Circle

Use classes .rounded and .rounded-circle.

200x200
200x200
Thumbnails

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

200x200
200x200
Sizes
avatar-3

.avatar-sm

avatar-4

.avatar-md

avatar-5

.avatar-lg

avatar-3

.avatar-sm

avatar-4

.avatar-md

avatar-5

.avatar-lg

Media Object

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

Generic placeholder image
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.

Generic placeholder image
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.

Generic placeholder image
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.

Cards

Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button
Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
Card image
Card title

This is a wider card with as a to additional content.

Last updated 3 mins ago

Card title

This is a wider card with as a to additional content.

Last updated 3 mins ago

Card image

Card background Color

Primary Card

If several languages coalesce, the grammar of the resulting individual

Success Card

If several languages coalesce, the grammar of the resulting individual

Info Card

If several languages coalesce, the grammar of the resulting individual

Card Border Color

Warning outline Card
card title

If several languages coalesce, the grammar of the resulting individual

Danger outline Card
card title

If several languages coalesce, the grammar of the resulting individual

Success Card
card title

If several languages coalesce, the grammar of the resulting individual

Collapse

Basic Collapse

You can use a link with the href attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="collapse" is required.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Basic Horizontal Collapse

The collapse plugin also supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
Multiple Targets Collapse

A <button> or <a> can show and hide multiple elements by referencing them with a selector in its href or data-bs-target attribute.

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Tabs & Accordions

Basic Tabs

Example of Default Nav Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh iphone. Seitan aliquip butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, aesthetic magna delectus.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy mi whatever gluten yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia farm-to-table VHS.

Basic Nav Pills

Example of Default Nav Pills

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, vinyl cillum PBR. Homo nostrud organic labore

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy Leggings gentrify squid 8-bit cred pitchfork

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table.

Custom Nav Tabs

Example of Custom Nav Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis butcher

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby.

Vertical Nav Tabs

Use flex-column class to create Vertical nav tabs.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, nulla assumenda shoreditch et.
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt Leggings occaecat craft beer farm-to-table, raw denim accusamus labore sustainable VHS.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy mi whatever gluten yr.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic
Basic Accordions

Extend the default collapse behavior to create an accordion.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, nulla assumenda shoreditch et.

sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt Leggings occaecat craft beer farm-to-table, raw denim accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, nulla assumenda shoreditch et.
Accordion Flush

Add .accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

Offcanvas

Demo

Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the .show class on an element with the .offcanvas class.

Link with href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Placement

Offcanvas Diffrent Placement Example: Left, Right & Bottom

Offcanvas top
...
Offcanvas right
...
Offcanvas bottom
...
Backdrop

Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle <body> scrolling and data-bs-backdrop to toggle the backdrop.

Colored with scrolling

Try scrolling the rest of the page to see this option in action.

Offcanvas with backdrop

.....

Backdroped with scrolling

Try scrolling the rest of the page to see this option in action.

Modals

Basic

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

Optional Sizes

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog.

Toggle Between Modals

Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes.

Vertically Centered

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Scrollable

You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.

Static Backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

Placeholder

Basic

Use loading placeholders for your components or pages to indicate something may still be loading

card img
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Width

You can change the width through grid column classes, width utilities, or inline styles.

Sizing

The size of .placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm, or .placeholder-xs.

Color

By default, the placeholder uses currentColor. This can be overriden with a custom color or utility class.

Placeholder Glow Animation

Animate placehodlers with .placeholder-glow to better convey the perception of something being actively loaded.

Placeholder Wave Animation

Animate placehodlers with .placeholder-wave to better convey the perception of something being actively loaded.

Progress

Basic

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

Heights

We only set a height value on the .progress-bar, so if you change that value the outer .progress will automatically resize accordingly.

Striped & Animated

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

Tooltips & Popovers

Tooltips

Hover over the links below to see tooltips.

Popovers

Add small overlay content, like those found in iOS, to any element for housing secondary information.

Spinners

Border

Use the border spinners for a lightweight loading indicator.

Loading...
Color Variation

Add text-* color for a Spinner color variation.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Growing

Switch to the grow spinner.it does repeatedly grow Continue!

Loading...
Color Variation

Add text-* color for a Spinner color variation.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Grid

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

xs
<576px
sm
≥576px
md
≥768px
lg
≥992px
xl
≥1200px
xxl
≥1400px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12
Gutter width 24px (12px on each side of a column)
Custom gutters Yes
Nestable Yes
Offsets Yes
Column ordering Yes

Video

Responsive Embed Video 16:9

Aspect ratios can be customized with modifier classes.

Responsive Embed Video 21:9

Aspect ratios can be customized with modifier classes.

Responsive Embed Video 4:3

Aspect ratios can be customized with modifier classes.

Responsive Embed Video 1:1

Aspect ratios can be customized with modifier classes.

Utilities

Borders

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Border Width
.border.border-1
.border.border-2
.border.border-3
.border.border-4
.border.border-5
Border color
.border-primary
.border-secondary
.border-success
.border-info
.border-warning
.border-danger
.border-dark
.border-light
Additive
.border
.border-top
.border-end
.border-bottom
.border-start
Subtractive
.border-0
.border-top-0
.border-end-0
.border-bottom-0
.border-start-0
Border Opacity
.border-opacity-10
.border-opacity-25
.border-opacity-50
.border-opacity-75
.border
Borders Radius

Use below-mentioned class to an element to easily round its corners.

.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-pill
Size

Use below-mentioned class to an element to easily round its corners.

.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-4
.rounded-5
Box Shadow

While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).

.shadow-none No shadow
.shadow-sm Small shadow
.shadow Regular shadow
.shadow-lg Larger shadow
Text selection

Change the way in which the content is selected when the user interacts with it.

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

Width

Width and height utilities are generated from the utility API in _utilities.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.

Width 25%
Width 50%
Width 75%
Width 100%
Width auto
Height

Width and height utilities are generated from the utility API in _utilities.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.

Height 25%
Height 50%
Height 75%
Height 100%
Height auto
© Samply.
Design & Develop by Pichforest