div row doesn't align all buttons correctly - html

Question

I have the following code:
<div class="row">
<div class="col-md-2">
<div class="dropdown">
<button type="button" class="btn btn-bee-space-blue dropdown-toggle buttonWidth" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Generate Report <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" data-bind="foreach: { data: ReportExportTypes, as: 'exportType' }">
<li>
</li>
</ul>
</br>
</div>
</div>
<div class="col-md-offset-8 col-md-2">
<button class="btn btn-bee-grey buttonWidth pull-right BackToScorecard" data-bind="click: $root.BackToScorecard, tooltip: { title: 'Back to Scorecard' }">Back to Scorecard</button>
</div>
</div>
Which shows up correctly like this:
But when I add the following code:
<div class="col-md-1">
<button type="button" class="btn btn-bee-space-blue buttonWidth" data-bind="click: EmailPopup, tooltip: { title: 'Get report to your email' },
enable: ReportingEditEnabled"> Email Report</button>
</div>
It totally breaks all the alignment of my buttons, it shows up like this:
Here is the full code with the button in it:
<div class="row">
<div class="col-md-2">
<div class="dropdown">
<button type="button" class="btn btn-bee-space-blue dropdown-toggle buttonWidth" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Generate Report <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" data-bind="foreach: { data: ReportExportTypes, as: 'exportType' }">
<li></li>
</ul>
</br>
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-bee-space-blue buttonWidth" data-bind="click: EmailPopup, tooltip: { title: 'Get report to your email' },
enable: ReportingEditEnabled"> Email Report</button>
</div>
<div class="col-md-offset-8 col-md-2">
<button class="btn btn-bee-grey buttonWidth pull-right BackToScorecard" data-bind="click: $root.BackToScorecard, tooltip: { title: 'Back to Scorecard' }">Back to Scorecard</button>
</div>
</div>
I want my Generate Report, Email Report and Back to scorecard buttons all in the same row.

Answer 1

Try to set the offset for the last button to 7. The idea is that since there are 12 columns in a row and you have col-md-2 and col-md-1 (the buttons on the left), you have 9 columns remaining to the end of the row. And if the last button is 2 columns wide, 7 columns remain between it and the other two as offset.
<div class="row">
<div class="col-md-2">
<div class="dropdown">
<button type="button" class="btn btn-bee-space-blue dropdown-toggle buttonWidth" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Generate Report <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" data-bind="foreach: { data: ReportExportTypes, as: 'exportType' }">
<li><a href="#"
data-bind="reportExportTypeText: exportType, click: $root.OnGenerateReportClick.bind($root, exportType)"></a>
</li>
</ul>
</br>
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-bee-space-blue buttonWidth" data-bind="click: EmailPopup, tooltip: { title: 'Get report to your email' },
enable: ReportingEditEnabled"> Email Report</button>
</div>
<div class="col-md-offset-7 col-md-2">
<button class="btn btn-bee-grey buttonWidth pull-right BackToScorecard" data-bind="click: $root.BackToScorecard, tooltip: { title: 'Back to Scorecard' }">Back to Scorecard</button>
</div>
</div>