Unable to set bottom margin in a div bootstrap - css

Question

I'm trying to set a bottom margin to the div with the class "thisrow" but couldn't get it working. Basically, i want that row to be at the bottom (footer) of the card.
here's the code:
<div class="leftbar" style="margin-top:10px;">
<div class="row">
<div class="col-md-4">
<div style="background:#ffc016; height:150px;">
<div class="text-center">
Company Name
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-10">
<h4>Summer Communication Intern</h4>
</div>
<div class="col-md-2 text-right heart"><span class="glyphicon glyphicon-heart-empty"></span></div>
</div>
<div class="row">
<div class="col-md-3"><small>Nike Inc</small></div>
<div class="col-md-3"><small>England</small></div>
<div class="col-md-3"><small>Internship</small></div>
<div class="col-md-3"><small> </small></div>
</div>
<div class="row thisrow">
<div class="col-md-2"> </div>
<div class="col-md-10 text-right heart">
<div class="btn-group" role="group" aria-label="...">
<span class="btn btn-default monthly"><small>Save</small></span>
<a class="btn btn-default applynow">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
http://i.stack.imgur.com/6KEpg.png

Answer 1

In my experience, positioning something at the bottom right is best done by postioning it absolute. This is by far the easiest and most 'dynamic' way of doing this. The css is not that hard:
.leftbar {
position: relative;
}
.bottom-right {
position: absolute;
bottom: 0;
right: 15px; /* == padding of .row in TB3 */
}
This does require you to move that button group directly into the .leftbar, so it uses the correct element to position against. This is nessecary since a .col gets postion relative by default in TB3.
I went ahead and cleaned up your HTML while I was at it. There where a lot of elemnts in there that are not required, as you can see. The result of the markup below should be the same as your code,and is a lot cleanier and easier to understand imo:
<div class="leftbar row" style="margin-top:10px;">
<div class="col-xs-4 text-center" style="background:#ffc016; height:150px;">
Company Name
</div>
<div class="col-xs-8">
<a href="#" class='pull-right'>
<i class="glyphicon glyphicon-heart-empty"></i>
</a>
<h4>Summer Communication Intern</h4>
<ul class="row">
<li class="col-xs-3">
<small>Nike Inc</small>
</li>
<li class="col-xs-3">
<small>England</small>
</li>
<li class="col-xs-3">
<small>Internship</small>
</li>
</ul>
</div>
<div class="btn-group bottom-right" role="group" aria-label="...">
<span class="btn btn-default monthly">
<small>Save</small>
</span>
<a class="btn btn-default applynow">
View
</a>
</div>
</div>
and a demo: http://jsfiddle.net/2tg55z5n/
(note that I changed your col classes to xs just so they would show up in that small fiddle panel, you can just as easy change them back to md of course)

Answer 2

Try setting margin to the button division
<div class="btn-group" role="group" aria-label="..." style="margin-top:_px">
<span class="btn btn-default monthly"><small>Save</small></span>
<a class="btn btn-default applynow">View</a>
</div>

Answer 3

I think you should use an additional container to get your buttons together with the bottom part.
see here for an example of working with containers
Containers example
Bootstrap 3 Container Examples and Common Misuse
View in Desktop mode
Demo by scotch.io
Rows are orange
Toggle Padding to help visualize even more
<main>
<section id="with-container-example">
<h2>With Container</h2>
<div class="container">
<div class="row">
<p class="absolute-example">
This is positioned-absolute, relative to the row to help visualize
</p>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div>
</div>
</section>
<section id="with-no-container">
<h2>With No Container</h2>
<div class="row">
<p class="absolute-example">
This is positioned-absolute, relative to the row to help visualize
</p>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div>
</section>
<section id="with-container-fluid">
<h2>With Container-Fluid</h2>
<div class="container-fluid">
<div class="row">
<p class="absolute-example">
This is positioned-absolute, relative to the row to help visualize
</p>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div>
</div>
</section>
</main>