I'm encountering an issue with Bootstrap- when viewing on mobile, the columns are stacking together with gaps between them. How can I eliminate these gaps so that they display in a single column?
Here is my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-3 white no-gutters">
<h3>Weather for LA</h3>
</div>
</div>
<div class="row equal">
<div class="col-sm-2 col-sm-offset-3 white col-equal no-gutters">
<img src="https://www.w3schools.com/howto/img_fjords.jpg">
<h3>7 C</h3>
</div>
<div class="col-sm-2 col-equal white no-gutters">
<h4>01-14-2018</h4>
<table class="table table-striped table-sm">
<tr>
<td>Wind</td>
<td>
<?php echo $wind.'m/s'; ?>
</td>
</tr>
<tr>
<td>Clouds</td>
<td>
<?php echo $cloudiness;?>
</td>
</tr>
<tr>
<td>Pressure</td>
<td>
<?php echo $pressure.' '.'hpa';?>
</td>
</tr>
<tr>
<td>Humidity</td>
<td>
<?php echo $humidity.'%';?>
</td>
</tr>
</table>
</div>
</div>
</div>