How to make Bootstrap Grid stay with 2 rows in Mobile

2

I would like to leave the same print below .. I do not know if it has as well as this I saw in an application, I want to know if it is possible to do with bootstrap. because I tried putting the coll-md-2 but in mobile it occupies the whole screen ..

  

How to stay Asim on mobile:

    
asked by anonymous 16.11.2018 / 22:49

2 answers

2

Using the col-xs -... classes which means extra small you can determine how the elements on the screen are rendered. If you wanted an element to occupy the entire screen at resolution xs, you would then apply col-xs-12 if you want two elements occupying the entire screen would be col-xs-6 . Remembering that these classes are referenced within a div . The best reference about this will always be in documentation :

img {
  max-width: 240px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <img src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg"></div><divclass="col-xs-6">
      <img src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg">
    </div>
  </div>
</div>
    
16.11.2018 / 23:19
1

Use the css class col-xs-6 in each column. If you want 1 columns on smaller devices and 2 columns above 767px wide, use col-xs-12 col-sm-6. Something like this:

<div class="row"><div class="col-md-4 col-xs-6"><img alt="Responsive across devices" src="assets/img/devices.png" class="img-responsive"></div><div class="col-md-4 col-xs-6"><img alt="Responsive across devices" src="assets/img/devices.png" class="img-responsive"></div><div class="col-md-4 col-xs-6"><img alt="Responsive across devices" src="assets/img/devices.png" class="img-responsive"></div><div class="col-md-4 col-xs-6"><img alt="Responsive across devices" src="assets/img/devices.png" class="img-responsive"></div></div>
    
16.11.2018 / 23:00