Showing the space between columns inline

.row {
  background: gray;
  margin-top: 20px;
}
.col-md-6 {
  border: solid 1px red;
  padding: 10px;
}
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-md-6">
     <div>Row1</div>        
    </div>
    <div class="col-md-6">
      Dummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy Text </div>
     <div class="col-md-6">
     <div>LeftRow2</div>        
    </div>
    <div class="col-md-6">
     <div>Riight Row2</div>        
    </div>   
  </div>
</div>

I need this not to have the space like in the photo, but the left col to go up and to have the same height https://i.sstatic.net/q2Zy2.jpg

I need this way because on responsive I need it to be like it is now like this, left column and right column below it https://i.sstatic.net/DbQYB.jpg

I tried the other way like this

.row {
  background: gray;
  margin-top: 20px;
}
.col-md-6 {
  border: solid 1px red;
  padding: 10px;
}
<div class="container">
  <div class="row">
    <div class="col-md-6">
     <div>Row1</div>
     <div>Riight Row2</div>
    </div>
    <div class="col-md-6">
      Dummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy Text 
      
      </div> 
   </div>

The second way I achieve what I want but then in responsive the right column it is not right below the left column it is like this, does anyone know how to solve this thank you. https://i.sstatic.net/1Mu9J.jpg

htmlcssbootstrap-4

Answer №1

Are you looking for something along these lines?

