Bootstrap - How to narrow a little bit more?

Question

Hello,

I tried but couldn't manage much. How can we narrow the gaps a little more?

Here is the related part:
<style>
.btns {
padding: 5px;
width: calc(9% - 10px);
}
.rz-grid-table td .rz-cell-data {
font-size: 13px;
}
h1 { margin-bottom: 0.1rem !important;}
.rz-card {
padding-bottom: 0.1rem;
}
</style>

<h1>Search Orders</h1>  
<br/>  
  
<RadzenCard class="mb-3">  
    <div class="row g-3">  
          
          
        <div class="col">  
            <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">  
            <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 class="col">  
            <label class="form-label">Detail Status</label>  
            <RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data=@detailStatusList Name="Status" Change=@(args => OnDetailStatusChange(args)) />  
        </div>  
        <div class="col">  
            <label class="form-label">Customer</label>  
            <RadzenDropDownDataGrid TValue="int" AllowFiltering="true" AllowClear="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains"  
                                    Data=@_customers Count="5" TextProperty="Name" ValueProperty="Id" Change=@(args => OnCustomerChange(args))  
                                    Class="w-100"/>  
  
        </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 btns" @onclick="ExportExcel">  
                Search  
            </button>  
        </div>  
    </div>  
    <li class="border-top my-3"></li>  
    <RadzenDataFilter @ref="dataFilter" Auto=auto Data="@_orders" TItem="ReportViewModel" ViewChanged=@(view =>filteredOrders = view.ToList())>  
                    <Properties>  
                        <RadzenDataFilterProperty TItem="ReportViewModel" Property="OrderId" Title="Order ID" />  
                        <RadzenDataFilterProperty TItem="ReportViewModel" Property="OrderDetailId" Title="Product ID" />  
                        <RadzenDataFilterProperty TItem="ReportViewModel" Property="ProductCode" Title="Product Code" />  
                        <RadzenDataFilterProperty TItem="ReportViewModel" Property="VendorName" Title="Vendor Name" />  
                        <RadzenDataFilterProperty TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" />  
                        <RadzenDataFilterProperty TItem="ReportViewModel" Property="CustomerName" Title="Customer Name" />  
                        <RadzenDataFilterProperty TItem="ReportViewModel" Property="DoneBy" Title="Employee" />  
                        <RadzenDataFilterProperty TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost" />  
                        <RadzenDataFilterProperty TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell Price" />  
                        <RadzenDataFilterProperty TItem="ReportViewModel" Property="Warehouse" Title="Warehouse" />  
                        <AuthorizeView Roles="Administrators">  
                            <RadzenDataFilterProperty TItem="ReportViewModel" Property="PaymentStatus" Title="Payment Status" />  
                        </AuthorizeView>  
                    </Properties>  
                </RadzenDataFilter>  
  

Answer 1

Hi @Cenk ,

Try to use F12 developer tools to check the Elements, you can see that the part is relate the mt-5 class: margin-top: 3rem!important;:

So, to narrow the gaps, you can change the margin-top attribute, like this:

  <div class="mt-5" style="margin-top:0.1rem !important">  

For this part, you can use F12 developer Elements too to check the <li class="border-top my-3"></li>, the issue might relate the <li> tag and the my-3 class:

You can also try to change the margin-top and margin-bottom attribute. Or might be you can try to remove the <li> element, because from your code, it seems that you didn't add the content to the <li> element.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion