CODEWITHSUNDEEP
htmlcssbootstrap-4
find_all
find_all

Reputation: 197

Bootstrap columns pushing elements in other column down

Example code to illustrate my problem looks like:

<div class='body'>
<div class="container">
  <div class="col-md-12">
    <div class="col-md-6">
       Col Left 1 
    </div>
    <div class="col-md-6">
      Col Right 1 ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
   </div>
   <div class="col-md-6">
     Col Left 2
   </div>
   </div>
   </div>
   </div>

This is how this renders, and the markup on the screenshot is what I would like to fix:

enter image description here

Ultimately, on my application, I would like to have my forms and buttons on one side, and my data display on the other like so: enter image description here

What this is doing is pushing everything on the left down and creating a large space between the elements as shown in the example. How do I overcome this and keep the two columns separated?

Upvotes: 0

Views: 1238

Answers (1)

Tracy Nguyen
Tracy Nguyen

Reputation: 96

Your code is incorrect. In Bootstrap grid layout, columns must be wrapped by rows. You can re-write your code as below:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      Col Left 1
    </div>
    <div class="col-md-6">
      Col Right 1
    </div>
    <div class="col-md-6 border border-info">
      Col Left 2
    </div>
</div>

Your layout should now look like the picture below, without space between the columns:

bootstrap columns

Upvotes: 1

Related Questions