General

Popovers

Show Code

Popovers example are available with follwing options , Directions are mirrored when using Bootstrap in RTL.


<!-- Popovers -->
<div class="hstack flex-wrap gap-2">
	<Button color="light" id="PopoverTop"
		>Popover on top</Button
	>
	<Popover
		placement="top"
		target="PopoverTop"
		title="Top Popover"
	>
		Vivamus sagittis lacus vel augue laoreet
		rutrum faucibus.
	</Popover>
	<Button color="light" id="PopoverRight"
		>Popover on right</Button
	>
	<Popover
		placement="right"
		target="PopoverRight"
		title="Right Popover"
	>
		Vivamus sagittis lacus vel augue laoreet
		rutrum faucibus.
	</Popover>

	<Button color="light" id="PopoverBottom"
		>Popover on right</Button
	>
	<Popover
		placement="bottom"
		target="PopoverBottom"
		title="Bottom Popover"
	>
		Vivamus sagittis lacus vel augue laoreet
		rutrum faucibus.
	</Popover>

	<Button color="light" id="PopoverLeft"
		>Popover on right</Button
	>
	<Popover
		placement="left"
		target="PopoverLeft"
		title="Left Popover"
	>
		Vivamus sagittis lacus vel augue laoreet
		rutrum faucibus.
	</Popover>

	<Button color="success" id="PopoverDismissible"
		>Dismissible popover</Button
	>
	<Popover
		placement="right"
		target="PopoverDismissible"
		title="Dismissible popover"
	>
		And here's some amazing content. It's very
		engaging. Right?
	</Popover>
</div>

Tooltips

Show Code

Tooltip example are available with follwing options, Directions are mirrored when using Bootstrap in RTL.


<!-- Tooltips -->
<div class="hstack flex-wrap gap-2">
	<Button color="light" id="tooltipTop"
		>Tooltip on top</Button
	>
	<Tooltip placement="top" target="tooltipTop"
		>Tooltip on top</Tooltip
	>

	<Button color="light" id="tooltipRight"
		>Tooltip on right</Button
	>
	<Tooltip placement="right" target="tooltipRight"
		>Tooltip on right</Tooltip
	>

	<Button color="light" id="tooltipBottom"
		>Tooltip on bottom</Button
	>
	<Tooltip
		placement="bottom"
		target="tooltipBottom"
		>Tooltip on bottom</Tooltip
	>

	<Button color="light" id="tooltipLeft"
		>Tooltip on left</Button
	>
	<Tooltip placement="left" target="tooltipLeft"
		>Tooltip on left</Tooltip
	>

	<Button color="primary" id="tooltipwithHtml"
		>Tooltip with HTML</Button
	>
	<Tooltip
		placement="top"
		target="tooltipwithHtml"
	>
		<em>Tooltip</em> <u>with</u> <b>HTML</b>
	</Tooltip>
</div>

Breadcrumb

Show Code

Indicate the current page’s location within a navigational hierarchy


<Breadcrumb listClassName="p-3 py-2 bg-light">
	<BreadcrumbItem active>Home</BreadcrumbItem>
</Breadcrumb>

<Breadcrumb listClassName="p-3 py-2 bg-light">
	<BreadcrumbItem
		><Link href={null}>Home</Link></BreadcrumbItem
	>
	<BreadcrumbItem active>Library</BreadcrumbItem>
</Breadcrumb>

<Breadcrumb listClassName="p-3 py-2 bg-light">
	<BreadcrumbItem
		><Link href={null}>Home</Link></BreadcrumbItem
	>
	<BreadcrumbItem
		><Link href={null}>Base UI</Link
		></BreadcrumbItem
	>
	<BreadcrumbItem active>General</BreadcrumbItem>
</Breadcrumb>

<Breadcrumb listClassName="p-3 py-2 bg-light mb-0">
	<BreadcrumbItem
		><Link href={null}
			><i class="ri-home-5-fill" /></Link
		></BreadcrumbItem
	>
	<BreadcrumbItem
		><Link href={null}>Base UI</Link
		></BreadcrumbItem
	>
	<BreadcrumbItem active>General</BreadcrumbItem>
