CODEWITHSUNDEEP
csstwitter-bootstrap
lesnar
lesnar

Reputation: 2480

Bootstrap 4: Responsive layout on extra small screen

I have implemented a container in such a way that on extra small screen they should have assigned width.

 <div class="container w-60 border border-secondary">
                <h1 class="text-black-50 text-center mb-5 bg bg-light">Warenkorb</h1>  
            <hr/>
            <div class="row mt-5">
                <div class="col-xs-1">
                    <span>1x</span>
                </div>
                <div class="col-xs-6">
                    <small class="text-muted description">Some description</small>
                </div>
                <div class="col-xs-2">
                    <div class="btn-group" role="group" aria-label="quantity">
                        <button type="button" class="btn btn-default border border-success btn-sm align-bottom float-right" (click)="decreaseTheQuantity(item)"><span class="vertical-align: baseline;">-</span></button>
                        <button type="button" class="btn btn-default border border-success btn-sm align-bottom  float-right" (click)="increaseTheQuantity(item)"><span class="vertical-align: baseline;">+</span></button>
                      </div>
                </div>
                <div class="col-xs-1 float-right">
                   40€
                </div>
                <div class="col-xs-2">
                    <button type="button" class="btn btn-default btn-sm float-right" (click)="deleteTheItem(i)">
                        <span class="glyphicon glyphicon-trash  border border-success btn-sm align-top float-right btntrash"></span>  
                      </button>
                </div>
            </div>

It looks okay on most of the screens

responsive

but on s5 it looks bit distorted.

s5 responsive

I want trash button to be in a same row like in first picture.

I am using bootstrap and using class="col-xs-X" to split the columns on small screens. Why its not working for s5 device ?

Second problem is: 

 <div class="col-xs-1 float-right">
               40€
 </div>

my css 

.glyphicon.glyphicon-trash{
    font-size: 10px;
    top: -6px;
}

.btntrash{
    height:20px;
    top: -6px;
}

for above column i am using float-right and expect a very little space between price and trash button. I am not able to achieve that either.

Could you please give me some pointers ?

Upvotes: 0

Views: 1435

Answers (2)

AtozEvo
AtozEvo

Reputation: 31

A little late to the party, but I would suggest is using col-auto and col to adjust your layout for the small screen. I find that there's some situations where specifying a total of 12 columns reacts in weird ways when the content of the column doesn't fit it's width (like you have done).

And also make use of the breakpoints available in bootstrap to change your column sizing for different screens.

<div class="row mt-5">
  <div class="col-auto col-sm-1">
    <!-- Quantity -->
  </div>
  <div class="col col-sm-6">
    <!-- Description -->
  </div>
  <div class="col-auto col-sm-2">
    <!-- Plus/Minus buttons -->
  </div>
  <div class="col-auto col-sm-1 float-right">
     <!-- Price -->
  </div>
  <div class="col-auto col-sm-2">
     <!-- Delete Button -->
  </div>
</div>

col-auto is used to size the column based on it's content.

col is used to fill up any left over space in the row.

Upvotes: 0

Salomushka
Salomushka

Reputation: 21

https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap 4 do not have xs grid. You should change col-xs-6 to col-6, but if you want to have different grid on desktop or tablet versions, you can use lg and md size.

Upvotes: 2

Related Questions