Recently delving into Bootstrap, I encountered an interesting issue.
<div class="container row">
<div id="page" class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div id="header"></div>
<div id="article"></div>
<div id="footer"></div>
</div>
<div class="col-lg-2 col-md-1"></div>
While referencing the Bootstrap documentation, I noticed that the last div may not be required. doc:
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
According to the example given, it seems like you don't always need to include every column in a row. But my math skills tell me otherwise - 6 + 3 should equal 9, leaving 3 columns unaccounted for. This raises a concern for me as I want to ensure I fully understand this concept before moving forward. If columns are missing within a row, will Bootstrap automatically adjust and add them? Or am I setting myself up for unexpected issues down the line?
Prior to this, I was working with the 1200px grid system where I had to meticulously place and count each column. The flexibility of Bootstrap is intriguing but also a bit perplexing in this regard.