</Breadcrumb>

Pagination

Show Code

Default Pagination

Use Pagination attribute to ul element to indicate a series of related content exists across multiple pages.

Disabled and Active states

Use disabled attribute to PaginationItem to links that appear un-clickable and active class to indicate the current page.

Sizing

Use pagination-lg or pagination-sm to set different pagination sizes.

Alignment

Use justify-content-start, justify-content-start, or justify-content-start, class to pagination class to change the alignment of pagination respectively.

Custom Separated Pagination

Use pagination-separated class to pagination class to set custom separated pagination.

Custom Rounded Pagination

Use pagination-rounded class to pagination class to set custom rounded pagination.


<Pagination class="mb-3">
	<PaginationItem>
		<PaginationLink href={null}
			>Previous</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>2</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>Next</PaginationLink
		></PaginationItem
	>
</Pagination>

<Pagination class="mb-3">
	<PaginationItem>
		<PaginationLink href={null}
			>← &nbsp; Prev</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>2</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem>
		<PaginationLink href={null}
			>Next &nbsp; →</PaginationLink
		>
	</PaginationItem>
</Pagination>


<!-- Pagination Disabled & Active -->
<Pagination class="mb-3">
	<PaginationItem disabled>
		<PaginationLink href={null}
			>← &nbsp; Prev</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem active>
		<PaginationLink href={null}
			>2</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem>
		<PaginationLink href={null}
			>Next &nbsp; →</PaginationLink
		>
	</PaginationItem>
</Pagination>

<Pagination class="mb-3">
	<PaginationItem disabled>
		<PaginationLink href={null}
			><i
				class="mdi mdi-chevron-left"
			/></PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem active>
		<PaginationLink href={null}
			>2</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem>
		<PaginationLink href={null}
			><i
				class="mdi mdi-chevron-right"
			/></PaginationLink
		>
	</PaginationItem>
</Pagination>


<!-- Pagination sizing -->

<!-- Pagination Large -->
<Pagination size="lg">
	<PaginationItem disabled>
		<PaginationLink href={null}
			>← &nbsp; Prev</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>2</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem>
		<PaginationLink href={null}
			>Next &nbsp; →</PaginationLink
		>
	</PaginationItem>
</Pagination>

<Pagination size="sm">
	<PaginationItem disabled>
		<PaginationLink href={null}
			>← &nbsp; Prev</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>2</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem>
		<PaginationLink href={null}
			>Next &nbsp; →</PaginationLink
		>
	</PaginationItem>
</Pagination>


<!-- Pagination Alignment -->

<!-- Center Alignment -->
<Pagination
	listClassName="justify-content-center"
>
	<PaginationItem disabled>
		<PaginationLink href={null}
			>← &nbsp; Prev</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>2</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem>
		<PaginationLink href={null}
			>Next &nbsp; →</PaginationLink
		>
	</PaginationItem>
</Pagination>

<Pagination
	listClassName="justify-content-end"
>
	<PaginationItem disabled>
		<PaginationLink href={null}
			>← &nbsp; Prev</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>2</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem>
		<PaginationLink href={null}
			>Next &nbsp; →</PaginationLink
		>
	</PaginationItem>
</Pagination>

<!-- Pagination Custom -->
<Pagination
	class="pagination-lg pagination-separated"
>
	<PaginationItem disabled>
		<PaginationLink href={null}
			>←</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem active>
		<PaginationLink href={null}
			>2</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>4</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>5</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>→</PaginationLink
		></PaginationItem
	>
</Pagination>

<Pagination
	class="pagination-separated"
>
	<PaginationItem disabled>
		<PaginationLink href={null}
			>←</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem active>
		<PaginationLink href={null}
			>2</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>4</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>5</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>→</PaginationLink
		></PaginationItem
	>
</Pagination>

<Pagination
	class="pagination-sm pagination-separated"
