Bootstrap 4 Column Breaks - html

I am trying to replicate the following column on the right:
But keeps setting the last two boxes into another row:
Been looking at their documentation but it does not clear to me or I might be missing something.
This is the code I have so far:
<div class="col-xs-12 col-md-2">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-md-2">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="w-100"></div>
<div class="col-xs-12 col-md-2">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-md-2">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
</div><!-- .end Second row -->
</div>


Try this
Note: instead of col-xs-12, you can mention col-12.
Check Demo Here
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-3 mb-3">
<!-- Card -->
<div class="card card-body h-100">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-sm-3 mb-3">
<!-- Card -->
<div class="card card-body h-100">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-sm-6 mb-3">
<div class="row">
<div class="col-xs-12 col-sm-6 mb-3">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-sm-6 mb-3">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-sm-6 mb-3 mb-sm-0">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-sm-6 mb-3 mb-sm-0">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</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>

How to place these Divs next to each other?

I'm having some difficulties placing these two divs next to eachother.
Can you solve these in the .html file, so without the css?
<div>
<div style="float: left">
<div class="wrapper" style="width: 50%;float: left;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
<div style="float: left;">
<div class="wrapper" style="width: 50%;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
</div>
Since I have to add some more text: the two divs have to be 50% of the width. Thanks

You need to add the float inside the wrapper and not on its container to fix your actual code. Also add overflow:auto to parent container to avoid overflow issue:
<div style="overflow:auto;border:1px solid;">
<div class="wrapper" style="width: 50%;float: left;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
<div class="wrapper" style="width: 50%;float: left;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>

Use display:flex attribute
<div style="display:flex">
<div style="">
<div class="wrapper" style="">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
<div style="">
<div class="wrapper" style="">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
</div>

<div>
<div style="float: left;width: 50%;">
<div class="wrapper" style="float: left;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a>
</footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
<div style="float: left;width: 50%;">
<div class="wrapper" style="">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace">Tortor sit amet aliquet</p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.
</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a>
</footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
</div>

Bootstrap grid ordering responsive

Hey there I'm stuck and I'm looking for someone who's experienced with bootstrap.
This is my current situation:
And that's the corresponding code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig yellow" />
<h3 class="yellow">1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig lightgreen" />
<h3 class="lightgreen">3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig blue" />
<h3 class="blue">5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig orange" />
<h3 class="orange">2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig green" />
<h3 class="green">4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<hr class="hrBig brown" />
<h3 class="brown">6</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
</div>
My problem is that in tablet mode the tabs should be like this:
12
34
56
But right now they are like that:
And on Mobile they should look like this:
1
2
3
4
5
6
How can I achieve this?

I needed to re-arrange your code a bit and added some wrappers to achieve what you want
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig yellow" />
<h3 class="yellow">1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig orange" />
<h3 class="orange">2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig yellow" />
<h3 class="yellow">3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig orange" />
<h3 class="orange">4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig yellow" />
<h3 class="yellow">5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-md-12 col-sm-6 col-12">
<hr class="hrBig orange" />
<h3 class="orange">6</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
</div>
</div>

You can use like this for Bootstrap 3.3.7
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-6">
<hr class="hrBig yellow" />
<h3 class="yellow">1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-sm-12 col-xs-6">
<hr class="hrBig orange" />
<h3 class="orange">2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-6">
<hr class="hrBig lightgreen" />
<h3 class="lightgreen">3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-sm-12 col-xs-6">
<hr class="hrBig green" />
<h3 class="green">4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-6">
<hr class="hrBig blue" />
<h3 class="blue">5</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-sm-12 col-xs-6">
<hr class="hrBig brown" />
<h3 class="brown">6</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</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

Put a photo to the bottom of other photo using bootstrap

I am new to html and bootstrap and I need a little help. I have a photo with 100% in a div col-lg-12 and I want to put another div with a photo, in the left, and a paragraph, in the right.
The second div I want to be in the bottom of the first picture and centered. How I made the html and bootstrap the second div comes after the picture ends. I want the whole high of the sec div to be in bottom of picture not after the picture ends.
I tried with position absolute but doesn't work to be responsive. Please someone give me an idea.
HTML
<div class="container main-container">
<div class=" top">
<div class="row-fluid">
<div class="col-lg-12">
<img src="images/header.jpg" alt="#" />
<div class="row">
<div class="photo col-lg-2 col-lg-offset-2">
<img src="images/best_friends_logo.png" alt="#" />
</div>
<div class="info col-lg-8">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus velit nec sagittis mattis. Sed et tellus blandit turpis vulputate eleifend. </h1>
</div>
</div>
</div>
</div>
</div>

This might work:
<div class="container main-container">
<div class=" top">
<div class="row-fluid">
<div class="col-lg-12">
<img src="images/header.jpg" alt="#" />
</div>
<div class="col-lg-12">
<div class="photo col-lg-2 col-lg-offset-2">
<img src="images/best_friends_logo.png" alt="#" />
</div>
<div class="info col-lg-8">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus velit nec sagittis mattis. Sed et tellus blandit turpis vulputate eleifend. </h1>
</div>
</div>
</div>
</div>
</div>

For each section of vertical contents, you will have to create a new row.
Your code should be something like this. To make things clear from the demo, I'm replacing lg with xs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<img class="img-responsive" src="https://placehold.it/2048x128" alt="#" />
</div>
</div>
<div class="row">
<div class="photo col-xs-4">
<img class="img-responsive" src="https://placehold.it/512x1024" alt="#" />
</div>
<div class="info col-xs-8">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus velit nec sagittis mattis. Sed et tellus blandit turpis vulputate eleifend. </h1>
</div>
</div>
</div>