CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3595632
user3595632

Reputation: 5730

Bootstrap: responsive button in grid system?

Here is what I wanted to do in wide screen: enter image description here

, where buttons are right side and located in one line.

Those are supposed to located in small screen like this: enter image description here

, where button are separated in each rows

I think that I could implement this with bootstrap grid system, but kinda hard to implement this.

Here is what I tried:

<div class="row">
    <div class="col-sm-offset-8 col-sm-2">
        <a href="#" id="cancel-btn" class="btn btn-primary"  style=" margin-right:5px; background-color:#313131; border-color:#313131;"> 주문 취소 </a>
    </div>
    <div class="col-sm-offset-10 col-sm-2">
        <a href="#" id="edit-btn" class="btn btn-primary" type="submit" style=" margin-left:5px;"> 주문 수정 </a>
    </div>
</div>

But doesn't work. Need helps. Thanks.

Upvotes: 0

Views: 2317

Answers (2)

RizkiDPrast
RizkiDPrast

Reputation: 1725

you need to add change col-sm-2 class to col-sm-12 (will extend on small screen) and add class col-lg-2 also set offset to lg screen

<div class="row">
    <div class="col-lg-offset-8 col-sm-12 col-lg-2">
        <a href="#" id="cancel-btn" class="btn btn-primary"  style=" margin-right:5px; background-color:#313131; border-color:#313131;"> 주문 취소 </a>
    </div>
    <div class="col-sm-12 col-lg-2">
        <a href="#" id="edit-btn" class="btn btn-primary" type="submit" style=" margin-left:5px;"> 주문 수정 </a>
    </div>
</div>

Upvotes: 0

VvV
VvV

Reputation: 1588

I don't understand what you want, but I guessed what you want. Do you want to show like this?

You can see here an example

Upvotes: 3

Related Questions