Gostaria de deixar igual o print abaixo.. não sei se tem como pois isso eu vi em um aplicativo, quero saber se e possível fazer com bootstrap. pois tentei colocando os coll-md-2 mas no mobile ele ocupa a tela toda..
Como ficar Asim no mobile:
Utilizando as classes col-xs-... que significa extra small você consegue determinar como quer que seja renderizado os elementos na tela. Se quizesse que um elemento ocupe toda a tela na resolução xs, você aplicaria assim col-xs-12
se quer dois elementos ocupando toda a tela seria col-xs-6
. Lembrando que estas classes são referenciadas dentro de uma div. A melhor referência sobre isto será sempre na documentação:
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>
<div class="col-xs-6">
<img src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg">
</div>
</div>
</div>
Use a classe css col-xs-6 em cada coluna. Se quiser 1 colunas em aparelhos mais pequenos e 2 colunas acima dos 767px de largura, use col-xs-12 col-sm-6. Algo do género:
<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>