# Getting Started with the FloatingToolBar
This tutorial explains how to set up a basic Telerik UI for ASP.NET Core FloatingToolBar and highlights the major steps in the configuration of the component.
You will initialize a FloatingToolBar with text formatting tools inside a positioned container. Next, you will handle its events and reference the client-side instance of the component. Finally, you can run the sample code in [Telerik REPL](https://netcorerepl.telerik.com/) and continue exploring the components.
## Prerequisites
To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET Core components:
* You can use the [Telerik REPL](https://netcorerepl.telerik.com/) playground and skip installing the components on your system and configuring a project.
* You can prepare a Visual Studio project by following the following guide:
* Creating a new pre-configured project for the Telerik UI for ASP.NET Core components from [a project template](https://www.telerik.com/aspnet-core-ui/documentation/vs-integration/new-project-wizard).
## 1. Prepare the CSHTML File
The first step is to add the required directives at the top of the `.cshtml` document:
* To use the Telerik UI for ASP.NET Core HtmlHelpers:
```cshtml
@using Kendo.Mvc.UI
```
* To use the Telerik UI for ASP.NET Core TagHelpers:
```cshtml
@addTagHelper *, Kendo.Mvc
```
Add a container that holds the content and the toolbar. The FloatingToolBar aligns itself to its closest positioned ancestor, so set the `position` CSS property of the container to `relative`.
```Razor HtmlHelper
@using Kendo.Mvc.UI
Customs Declaration
Container MSKU 7720145 holds 18 pallets of medical supplies, temperature-controlled at 2-8°C.
```
```Razor TagHelper
@addTagHelper *, Kendo.Mvc
Customs Declaration
Container MSKU 7720145 holds 18 pallets of medical supplies, temperature-controlled at 2-8°C.
```
## 2. Initialize the FloatingToolBar
Use the FloatingToolBar HtmlHelper or TagHelper to add the component inside the container:
* The `Name()` configuration method is mandatory as its value is used for the `id` and the `name` attributes of the FloatingToolBar element.
* The `Visible()` option shows the toolbar when the page loads. By default, the toolbar is hidden until you call its `show()` client-side method.
* The `ContainerAlign()` option places the toolbar at the bottom center of the container.
* The `Items()` option defines the commands. It accepts the same item configuration as the [ToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/getting-started).
```Razor HtmlHelper
@using Kendo.Mvc.UI
Customs Declaration
Container MSKU 7720145 holds 18 pallets of medical supplies, temperature-controlled at 2-8°C.
@(Html.Kendo().FloatingToolBar()
.Name("floatingtoolbar")
.Visible(true)
.ContainerAlign(align => align
.Horizontal(FloatingToolBarHorizontalAlign.Center)
.Vertical(FloatingToolBarVerticalAlign.Bottom))
.Margin(margin => margin.Vertical(-16))
.Items(items =>
{
items.Add().Type(CommandType.ButtonGroup).Buttons(buttons =>
{
buttons.Add().Text("Bold").Icon("bold").Togglable(true).ShowText(ShowIn.Overflow);
buttons.Add().Text("Italic").Icon("italic").Togglable(true).ShowText(ShowIn.Overflow);
buttons.Add().Text("Underline").Icon("underline").Togglable(true).ShowText(ShowIn.Overflow);
});
items.Add().Type(CommandType.Separator);
items.Add().Type(CommandType.Button).Text("Insert Link").Icon("link").ShowText(ShowIn.Overflow);
})
)
```
```Razor TagHelper
@addTagHelper *, Kendo.Mvc
Customs Declaration
Container MSKU 7720145 holds 18 pallets of medical supplies, temperature-controlled at 2-8°C.
-
```
## 3. Handle the FloatingToolBar Events
The FloatingToolBar exposes events that you can handle to respond to user actions. In this tutorial, you will handle the `Show` and `Hide` events of the component.
```Razor HtmlHelper
@(Html.Kendo().FloatingToolBar()
.Name("floatingtoolbar")
.Visible(true)
.Events(events => events
.Show("onShow")
.Hide("onHide"))
.Items(items =>
{
items.Add().Type(CommandType.Button).Text("Insert Link").Icon("link");
})
)
```
```Razor TagHelper