Bootstrap Beginer - Strange col-sm-x behiviour


col-sm-6 , when viewed in mobile (portrait) it taking full width. But it suppose to take only half width of the screen. What can be wrong?

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="container">
    <div class="row">
        <div class="col-sm-6" style='border:2px solid red'>test</div>


Try .col-xs-6 instead. .col-sm-6 works on devices 750px or wider.

1 Like

Awesome Thanks OzRamous. works charm !!!

i have clearly messed up xs and sm. Thinking sm=small devices :smiley:

Grid Classes
The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

It refers t the screen size. You could have a really small desktop monitor…maybe split screen it…and xs / sm would take effect :slight_smile: .

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.