Jquery get all contents from each DIV's individually - html

I've an HTML like below
<div id="PanelLevel" class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
Very Important
<div id="maindiv1" class="ui-widget-vi">
<div class='column'>
<div class='portlet' >
<div class='portlet-header'>Energy_Efficiency</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Maintenance_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Cold_Weather_Operation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Important
<div id="maindiv2" class="ui-widget-i">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>First_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Operating_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Footprint</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Height</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Sound</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Corrosion_Resistance</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Somewhat Important
<div id="maindiv3" class="ui-widget-si">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Weight</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Installation_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Redundancy</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Not Important
<div id="maindiv4" class="ui-widget-ni">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Indor_Ducted_Installation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Water_Usage</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My desired output is that I need to extract all 'Portlet-header' class contents only from 4 divs like "maindiv1", "maindiv2", "maindiv3", "maindiv4" as below
"maindiv1" - Energy_Efficiency,Maintenance_Ease, Cold_Weather_Operation
"maindiv2" - First_Cost, Operating_cost, Footprint, Height, Corrosion_Resistance
"maindiv3" - Weight, Installation-Ease, Redundancy
"maindiv4" - Indor_Ducted_Installation, Water_Usage
I've tried the below code but not getting the desired result:
$(document).ready(function() {
$('div').each(function () {
var i = $(this).attr('id');
alert(i);
});
var text = $( '.portlet-header' ).map(function() {
return $( this ).text();
})
.get()
.join( ',' );
});


You can use map() to build an array of the output you require:
let output = $('.col-md-3 > div').map((i, c) => ({
[c.id]: $(c).find('.portlet-header').map((i, p) => $(p).text()).get()
})).get();
console.log(output);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PanelLevel" class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
Very Important
<div id="maindiv1" class="ui-widget-vi">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Energy_Efficiency</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Maintenance_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Cold_Weather_Operation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Important
<div id="maindiv2" class="ui-widget-i">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>First_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Operating_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Footprint</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Height</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Sound</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Corrosion_Resistance</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Somewhat Important
<div id="maindiv3" class="ui-widget-si">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Weight</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Installation_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Redundancy</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Not Important
<div id="maindiv4" class="ui-widget-ni">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Indor_Ducted_Installation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Water_Usage</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note that the .col-md-3 > div isn't a very robust selector, but it will work in the example HTML. I'd suggest adding another specific common class to all those #maindivN elements to make the selection of them more accurate and reliable.


