Click here to Skip to main content
15,867,488 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I currently have a layout which works for me except for when the screen gets smaller. I have been playing with it and I have it how I want it except for 1 element. When the screen is big I have the elements layed out ‘block’ next to each other which looks nice. As the screen shrinks I want the elements to go on top of one another except for the last element on this row. I want it to stay where it’s at. At the end of the first row. I change the bootstrap row to col-lg-12 so the elements stack but I tried col-lg-10 for the first element and the one where I want it to stay put col-lg-2 So I want mt t1bC at the end of the row of the stop text box when the screen goes smaller. <992px. When its bigger than that I want them layed out in the same row Stop – Limit – t1bC Smaller – row 1 – Stop – t1bC Row 2 – Limit Row 3 – Quantity

Thank you all.

What I have tried:

<form id="frmT1b" method="post">                
            <div class="row slprv1 text-dc">
                <div class="col-lg-10 col-xl-5 ">
                    <div class="row form-group">
                        <div class="col-2 slsplc">
                            <p>Stop:</p>
                        </div>
                        <div class="col-3 slsptc">
                            <span asp-validation-for="StopPrice" class="text-danger"></span>
                            <input type="text" asp-for="StopPrice" class="form-control-sm txt-price bg-crypto-boxes" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-xl-5">
                    <div class="row form-group">
                        <div class="col-2 sllplc">
                            <p>Limit:</p>
                        </div>
                        <div class="col-3 sllptc">
                            <span asp-validation-for="Price" class="text-danger"></span>
                            <input type="text" asp-for="Price" class="form-control-sm txt-price bg-crypto-boxes" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-2">
                    @if (TempData["T1BFilled"] != null)
                    {
                        <div id="t1bC" class="btn btn-success btn-circle btn-sm"></div>
                    }
                    else
                    {
                        <div id="t1bC" class="btn btn-danger btn-circle btn-sm"></div>
                    }
                </div>
            </div>
            <div class="row form-group text-dc">
                <div class="col-3 slqlc">
                    <p>Amount:</p>
                </div>
                <div class="col-6 slqtc">
                    <span asp-validation-for="Quantity" class="text-danger"></span>
                    <input type="text" asp-for="Quantity" class="form-control-sm txt-amount bg-crypto-boxes" />
                </div>
            </div>
        </form>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900