Bootstrap Beginer - Strange col-sm-x behiviour

HTML & CSS
1

Hello,

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">
    
<head>
<!--http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=responsive-layout-->
<meta charset="UTF-8">
<title>xxxxx</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

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

</body>
</html>
2

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

1 Like
3

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)

4

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
5

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