Multi tool use

Formatting Columns and rows with Bootstrap

I have a modal that I am having trouble formatting. I am a novice front end coder so excuse the messy code.

Right now I'm using bootstrap columns along with a card to make the following

PICTURE OF THE WEBSITE BECAUSE I DONT HAVE ENOUGH REPUTATION

The problem is that I cannot get the second row to move up close to the first row. not sure what kind of css element is useful in this situation. The element that i want moved up is the thing that is labled "thing" and "second row" in the code.

Anyways here is the code that is involved:

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="test">
<div class="modal-dialog modal-lg" style="overflow-y:auto">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">ORDER SUMMARY</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- start content -->
<div class="container-fluid">
<!-- FIRST ROW -->
<!-- left column -->
<div class="row" style="width: 100%">
<div class="col-md-4" style = "width:0%; margin-right: 10%;"> ORDER DETAILS
<hr>
<!-- Order Number -->
<div class="form-group" style = "margin-right: 10%;">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" style= "display: inline">
</div>
</div>
<!-- right column -->
<div class="col-md-4" style="width:100%; margin-right:20%; height:20rem;" id = "order-summary"> ORDER SUMMARY
<div class="card" style="width:17rem; height:24rem">
<div class="card-body" style="width:100%" id="item-summary">

</div>
</div>
</div>
</div>
<!-- SECOND ROW -->
<div class = "row">
<div class="col-md-4 ml-auto" style = "width:100%; margin-right: 20%; position:fixed;"> things
<hr>
<!-- Order Number -->
<!-- <div class="form-group" style = "margin-right: 10%;">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" style= "display: inline">
</div>
-->
</div>
</div>


</div>


CSS:

.row {
display: flex;
}

.col {
flex: 50%;
}

@media screen and (max-width: 600px) {
.column {
width: 100%;
}
.modal-content {
width: 29rem;
height: 38;
margin: auto;
}
}
label{
font-weight: bold;
}

#create-order-modal {
width: 750px !important;
margin: auto !important;
}

.modal-content {
width: 35rem;
height: 35rem;
margin: auto;
}
.container-fluid{
display:inline;
}


I'M sure there is some sort of quick fix for my problem but i cant seem to find a solution. The first row element is too large for some reason, however i have not made any CSS elements that effect the size of the height.

position:fixed;

1 Answer
1

There are a few issues with the grid structure, and more importantly, you should use d-flex flex-clolumn and flex-grow-1 instead of setting the height of the elements. If you want to change the width of the modal, change the width of modal-dialog.

d-flex flex-clolumn

flex-grow-1

elements

modal-dialog

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Order Summary</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col d-flex flex-column">
<div class="w-100">
<p>ORDER DETAILS </p>
<hr>
<!-- Order Number -->
<div class="form-group" >
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
</div>
<div class="mt-auto">
<p>Things</p>
<hr>
</div>
</div>
<div class="col d-flex flex-column">
<p>Order Summary</p>
<div class="card flex-grow-1" >
<div class="card-body" id="item-summary">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, corrupti asperiores nam possimus cum velit nemo sunt, atque voluptate natus, sed dolore praesentium nisi repellendus? Modi totam debitis facere voluptatem!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, corrupti asperiores nam possimus cum velit nemo sunt, atque voluptate natus, sed dolore praesentium nisi repellendus? Modi totam debitis facere voluptatem!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

https://codepen.io/anon/pen/QxzXoK

I removed the modal from the outer div so that the modal be visible. You should add it if you use the code in your project.

modal

div

Comment if you have any question or in case of any issue in the code, I might answer.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.