@page "/demo"
@* *@ Open Sidebar
Open Filters

Borders

Use border utilities to quickly style the border, border color and border-radius of an element. Great for images, buttons, or any other element. Responsive classes are available that use the same viewport width breakpoints as the grid system.

Position

b-1
bt-1 br-1 bb-1 bl-1 bx-1 by-1

Color

b-1
b-c-core b-1
b-c-primary b-1
b-c-secondary b-1
b-c-success b-1
b-c-info b-1
b-c-warning b-1
b-c-danger b-1
b-c-white b-1
b-c-light b-1
b-c-dark b-1
b-c-black

Border-radius

b-1 b-r-0 b-1 b-r-1 b-1 b-r-2 b-1 b-r-3 b-1 b-r-4 b-1 b-r-5 b-1 b-r-circle b-1 b-r-pill

Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Color

text-core text-primary text-secondary text-success text-info text-warning text-danger text-white text-light text-dark text-black 
                                
                                <span class="text-core">text-core</span>
                                <span class="text-primary">text-primary</span>
                                <span class="text-secondary">text-secondary</span>
                                <span class="text-success">text-success</span>
                                <span class="text-info">text-info</span>
                                <span class="text-warning">text-warning</span>
                                <span class="text-danger">text-danger</span>
                                <span class="text-white">text-white</span>
                                <span class="text-light">text-light</span>
                                <span class="text-dark">text-dark</span>
                                <span class="text-black">text-black</span>

Background color

bg-core
bg-primary
bg-secondary
bg-success
bg-info
bg-warning
bg-danger
bg-white
bg-light
bg-dark
bg-black

Link color

text-core text-primary text-secondary text-success text-info text-warning text-danger text-white text-light text-dark text-black

Text

Documentation and examples for common text utilities to control size, alignment, wrapping, weight, and more.

Text sizes

This is h5

text-small
This is small font size
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum quis neque ullam, eos eaque nam voluptate veniam dolor ex ratione?

This is h4

No class required
This is base font size
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo modi dicta eveniet quia, repudiandae perspiciatis omnis vitae nihil vero ratione.

This is h3

text-medium
This is medium font
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias praesentium quo est pariatur sed nobis maiores rem aperiam ut voluptas?

This is h2

text-large
This is large font
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nihil totam, modi minus excepturi laboriosam maiores. Provident quos est maiores.

This is h1

text-extralarge
This is extra large font
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, modi!

text-sm-medium
Medium size text on viewports sized SM (small) or wider.

text-md-medium
Medium size text on viewports sized MD (medium) or wider.

text-lg-medium
Medium size text on viewports sized LG (large) or wider.

text-xl-medium
Medium size text on viewports sized XL (extra-large) or wider.

Text alignment

Easily realign text to components with text alignment classes.

text-left

Left aligned text on all viewport sizes

text-center

Center aligned text on all viewport sizes.

text-right

Right aligned text on all viewport sizes.

text-justify

Justified text on all viewport sizes. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus consequatur nisi amet modi in voluptatum facere reprehenderit, aut assumenda. Velit.

text-sm-right

Right aligned text on viewports sized SM (small) or wider.

text-md-right

Right aligned text on viewports sized MD (medium) or wider.

text-lg-right

Right aligned text on viewports sized LG (large) or wider.

text-xl-right

Right aligned text on viewports sized XL (extra-large) or wider.

Font weight

Quickly change the weight (boldness).

text-thin

This is thin text

text-regular

This is normal weight text - no class required

text-semibold

This is semibold text

text-bold

This is bold text

text-extrabold

This is extra bold text

text-sm-bold

Bold text on viewports sized SM (small) or wider.

Text transform

Transform text in components with text capitalization classes or italicize text.

text-italic

This is italic text

text-lowercase

This is lowercased text

text-uppercase

This is uppercased text

text-capitalize

This is capitalized text

text-nowrap

This text should overflow the parent.

text-truncate

This is text is truncated

Buttons

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Outline buttons

Sizes

Button states

Radio

Radio buttons allow the user to select a single choice from a group of options.

@*
*@
@*
*@

Input

Inputs buttons allow the user to select a single choice from a group of options.

Some helping Text
At least 6 characters required
Some helping Text
At least 6 characters required
Some helping Text
At least 6 characters required
Some helping Text
At least 6 characters required
Header
Action Another action
Something else here
Some helping Text
At least 6 characters required

Grid

1
2
3
4
5
6
7
8
9
10
11
12
@code { private string sidebarClosed { get; set; } = "close"; private void ToggleSidebar() { sidebarClosed = string.IsNullOrWhiteSpace(sidebarClosed) ? "close" : ""; } private string sidebarRightClosed { get; set; } = "close-r"; private void ToggleSidebarRight() { sidebarRightClosed = string.IsNullOrWhiteSpace(sidebarRightClosed) ? "close-r" : ""; } private string NavClosed { get; set; } = ""; private void ToggleNav() { NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : ""; } }