$(document).ready(function(){
$(window).on('resize',function(){
if ($(window).width() < 960) {
$('#row1').after($('#dummy'));
 } else {
  location.reload(); 
 $('dummy').removeAttr('id');
 }
}); 
});
.red-border {
  border: solid 1px red;
  background: gray;
  margin-top: 10px;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<body>

  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div id="row1" class="row">
          <div class="col-md-12">
            <div class="red-border"> Row1</div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="red-border"> LeftRow2</div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div id="dummy" class="row">
          <div class="col-md-12">
            <div class="red-border"> Dummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy Text</div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <div class="red-border"> Riight Row2</div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>

</html>

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

Synchronize information from CouchDB to PouchDB in order to enable offline storage on a Windows 7 system through the utilization of Google Chrome version

My goal is to sync data from CouchDB to PouchDB for offline storage using the following code to retrieve data from CouchDB: db.replicate.from('http://test.iriscouch.com/todo','idb://todo', function (err, changes) { if (err) { conso ...

windowshtmlgoogle-chromecouchdbpouchdb

Ways to select the initial 10 rows, final 3 rows, and middle 2 rows using Javascript

As a newcomer to Javascript, I have a couple of questions: 1) How can I retrieve the first 10 rows, the last 3 rows, and the 2 rows in the center using the code var firstTable = $('#aaa table').eq(0); 2) Is there a way to create and assign new ...

javascriptjqueryhtml

Content in the div stretches when viewed on a mobile device

I have created a responsive page that is centered, but when viewed on a mobile window, I want the text to stretch and remove any white space on the sides. How can I achieve this using Bootstrap 4? hr { border: 0; height: 1px; ba ...

htmlcssbootstrap-4

Retrieve the ng-model value from one div and pass it to another div

I am trying to retrieve the value of ng-model from one div and use it in another div. HTML: <div class="form-group" ng-repeat="key in condition.keys"> <select class="form-control" ng-show="key.aggregator" ng-model="key.aggregator" ng-options ...

javascripthtmlangularjs

Employ a separate function to extract HTML content from a jQuery target in an AJAX response

Initially, the HTML div is empty upon loading the page. However, clicking a button triggers jQuery AJAX to load new HTML content into the div. $("#control-list a#ms").click(function(){ var postData = "actionrequest=ms"; $.ajax({url:"SSSutility.php ...

jqueryhtmlajax

Showcasing the most recent three Wordpress blog posts in a Bootstrap4 carousel

I'm currently working on a Bootstrap4 carousel that should display the featured image, title, and the beginning of the 3 latest blog posts. Although the desired content is showing up in the carousel, it seems to be stuck on the first post without auto ...

wordpressbootstrap-4

I must design a unique layout for my website

I am creating a webpage with various shapes and elements. However, I am facing a challenge with creating a shape that is commonly used. In platforms like Khan Academy, there is simulated programming where shapes can be easily created with a simple command ...

javascripthtml

The variable in Angular stopped working after the addition of a dependent component

Currently, I am working with Angular and have implemented two components. The first component is a navigation bar that includes a search bar. To enable the search functionality in my second component (home), I have added the following code: HTML for the n ...

javascripthtmlangulartypescript

The :first selector examines the parent's parent as a reference point, rather than the immediate

I am facing a challenge with shuffling large elements within my layout because of floating them and attempting to display them. Specifically, the elements with the class .gallery-large always need to be the first child inside the .item container. There are ...

javascriptjqueryhtmlcss

Creating beautifully formatted HTML text in a PDF document using JavaFX and iText

Can you convert a styled HTML text (with color, alignment, etc.) from an editor like HTMLEditor to an editable PDF using iText? I've searched online but couldn't find any information on this. Appreciate any help. Thank you. ...

javahtmljavafxitexthtml-editor

Is it possible to programmatically bind a click event to each individual word in a div element?

I'm attempting to link each word within an element without altering the markup inside the element using Javascript. ...

javascriptjqueryhtml

Decrease the length of the bottom border

https://i.sstatic.net/mvNHu.pngHey there, I'm wondering if it's possible to decrease the length of a border bottom in CSS. I currently have a div with a border-bottom: 2px style applied to it, but I want to make it shorter. Is this achievable? ht ...

htmlcss

Can you explain the significance of the final digit in the CSS class "col-md-x"? I am referring to instances where

For instance, the classes col-md-4 and col-md-1 can be used, with options available all the way from 1 to 12. But what does each number signify? ...

cssbootstrap-4

Guide on how to modify the color of a single row within a table with just a click

My table structure is as follows: <table> <tr> <td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td> </tr> <tr> ...

javascriptjqueryhtml

What is the best way to insert a JavaScript button before an HTML button on a webpage?

Currently, I am working on creating a calculator using JavaScript and HTML. My goal is to add memory buttons (MS, MC, MR) before the clear button (C) on the calculator interface. Despite trying various methods, I am facing some challenges in achieving this ...

javascripthtmlcssevents

Tips for adjusting the size of icons in Ionic Framework v4 and Angular 7

The library ngx-skycons offers a variety of icons for use in projects. If you're interested, check out the demo here. I'm currently incorporating this icon library into an Ionic project that utilizes Angular. While the icons work perfectly, I&ap ...

cssangulartypescriptionic-frameworkicons

Using a URL in the fill property is a simple process that involves specifying

Here is the snippet of the code I'm working with: <?xml version="1.0" standalone="no"?> <html> <head> <style> .someClass { fill:"url(#Pattern)"; } </style> ...

jqueryhtmlcsssvg

Are there any libraries available to simplify HTML development in C#, .NET, or ASP.NET?

I have a vivid memory of stumbling upon a project where an individual utilized json-like strings to generate high-quality HTML in a certain programming language. Is there a similar tool available for use with C# or .NET? radio-box{ AName, [First|Second| ...

c#.nethtmlauto-generate

Creating a hover effect for displaying image masks

My website features a profile page displaying the user's photo. I am attempting to create a functionality where when the user hovers over their photo, a transparent mask with text appears allowing them to update their profile picture via a modal. How ...

javascriptjquerycss

PHP is failing to display line breaks when retrieving data from JSON sources

I have a JSON feed that is decoded by PHP using json_decode and then echoed onto my HTML page. The issue I am facing is that the feed contains \n characters, but when PHP echoes them out, they are not recognized as new lines or line breaks in HTML. In ...

phphtmljson