How to make the html elements inline next to each other

Hello i have this code in html using bootstrap, and i want it next to each other but they show up like mobile view under each other. This is my code:

 <div class="card">
                <div class="row">

                    <div class="col-sm-1">
                    <form method="GET" action="/cash-register">
                        @csrf
                        <div class="col-sm">
                        <label for="startDate">Start Date</label>
                        <input type="date" name="startDate" id="startDate" class="dateField" onchange="getChangedValues()"
                               value="{{date("Y-m-d",strtotime('Monday this week')) }}"/>
                        </div>

                        <div class="col-sm-2">
                        <label for="endDate">End Date</label>
                        <input type="date" name="endDate" id="endDate" class="dateField" onchange="getChangedValues()"
                               value="{{date("Y-m-d",strtotime('Sunday this week')) }}"/>
                        </div>

                        <div class="col-sm-3">
                        <label for="option">Type of Action</label>

                        <select name="option"  id="option" class="form-select" onchange="getChangedValues()">
                            <option value="outlay">SHPENZIM</option>
                            <option value="received">MARRJE LEKESH</option>
                        </select>
                        </div>

                        <div class="col-sm-1">
                        <input type="submit" name="fetchDataBtn" id="fetchDataBtn" class="btn btn-primary"
                               value="Shfaq Vlerat"/>

                        <input type="button" name="clearData" id="clearData" onclick="cleanDate()" class="btn btn-danger" value="Pastro Daten">
                        </div>
                    </form>
                    </div>

                <div class="col-sm-2">
                    <form method="GET" action="/cash-register/export/">
                        <input type="hidden" id="hiddenStartDate" name="startDate" value="{{$startDate}}">
                        <input type="hidden" id="hiddenEndDate" name="endDate" value="{{$endDate}}">
                        <input type="hidden" id="hiddenOption" name="option" value="{{$filterOption}}">
                        <input type="submit" name="exportDataBtn" id="exportDataBtn" class="btn btn-success"
                               value="Eksporto Vlerat"/>
                    </form>
                </div>

                </div>
            </div>

LaryAI

3 years ago

Level 58

To make the HTML elements inline next to each other, you can add the "d-flex" class to the parent div with the "row" class. This will make the child divs display as flex items and align them horizontally. Here's the updated code:

<div class="card">
    <div class="row d-flex">

        <div class="col-sm-1">
            <form method="GET" action="/cash-register">
                @csrf
                <div class="col-sm">
                    <label for="startDate">Start Date</label>
                    <input type="date" name="startDate" id="startDate" class="dateField" onchange="getChangedValues()"
                           value="{{date("Y-m-d",strtotime('Monday this week')) }}"/>
                </div>

                <div class="col-sm-2">
                    <label for="endDate">End Date</label>
                    <input type="date" name="endDate" id="endDate" class="dateField" onchange="getChangedValues()"
                           value="{{date("Y-m-d",strtotime('Sunday this week')) }}"/>
                </div>

                <div class="col-sm-3">
                    <label for="option">Type of Action</label>

                    <select name="option" id="option" class="form-select" onchange="getChangedValues()">
                        <option value="outlay">SHPENZIM</option>
                        <option value="received">MARRJE LEKESH</option>
                    </select>
                </div>

                <div class="col-sm-1">
                    <input type="submit" name="fetchDataBtn" id="fetchDataBtn" class="btn btn-primary"
                           value="Shfaq Vlerat"/>

                    <input type="button" name="clearData" id="clearData" onclick="cleanDate()" class="btn btn-danger" value="Pastro Daten">
                </div>
            </form>
        </div>

        <div class="col-sm-2">
            <form method="GET" action="/cash-register/export/">
                <input type="hidden" id="hiddenStartDate" name="startDate" value="{{$startDate}}">
                <input type="hidden" id="hiddenEndDate" name="endDate" value="{{$endDate}}">
                <input type="hidden" id="hiddenOption" name="option" value="{{$filterOption}}">
                <input type="submit" name="exportDataBtn" id="exportDataBtn" class="btn btn-success"
                       value="Eksporto Vlerat"/>
            </form>
        </div>

    </div>
</div>

Please or to participate in this conversation.