The following may be easier to convert to json format.
$(document).ready(function() {
var result = {};
$('[id^=maindiv]').each(function () {
var key = $(this).attr('id');
result[key] = $(this).find('.portlet-header').map(function() {
return $( this ).text();
})
.get()
.join( ',' );
});
console.log(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PanelLevel" class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
Very Important
<div id="maindiv1" class="ui-widget-vi">
<div class='column'>
<div class='portlet' >
<div class='portlet-header'>Energy_Efficiency</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Maintenance_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Cold_Weather_Operation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Important
<div id="maindiv2" class="ui-widget-i">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>First_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Operating_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Footprint</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Height</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Sound</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Corrosion_Resistance</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Somewhat Important
<div id="maindiv3" class="ui-widget-si">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Weight</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Installation_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Redundancy</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Not Important
<div id="maindiv4" class="ui-widget-ni">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Indor_Ducted_Installation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Water_Usage</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Related

Elements Overlap in Flex Column

I have a spacing problem, how can I prevent Title from intersecting with the number? When the column are forced closer together they overlap. I am using Tailwind CSS. Here is my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col w-full pt-28 px-56">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 lg:gap-24 xl:gap-36 pt-5">
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">01</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">02</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">03</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">04</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">09</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
</div>
</div>

Adding margin to the columns makes the text overflow to the next row as Jesper's answer. If the width of the columns need not be fixed, one way to resolve this issue would be to change the width of the second column from w-11/12 to say w-10/12 and add a mr-2 to the first column
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12 mr-2">
<h4 class="text-xl font-bold">01</h4>
</div>
<div class="flex-col w-10/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
Here is how it looks when you add the above changes:

In the future you should post your CSS. The texts have just a little bit of overlap but adding some margin forces them to be apart. This makes your title overflow to the next row, because it can fit the texts, but not the texts and 2 pixels of margin. That can be fixed by giving the div more room to work with.
.flex-col {
margin-right: 2px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col w-full pt-28 px-56">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 lg:gap-24 xl:gap-36 pt-5">
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">01</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">02</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">03</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">04</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">09</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
</div>
</div>

Video will not stay on 2nd column of row bootstrap

I have a video that is in a row. I want it to stay to the right of the page as a 2nd column of the row. But it keeps appearing under the first column as if it is a second row.
here's my code:
<section class="container-fluid aboutus">
<div classs="row">
<div class="col-sm-5">
<h1>Our Mission</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<div class="button">
<button type="button" class="btn btn-outline-primary btn-lg">Read more</button>
</div>
</div>
<div class="col-sm-7 video">
<div>
<video autoplay muted loop width="550">
<source src="video/Markcard.m4v" type="video/mp4" />
</video>
</div>
</div>
</div>
</section>

First issue: change <div classs="row"> to <div class="row">
Second issue: col-sm-* will only work with small devices you are going to want to handle other devices as well. In the example below I simply used col-*
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="container-fluid aboutus">
<div class="row">
<div class="col-5">
<h1>Our Mission</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<div class="button">
<button type="button" class="btn btn-outline-primary btn-lg">Read more</button>
</div>
</div>
<div class="col-7 video">
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xcJtL7QggTI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</video>
</div>
</div>
</div>
</section>

The easiest way to accomplish that would be with the CSS Flex-Box layout. Here is a link to a tutorial in case you don't know where to start.
https://www.w3schools.com/css/css3_flexbox.asp

How to Upadate bootstrap grid according to user requirements

Hello friends
I will try to adjust bootstrap grid like this but not successful is there any option to do like in the image this.
Below is my code:
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4" style="height: 400px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>

Use two md4 in single parent div of md4 and then use md12 md12 in that. I have provide you snippet you can check that. Run full page snippet beacuse you have just used md-4 so it will work in desktop screen like this. or use xs-4 if you want same structure in mobile screen too
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
div p{
background: black;
}
</style>
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4" style="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="col-md-4" style="height: 100px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>

How can I make fixed height panels in bootstrap?

This is the image I want:
How can I make a fixed bootstrap panel height for all my panels?
<div class="col-md-3 padding-0">
<div class="panel panel-default">
<div class="panel-body" style="min-height: 10px; max-height: 10px;">
<img class="img-responsive" src="images/artgram.png" alt="">
<p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better? Have you ever been in a company’s reception area that is so impressively stylish that
your concept of their professionalism or importance changed for the better?</p>
</div>
</div>
</div>
<div class="col-md-3 padding-0">
<div class="panel panel-default">
<div class="panel-body" style="min-height: 10px; max-height: 10px;">
<img class="img-responsive" src="images/artgram.png" alt="">
<p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better?</p>
</div>
</div>
</div>

Either use fixed height with hidden overflow
.panel-body {
height: 100px; // or whatever
overflow: hidden;
}
or assign max rendered height to all panels dynamically using JS after load. See my answer for a quite similar question here. The snippet is copied below
var panels = document.getElementsByClassName('panel-body');
var maxHeight = Array.prototype.map.call(panels, function(panel) {
return parseInt(getComputedStyle(panel).height, 10);
})
.reduce(function(a, b) {
return Math.max(a, b);
});
for (var i = panels.length; i-- > 0;) {
panels[i].style.height = maxHeight + 'px';
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default col">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>

solving html issue to display on same row

I have this html5 issue. currently the courses are displaying in 2 different rows. i need for it to be in one like no matter how many i add it keeps going to the left and but yes only 2 at a time.
something like this
1-------2
3-------4
5-------6
the current situation is like
1-------4
2-------5
3-------6
hope you could understand my point? here is the code
<!-- courses Start -->
<section class="section-space-padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="section-title">
<h1>Lorem ipsum</h1>
<div class="divider dark"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="courses">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="courses">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- courses End -->

Slightly modified structure to fix order of items and added some CSS rules to get rid of space between columns:
.row {
padding-left: 15px !important;
padding-right: 15px !important;
}
.row .col-md-6,
.row .col-sm-6,
.row .col-xs-6,
.row .col-sm-12 {
padding-left: 0px !important;
padding-right: 0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- courses Start -->
<section class="section-space-padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="section-title">
<h1>Lorem ipsum</h1>
<div class="divider dark"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="row">
<div class="courses">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 1</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 2</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 3</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 4</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 5</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 6</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- courses End -->

<div class="container">
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
<div class="col-md-6">3</div>
<div class="col-md-6">4</div>
<div class="col-md-6">5</div>
<div class="col-md-6">6</div>
</div>
</div>
http://www.bootply.com/NVUPZtxxOy