>
	<PaginationItem disabled>
		<PaginationLink href={null}
			>←</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem active>
		<PaginationLink href={null}
			>2</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>4</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>5</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>→</PaginationLink
		></PaginationItem
	>
</Pagination>

<!-- Pagination Rounded -->
<Pagination
	class="pagination-lg pagination-rounded"
>
	<PaginationItem disabled>
		<PaginationLink href={null}
			>←</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem active>
		<PaginationLink href={null}
			>2</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>4</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>5</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>→</PaginationLink
		></PaginationItem
	>
</Pagination>

<Pagination class="pagination-rounded">
	<PaginationItem disabled>
		<PaginationLink href={null}
			>←</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem active>
		<PaginationLink href={null}
			>2</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>4</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>5</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>→</PaginationLink
		></PaginationItem
	>
</Pagination>

<Pagination
	class="pagination-sm pagination-rounded"
>
	<PaginationItem disabled>
		<PaginationLink href={null}
			>←</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>1</PaginationLink
		></PaginationItem
	>
	<PaginationItem active>
		<PaginationLink href={null}
			>2</PaginationLink
		>
	</PaginationItem>
	<PaginationItem
		><PaginationLink href={null}
			>3</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>4</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>5</PaginationLink
		></PaginationItem
	>
	<PaginationItem
		><PaginationLink href={null}
			>→</PaginationLink
		></PaginationItem
	>
</Pagination>

Spinners

Show Code

Border spinner

Use Spinner attribute for a lightweight loading indicator.

Growing spinner

Use spinner-grow class for a lightweight spinner with growing effect.


<!-- Border spinner -->

<Spinner color="primary"> Loading... </Spinner>

<Spinner color="secondary"> Loading... </Spinner>

<Spinner color="success"> Loading... </Spinner>

<Spinner color="info"> Loading... </Spinner>

<Spinner color="warning"> Loading... </Spinner>

<Spinner color="danger"> Loading... </Spinner>

<Spinner color="dark"> Loading... </Spinner>

<Spinner color="light"> Loading... </Spinner>


<!-- Growing spinner -->

<Spinner color="primary" type="grow" > Loading... </Spinner>

<Spinner color="secondary" type="grow" > Loading... </Spinner>

<Spinner color="success" type="grow" > Loading... </Spinner>

<Spinner color="info" type="grow" > Loading... </Spinner>

<Spinner color="warning" type="grow" > Loading... </Spinner>

<Spinner color="danger" type="grow" > Loading... </Spinner>

<Spinner color="dark" type="grow" > Loading... </Spinner>

<Spinner color="light" type="grow" > Loading... </Spinner>

General

Popovers

Tooltips

Breadcrumb

Pagination

Default Pagination

Disabled and Active states

Sizing

Alignment

Custom Separated Pagination

Custom Rounded Pagination

Spinners

Border spinner

Growing spinner

Theme Customizer

Color Scheme

Light

Dark

Layout Width

Fluid

Boxed

Layout Position

Topbar Color

Light

Dark

Sidebar Size

Default

Compact

Small (Icon View)

Small Hover View

Sidebar View

Default

Detached

Sidebar Color

Light

Dark

Gradient

Sidebar Images

Recent Searches

Pages

Members

Angela Bernier

David Grasso

Mike Bunch

Web Apps

My Cart

Your Cart is Empty!

Branded T-Shirts

$320

Bentwood Chair

$89

Borosil Paper Cup

$750

Gray Styled T-Shirt

$1250

Stillbird Helmet

$990

$3399.00

Notifications

Your Elite author Graphic Optimization reward is ready!

Angela Bernier

You have received 20 new messages in the conversation

Maureen Gibson

James Lemire

Angela Bernier

Kenneth Brown

Maureen Gibson

Hey! You have no any notifications

General

Popovers

Tooltips

Breadcrumb

Pagination

Default Pagination

Disabled and Active states

Sizing

Alignment

Custom Separated Pagination

Custom Rounded Pagination

Spinners

Border spinner

Growing spinner