After spending hours using Bootstrap 4.1, I am struggling to align columns within a container. The margins and paddings are not cooperating:
My goal is to create a 2x3 grid on large screens with items boxed and framed around them. However, there seems to be a significant gap (perhaps 30px) between the two columns with the current code. How can I remove this space? Editing padding and margins has not been successful.
Here is the code snippet in question:
.test-container{
border: solid red 1px;
padding: 1px;
margin:auto;
}
.item{
border: solid 1px black;
height: 70px;
margin: 1px;
}
.row{
padding: 0px;
}<div class="container-fluid border-top bg-white shadow">
<div class="col-sm-9 test-container">
<div class="row">
<div class="col-md-6">
<div class="item">Select Unit</div>
</div>
<div class="col-md-6">
<div class="item">Unit 1 / Unit 2</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Input:</div>
</div>
<div class="col-md-6">
<div class="item">Value_Input</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Output</div>
</div>
<div class="col-md-6">
<div class="item">The result is...</div>
</div>
</div>
</div>
</div>I am seeking a simple solution but I seem to be stuck. Any help would be greatly appreciated.
* EDIT * Upon review, it appears that the code generates a 1x6 column layout. While this is suitable for small screens, on larger screens I desire a gapless 2x3 grid layout.