Bootstrap col-xs and col-sm

Question

my bootstrap col-xs working from 768px is that normal , i know the xs is working fro 480px ?

 <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <p><img src="img/wdigets/1.jpg" class="img-circle" width="66" height="66"></p>
    <p class="name">Johnny Carr</p>
    <p class="big-number">21</p>
</li>

MY DEMO

please check the Inbox Summery box the li make 100% when the size become 768px !!

see this http://stackoverflow.com/questions/20242455/what-are-the-difference-between-col-lg-and-col-md-in-bootstrap3 — Md Mahfuzur Rahman, Apr 02 '16 at 08:43
So you need customize the css. [Take a look at docs, there is no 480px support](http://getbootstrap.com/css/#grid-options) — , Apr 02 '16 at 08:46

score 3 · Answer 1 · answered Apr 02 '16 at 14:48

In fact, you're wrong. Bootstrap 3 col-xs is working from <768px. The grid of bootstrap 3 is:

.col-xs = (<768px)

.col-sm = (≥768px)

.col-md = (≥992px)

.col-lg = (≥1200px)

But.. With bootstrap 4, alpha, they have added a new format to the list, a extra large column. The grid of bootstrap 4 is:

.col-xs = (<544px)

.col-sm = (≥544px)

.col-md = (≥768px)

.col-lg = (≥992px)

.col-xl = (≥1200px)

Hope this hepls you out

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

I think this can help you.

.col-xs = *Extra small devices (ie Phones) (<768px)

.col-sm = Small devices (ie Tablets) (≥768px)

.col-md = Medium devices (ie laptops, or small desktops) (≥992px)

.col-lg = Large devices (ie Desktops) (≥1200px)*

Source link: What are the difference between col-lg and col-md in bootstrap3

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 02 '16 at 08:47

Md Mahfuzur Rahman

2,319
2
18
28

Bootstrap col-xs and col-sm

2 Answers2

Linked