0 Replies - 652 Views - Last Post: 06 January 2022 - 09:07 AM

#1 Exceedinglife   User is offline

  • D.I.C Regular

Reputation: 7
  • View blog
  • Posts: 258
  • Joined: 01-July 12

Move HTML element based on screen size bootstrap rows /my layout issue

Posted 06 January 2022 - 09:07 AM

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.

<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>


Current xl layout
Posted Image
End Goal
Posted Image

I created this on fiddle but it looks like the bootstrap rows wont load properly.
https://dotnetfiddle.net/YynMH0#

Is This A Good Question/Topic? 0
  • +

Page 1 of 1