Bootstrap Search Bar Template

Question

Hello guys,

I am working on a Blazor Server Application. I am making a search page according to certain criteria. There is this search page that I want to create and get data from different inputs like dropdown, date with calendar, and textbox. Are there any Bootstrap 5 templates you can recommend that I can take as an example? Unfortunately, I'm very inept at interface design.

I will be glad if you can help.

Answer 1

Hi @Anonymous ,

I searched bootstrap form inputs and created this search template. Thank you.

<div class="m-4">  
    <div class="row g-6">  
        <div class="col-3">  
            <label class="form-label">Vendor</label>  
            <RadzenDropDownDataGrid TValue="int" AllowFiltering="true" AllowClear="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains"  
                                    Data=@_vendors Count="5" TextProperty="Name" ValueProperty="Id" Change=@(args => OnChange(args))  
                                    Class="w-100"/>  
  
        </div>  
        <div class="col-3">  
            <label class="form-label">Order Date Start</label>  
            <RadzenDatePicker TValue="DateTime" DateFormat="d" Class="w-100" Change=@(args => OnStartDateChange(args)) />  
        </div>  
        <div class="col-3">  
            <label class="form-label">Order Date End</label>  
            <RadzenDatePicker TValue="DateTime" DateFormat="d" Class="w-100" Change=@(args => OnEndDateChange(args)) />  
        </div>  
        <div class="col-3">  
            <label class="form-label">Order Status</label>  
            <RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data=@orderStatusList Name="Status" Change=@(args => OnStatusChange(args))/>  
        </div>  
    </div>  
    <div class="mt-5">  
        <div class="d-flex flex-grow-1 justify-content-center align-items-center">  
            <button type="button" class="btn btn-primary w-25" @onclick="ExportExcel">  
                Orders Excel Export  
            </button>  
        </div>  
    </div>  
</div>