I'm currently developing a weather application and I'm facing a challenge with centering columns using Bootstrap's grid system. I have two rows that display the current local weather conditions. In order to center these columns on the page, I need to utilize offsets.
The two rows are identified as row-1 and row-2. When I apply an offset to the div inside row-1, it works perfectly. However, the same approach does not work for row-2.
Below is the relevant code snippet -
<div class="row" id="row-1">
<div class="col-xs-5 col-xs-offset-4" id="picture"></div>
</div>
<div class="row" id="row-2">
<div class="col-xs-3 col-xs-offset-4" id="area"></div>
<div class="col-xs-2" id="conditions"></div>
<div class="col-xs-2" id="wind-speed"></div>
</div>
You can also view the Pen on Codepen.
The issue seems to be that col-xs-offset-4 is not being applied to the first div inside row-2, specifically
.I'm unsure of what I might be overlooking. Any guidance would be greatly appreciated.