Elements in other columns being forced down due to Bootstrap column placement

Here is an example of the code illustrating the issue I am facing:

<div class='body'>
<div class="container">
  <div class="col-md-12">
    <div class="col-md-6">
       Content on Left 
    </div>
    <div class="col-md-6">
      Content on Right with a lot of text...
   </div>
   <div class="col-md-6">
     More Content on Left
   </div>
   </div>
   </div>
   </div>

This is how it currently appears, and the layout in the screenshot is what I am trying to achieve fixing:

https://i.sstatic.net/DcoBY.png

In my application, I aim to have forms and buttons on one side, and data displayed on the other as shown here: https://i.sstatic.net/YGQWQ.png

The current layout is causing everything on the left side to be pushed down, creating a large gap between elements. How can I resolve this issue and maintain the separation of the two columns?

htmlcssbootstrap-4

Answer №1

It seems there is a mistake in your code. Remember, in Bootstrap's grid system, columns need to be enclosed within rows. You should modify your code as shown below:

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

Your layout will now resemble the image below, with no gaps between the columns:

bootstrap columns

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position items at the center of the grid in material UI

I am having difficulty centering the grid items of material UI. I have tried using the justifyItems and alignItems props as mentioned in the documentation, but I'm still unable to achieve the desired result. Can anyone provide some guidance? Below is ...

javascripthtmlcssreactjsmaterial-ui

Having difficulty aligning Divs perfectly?

I'm struggling to center four green divs that have a float left, surrounded by a wrapper div in blue. I want them to be aligned a certain way, but on larger screens, they are not displayed in the center. I need them to float underneath each other when ...

htmlcss

Why are the links in the navgoco slide menu failing to function properly?

I utilized a demo from jQueryRain to create a collapsible menu using jQuery. However, after completion, I discovered that none of the links were functioning properly. Upon visiting the documentation page, I noticed that many users were encountering the sam ...

javascriptjqueryhtml

Is there a way for me to update the button text and class to make it toggle-like

Is there a way to switch the button text and class when toggling? Currently, the default settings show a blue button with "Show" text, but upon click it should change to "Hide" with a white button background. <button class="btn exam-int-btn">Show< ...

javascriptjqueryhtmlcssfrontend

Avoiding double entries in the shopping list using DOM selectors in JavaScript

I have been struggling with preventing duplicate items from being added to a shopping list that I created. Even though I thought the code below would solve the issue, it hasn't been effective so far. My expectation was for the JavaScript code to acces ...

javascripthtmlcss

What is the method for setting a fixed size for a Bootstrap container?

Bootstrap 4 is the framework I am currently using. Below is the HTML code I have written: <div class="sprite container d-inline-block bg-info rounded p-1"> <span class="sprite-span-level">Top-right text over image</span> <img cl ...

htmlcssbootstrap-4

Utilize CSS to incorporate special characters as list markers

Is there a way to use CSS to make the list marker in an HTML list display as "►"? ...

htmlcsshtml-lists

Creating a Full-Width Search Input in Bootstrap 4 Navbar

Is there a way to extend the search input width to 100% in the navbar? https://i.sstatic.net/R1Nyi.png The search input field currently has a limited width: <nav class="navbar navbar-light navbar-dark bg-inverse"> <a class="navbar-brand" href ...

cssinputbootstrap-4navbar

What is the best way to attach every sibling element to its adjacent sibling using jQuery?

I've been working with divs in Wordpress, where each div contains a ul element. <div class="list-item"> <div class="elimore_trim"> Lorem ipsum </div> <ul class="hyrra-forrad-size-list"> <li>Rent 1< ...

javascriptphpjqueryhtmlwordpress

Refusing to allow any alterations to the form until it has been saved

I have a form with various input elements such as text input, radio buttons, and a select dropdown. My goal is to allow the selection of a radio button only once at a time. If the user selects the same radio button again, I want to prevent it unless they ...

javascripthtmljqueryforms

CSS // code that works on any device or platform

I have since the beginning been annoyed with the compatibility of CSS. Whats the best practice for coding css, that works with the most common platforms... ( IE7+, Firefox, Safari, Chrome AND iPad / iPhone, Blacberry, Android) Are there any list to be fo ...

csscross-browsercross-platformplatform

Tips for stopping variables from leaking in JavaScript

I'm currently working on a JavaScript code for my task manager website. Each page has its own JS file, but I've noticed that the data saved in one file seems to leak over to the others. How can I contain these variables so that tasks don't s ...

javascripthtmlcssvariables

What is the best way to achieve a column layout using Bootstrap?

I'm having difficulty adjusting the column width in Bootstrap columns to my specific needs. Check out this link for more information: : https://i.sstatic.net/Tvdef.png What I'm trying to achieve is to keep the label column width fixed while all ...

htmlcsstwitter-bootstrapbootstrap-4

I can't seem to get my border-bottom to show up in my Vuetify

I'm currently working on a website project in nuxt.js with Vuetify. The issue I am facing is adding a white line under the app bar to separate it from the links I plan to add as extensions. Despite trying v-divider, I couldn't get rid of the spac ...

cssvue.jsnuxt.jsvuetify.js

What is the best way to conceal text that is not enclosed in <p> or <span> tags?

I need to hide a specific portion of text in an HTML code snippet, however, the text is not wrapped in any specific element. Here is an example: <div class="content"> Give comfortable and durable place to work with a desk. Lock the center d ...

javascripthtmlcss

The process of altering the color of a table row in JavaScript can be done after dismissing a pop-up that was triggered by a button within the same row

I am tasked with changing the color of a specific table row based on user interaction. The table consists of multiple rows, each containing a button or image. When the user clicks on one of these buttons or images, a popup appears. Upon successful data sub ...

javascripthtmlcss

Are conditional comments truly the best approach? What is their functionality and operation like?

A previous question addressing a div positioning issue in Internet Explorer received multiple suggestions advising the use of conditional commenting Why is this relatively positioned div displaying differently in IE? How does one implement conditional co ...

htmlcsslayout

What is the best method to center a div on the screen?

Is there a way to have a div open in the center of the screen? ...

javascriptcss

Tips on customizing the appearance of the dropdown calendar for the ngx-daterangepicker-material package

Is there a way to customize the top, left, and width styling of the calendar? I'm struggling to find the right approach. I've been working with this date range picker. Despite trying to add classes and styles, I can't seem to update the app ...

javascriptcssangulartypescriptangular-material

The Bootstrap grid exhibits instability at specific breakpoints

I have been working on a blog app that utilizes the bootstrap grid system. It functions perfectly on small, medium, and large screens. Here are the images: https://i.sstatic.net/AgEDe.png https://i.sstatic.net/Ydwfn.png https://i.sstatic.net/Q9Fup.png ...

bootstrap-4