Bootstrap columns not breaking correctly

Question

My bootstrap columns are breaking so that on sm view port there are two columns on one row and one column on the next. On xs view port each column is stacked on each other.

html:

<div class=" row">
    <div class="sandwich-item col-sm-4 col-xs-6">
        <h2>hello</h2>
    </div>
    <div class="sandwich-item col-sm-4 col-xs-6">
        <h2>hello</h2>
    </div>
    <div class="sandwich-item col-sm-4 col-xs-6">
        <h2>hello</h2>
    </div>
</div>

css:

.sandwich-item{
    border: 2px solid #390000;
    margin-right: 10px;
}
    .sandwich-item h2 {
        font-size: 18px;
        font-weight: bold;
    }

small view port:

extra small viewport

Answer 1

 .sandwich-item { border: 2px solid #390000; } .sandwich-item h2 { font-size: 18px; font-weight: bold; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class=" row"> <div class="col-sm-4 col-xs-6"> <div class="sandwich-item"> <h2>hello</h2> </div> </div> <div class="col-sm-4 col-xs-6"> <div class="sandwich-item"> <h2>hello</h2> </div> </div> <div class="col-sm-4 col-xs-6"> <div class="sandwich-item"> <h2>hello</h2> </div> </div> </div> 

Your margin-right: 10px; is breaking the columns.

Answer 2

NOTE: No Need To Give margin-right: 10px;

 .sandwich-item{ border: 2px solid #390000; } .sandwich-item h2 { font-size: 18px; font-weight: bold; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <span class="col-sm-4 col-xs-6"> <div class="sandwich-item"> <h2>hello</h2> </div> </span> <span class="col-sm-4 col-xs-6"> <div class="sandwich-item"> <h2>hello</h2> </div> </span> <span class="col-sm-4 col-xs-6"> <div class="sandwich-item"> <h2>hello</h2> </div> </span> </div> 

Answer 3

You're overriding the margin for bootstrap's columns. Avoid mixing those classes with any custom styles (borders will mess with the width in some browsers, too); instead, nest your custom styles inside the columns:

 .sandwich-item{ border: 2px solid #390000; margin-right: 10px; } .sandwich-item h2 { font-size: 18px; font-weight: bold; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class=" row"> <div class="col-sm-4 col-xs-6"> <div class="sandwich-item"> <h2>hello</h2> </div> </div> <div class="col-sm-4 col-xs-6"> <div class="sandwich-item"> <h2>hello</h2> </div> </div> <div class="col-sm-4 col-xs-6"> <div class="sandwich-item"> <h2>hello</h2> </div> </div> </div> 

Answer 4

 .sandwich-item{ border: 2px solid #390000; } .sandwich-item h2 { font-size: 18px; font-weight: bold; } 

 <div class=" row"> <div class="sandwich-item col-sm-4 col-xs-6"> <h2>hello</h2> </div> <div class="sandwich-item col-sm-4 col-xs-6"> <h2>hello</h2> </div> <div class="sandwich-item col-sm-4 col-xs-6"> <h2>hello</h2> </div> </div> 

Answer 5

I have checked twice on Chrome and mozila browser but it's not breaking. You just need to perform a proper browser refresh. Your code has no error, no need to remove the margin-right: 10px;

Either you put this code or not it's not going to affect anyway.