New to Telerik UI for ASP.NET Core? Download free 30-day trial

Appearance

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        appearance.cshtml
                    
                        AppearanceController.cs

Also available for:

API REFERENCE

Choose Text Orientation

Choose theme color

Set Border

Set Fill Option

Set Shadow

Home

29ºC

Sunny weather in New York.

.weather { margin: 0 auto 30px; text-align: center; } .sunny { display: block; margin: 30px auto 10px; width: 128px; height: 128px; background: url('/aspnet-core/shared/web/tabstrip/weather.png') transparent no-repeat 0 0; } #avatar { text-align: center; } .view-content { letter-spacing: 0.20px; } #calendar .view-content { text-align: center; } .demo-app { margin: auto; width: 382px; height: 600px; background: #FFFFFF; box-shadow: 0px 10px 20px #00000016; border-radius: 30px; font-family: 'Roboto', sans-serif; font-size: 14px; } .demo-app h3 { padding-top: 24px; text-align: center; font-size: 28px; letter-spacing: 0.28px; color: #3D57D8; font-weight: 400; } #home, #calendar, #profile { background: #F9F9F9; height: inherit; width: inherit; border-radius: 30px; border: 10px solid white; box-sizing: border-box; } .demo-app .k-bottom-nav-flat { margin-left: 10px; margin-bottom: 10px; height: 70px; max-width: 362px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }

Description

This demo illustrates the various options to change the ASP.NET Core BottomNavigation HtmlHelper appearance through the ItemFlow, ThemeColor, Border, Fill and Shadow options.

Appearance

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo