bootstrap 5 position-relative with row not working

Admin 1
Viewed 368

I want to place the * sign on the left. But every time I do, it will not work unless I eliminate the row class.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="{{ asset('themes/fontawesome/css/all.min.css') }}" rel="stylesheet">
</head>
<body>
    <div id="showFilters">
    <div class="position-relative row">
    <i class="fas fa-times text-danger position-absolute end-0"></i>
    <div class="col-md-4 mb-3">
    <label for="name" class="form-label">نام فیلتر</label>
    <input type="text" id="name" class="form-control" name="filters[1][name]">
    </div>
    <div class="col-md-4 mb-3">
    <label for="latin" class="form-label">نام لاتین فیلتر</label>
    <input type="text" id="latin" class="form-control" name="filters[1][latin]">
    </div>
    <div class="col-md-4 mb-3">
    <label for="field" class="form-label">انتخاب فیلد</label>
    <select id="field" class="form-select" name="filters[1][field]">
    <option value="1">چک باکس</option>
    <option value="2">رنگ</option>
    <option value="3">آپشن</option>
    </select>
    </div>
    </div>
    </div>
</body>
</html>

demo

bootstrap-5 css html
1 Answers

Only columns should be the immediate children of row, and content should be placed inside the columns.. not directly in the row.

<div id="showFilters">
    <div class="position-relative row">
        <div class="col-md-4 mb-3">
            <i class="fas fa-times text-danger position-absolute start-0"></i>
            <label for="name" class="form-label">نام فیلتر</label>
            <input type="text" id="name" class="form-control" name="filters[1][name]">
        </div>
        <div class="col-md-4 mb-3">
            <label for="latin" class="form-label">نام لاتین فیلتر</label>
            <input type="text" id="latin" class="form-control" name="filters[1][latin]">
        </div>
        <div class="col-md-4 mb-3">
            <label for="field" class="form-label">انتخاب فیلد</label>
            <select id="field" class="form-select" name="filters[1][field]">
                <option value="1">چک باکس</option>
                <option value="2">رنگ</option>
                <option value="3">آپشن</option>
            </select>
        </div>
    </div>
</div>

Codeply

user_1714560
Related