I'm struggling to comprehend the bootstrap grid system, as explained in Murach's .Net book.
Please take the time to read through the entire post. I am aware of the solution (
<div class="col-lg-12">Col x</div>I copied an example from a book where "Column a" and "Column b" are supposed to utilize the 12 columns provided by bootstrap's grid system. This is what I gathered from the book. The snippet looks like this:
<main class="container">
<div class="row">
<div>Column a</div>
<div>Column b</div>
</div>
<div class="row">
<div class="col-md-4">Column c</div>
<div class="col-md-8">Column d</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">Column e</div>
<div class="col-md-8 col-sm-6">Column f</div>
</div>
</main>
In the supplied code, the divs should span the full 12 columns according to the book's illustration (where "Column 1" and "Column 2" correspond to "Column a" and "Column b" in my code).
The expected output based on the book's screenshot can be viewed here.
However, when implementing the code, the actual result differs, as shown in this image. Only applying the aforementioned trick corrects this issue.
The following details were specified in the head section:
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap/min.js"></script>
<link href="style.css" rel="stylesheet" />
This is the content of style.css:
.container
{
padding-top:1em;
}
.row
{
margin-bottom: 2em ;
}
.row div
{
border: 1px solid black ;
padding: 0.5em ;
background-color:lightgrey ;
}